Learn about how we&#x27;ve improved startup performance with our Rust-powered functions.

Vercel Functions are now faster—and powered by Rust – Vercel

The Language Model Specification is open-source. Anyone can now build AI provider integrations that work seamlessly with the <strong>Vercel</strong> AI SDK, and our amazing community has already started to add support for providers such as LLamaCpp.

Vercel AI SDK 3.1: ModelFusion joins the team – Vercel

<strong>Vercel</strong> now supports HIPAA compliance for our enterprise customers, enabling companies to leverage our Frontend Cloud while maintaining compliance

Vercel supports HIPAA compliance – Vercel

Learn how <strong>Vercel</strong> protects the AI SDK Playground using our best-in-class DDoS mitigation, Next.js Middleware, and our partner Kasada.

Protecting AI apps from bots and bad actors with Vercel and Kasada – Vercel

Ozone, the AI-infused, web-based video editor, accelerated their development process by 5x after switching to <strong>Vercel</strong> and Next.js. See how.

Revolutionizing video editing on the web with Next.js and Vercel – Vercel

Lastly, we&#x27;ve simplified the default authentication setup by removing the need to create a GitHub OAuth application prior to initial deployment. This will make it faster to deploy and also easier for open source contributors to use <strong>Vercel</strong> Preview Deployments when they make changes.

Next.js AI Chatbot 2.0 – Vercel

Skew Protection is now supported in SvelteKit (v5.2.0 of the <strong>Vercel</strong> adapter), previously supported in Next.js (stable in v14.1.4), and more frameworks soon. Framework authors can view a reference implementation here.

Skew Protection is now generally available – Vercel

<strong>Vercel</strong> is the platform for frontend developers, providing the speed and reliability innovators need to create at the moment of inspiration.

Improved hard caps for Spend Management – Vercel

While many super commuters chose to live in idyllic settings, the richest among them often opt to remain in the white-hot centers of Manhattan and Silicon Valley. "They want to be near each other," Moss says. "They need to be near each other, because gossip is such a big part of their life."

‘Super commuting’ is on the rise — and that spells big trouble for mid-size cities

Granted, Robinson doesn't make the commute five days a week. He's expected to show up at Vercel's headquarters once or twice a month, mostly to attend executive meetings. He stays at a Hilton near the office for a night or three, then commutes back to Iowa ...

Vercel

vercel

Earlier, Vercel's free pricing plan allowed multiple members to commit changes that would automatically deploy. However, this feature has recently changed, and now only the project creator can trigger deployments. To enable this feature for each additional member, a fee of $20 will be charged. Bypass the Charge with a GitHub Action You can create a GitHub Action that performs an empty commit, triggering Vercel to deploy automatically. Here’s how: Step 1: Create the Workflow File Inside your repository, navigate to the .github/workflows directory. If the workflows folder doesn't exist, create it.


Add a file named auto-empty-commit.yml. Step 2: Add the Script Paste the following code into auto-empty-commit.yml: name: Auto Empty Commit

on:
  push:
    branches:
      - 'master' # Trigger on pushes to the master branch
      # - '**' # Uncomment to trigger on pushes to any branch

permissions:
  contents: write # Allow write access to repository contents

jobs:
  empty_commit:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout Repository
        uses: actions/checkout@v2

      - name: Get the Latest Commit Branch
        id: get_branch
        run: echo "branch=$(git rev-parse --abbrev-ref HEAD)" >> $GITHUB_ENV

      - name: Create Empty Commit
        run: |
          git config --local user.name "example" # Replace with your name
          git config --local user.email "example@example.com" # Replace with your email
          git commit --allow-empty -m "Auto commit after push"
          git push origin ${{ env.branch }}
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} Customization Branch Configuration: Modify the on.push.branches section to specify which branch will trigger this action.


Git User Configuration: Update the Git user name and email in the Create Empty Commit step with the credentials of the member who created the project on Vercel. Final Steps Commit your changes and push them to your repository.


Now, when a commit is made, the action will create an empty commit, triggering Vercel to deploy automatically. You’ll know the deployment status by the commit icons: a cross ❌ indicates the deployment failed, while a check ✅ shows successful deployment. Conclusion That’s it! I hope you found this guide helpful. 🚀 Feel free to follow me on GitHub and LinkedIn for more JavaScript tips and tricks! GitHub LinkedIn Stay awesome and happy coding! ✨ Earlier, Vercel's free pricing plan allowed multiple members to commit changes that would automatically deploy. However, this feature has recently changed, and now only the project creator can trigger deployments. To enable this feature for each additional member, a fee of $20 will be charged. Bypass the Charge with a GitHub Action You can create a GitHub Action that performs an empty commit, triggering Vercel to deploy automatically. Here’s how: Step 1: Create the Workflow File Inside your repository, navigate to the .github/workflows directory. If the workflows folder doesn't exist, create it. Add a file named auto-empty-commit.yml. Inside your repository, navigate to the .github/workflows directory. If the workflows folder doesn't exist, create it. Inside your repository, navigate to the .github/workflows directory. If the workflows folder doesn't exist, create it. .github/workflows workflows Add a file named auto-empty-commit.yml. Add a file named auto-empty-commit.yml . auto-empty-commit.yml Step 2: Add the Script Paste the following code into auto-empty-commit.yml : auto-empty-commit.yml name: Auto Empty Commit

on:
  push:
    branches:
      - 'master' # Trigger on pushes to the master branch
      # - '**' # Uncomment to trigger on pushes to any branch

permissions:
  contents: write # Allow write access to repository contents

jobs:
  empty_commit:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout Repository
        uses: actions/checkout@v2

      - name: Get the Latest Commit Branch
        id: get_branch
        run: echo "branch=$(git rev-parse --abbrev-ref HEAD)" >> $GITHUB_ENV

      - name: Create Empty Commit
        run: |
          git config --local user.name "example" # Replace with your name
          git config --local user.email "example@example.com" # Replace with your email
          git commit --allow-empty -m "Auto commit after push"
          git push origin ${{ env.branch }}
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} name: Auto Empty Commit

on:
  push:
    branches:
      - 'master' # Trigger on pushes to the master branch
      # - '**' # Uncomment to trigger on pushes to any branch

permissions:
  contents: write # Allow write access to repository contents

jobs:
  empty_commit:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout Repository
        uses: actions/checkout@v2

      - name: Get the Latest Commit Branch
        id: get_branch
        run: echo "branch=$(git rev-parse --abbrev-ref HEAD)" >> $GITHUB_ENV

      - name: Create Empty Commit
        run: |
          git config --local user.name "example" # Replace with your name
          git config --local user.email "example@example.com" # Replace with your email
          git commit --allow-empty -m "Auto commit after push"
          git push origin ${{ env.branch }}
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} Customization Branch Configuration: Modify the on.push.branches section to specify which branch will trigger this action. Git User Configuration: Update the Git user name and email in the Create Empty Commit step with the credentials of the member who created the project on Vercel. Branch Configuration: Modify the on.push.branches section to specify which branch will trigger this action. Branch Configuration: Modify the on.push.branches section to specify which branch will trigger this action. Branch Configuration: on.push.branches Git User Configuration: Update the Git user name and email in the Create Empty Commit step with the credentials of the member who created the project on Vercel. Git User Configuration: Update the Git user name and email in the Create Empty Commit step with the credentials of the member who created the project on Vercel. Git User Configuration: Create Empty Commit Final Steps Commit your changes and push them to your repository. Now, when a commit is made, the action will create an empty commit, triggering Vercel to deploy automatically. Commit your changes and push them to your repository. Commit your changes and push them to your repository. Now, when a commit is made, the action will create an empty commit, triggering Vercel to deploy automatically. Now, when a commit is made, the action will create an empty commit, triggering Vercel to deploy automatically. You’ll know the deployment status by the commit icons: a cross ❌ indicates the deployment failed, while a check ✅ shows successful deployment. Conclusion That’s it! I hope you found this guide helpful. 🚀 Feel free to follow me on GitHub and LinkedIn for more JavaScript tips and tricks! GitHub GitHub LinkedIn LinkedIn Stay awesome and happy coding! ✨

Maximize Vercel's FREE Plan: Enable Auto Deployment for All Members

Your Complete Guide to Self-Hosting Umami Analytics with Vercel and Supabase

Retrieval-Augmented Generation (RAG) blends the generative abilities of LLMs with the retrieval of information from diverse knowledge bases (KBs). However, traditional implementations of RAG have often relied on pre-scripting the logic for selecting and utilizing these KBs. This conventional method, while effective, places limits on the flexibility and adaptability, and performance of the applications. But consider an alternative: applications that empower the LLM itself to determine which actions are necessary to generate a response. This approach not only harnesses the LLM's generative capabilities but also its ability to make contextual decisions on-the-fly, thereby opening up a more dynamic and responsive way to handle knowledge search tasks. As a result, you can build targeted KB's and use the power of LLMs to write application-specific queries that retrieve better, more relevant results. To demonstrate this approach, we'll build backed by a custom tool.
The chatbot will have access to a KB containing product information - any time you ask a question the chatbot determines could be answered using this tool it will query the KB and show both the in-progress query and retrieved results as custom UI elements before responding with the retrieved products as context. a simple chatbot We'll use Vercel's to render the chat window and Dewy to implement the information storage and retrieval used by our tool and as the knowledge store backing the tool. Generative UI library Dewy Why Dewy and Vercel? is designed to simplify the creation of custom LLM "tools" and to render rich, interactive UI elements that are specific to each tool the LLM chooses to use. Vercel's Generative UI library) What this means in practice is that your UI can dynamically adapt to the specific tools chosen by the LLM, displaying tool-specific information and progress indicators to the user. is an OSS knowledge base with the simplicity and ease-of-use of a document store: insert your documents and Dewy takes care of preparing them for semantic search.
Dewy's flexibility and ease of use allow developers to focus on building amazing user experiences rather than complex data-processing pipelines. Dewy Prerequisites Before diving into the tutorial, ensure you have the following prerequisites covered: Basic knowledge of Typescript and React A NextJS environment setup on your local machine A copy of Dewy running on your local machine (see Dewy's if you need help here). installation instructions Access to the platform. OpenAI API Set up your project : Create a NextJS app by running the following command in your terminal: Initialize a new NextJS project pnpm dlx create-next-app@canary rag-tool Navigate into your new project directory: cd rag-tool : Next, we'll install , Vercel's AI library, , OpenAI's official JavaScript SDK compatible with the Vercel Edge Runtime, and , the Dewy client library. Zod will be used to describe the input types for our custom tool. Install required packages ai openai dewy-ts pnpm install ai openai zod dewy-ts : Configure your OpenAI key and Dewy endpoint. Prepare your environment touch .env.local OPENAI_API_KEY=xxxxxxxxx
DEWY_ENDPOINT=localhost:8000 Create a custom tool First, create the custom tool the LLM will use to answer product-related questions.
This tool describes its purpose and parameters so the LLM knows when and how to use it, and defines the implementation and UI logic to complete the tool invocation. In this case, the tool will "get information about products", given a search query and a result count. When the LLM determines this tool should be used, it will generate the query string and choose how many results are appropriate, then execute the function defined below. render On execution, the tool searches Dewy for relevant products, then calls the LLM again to pick up where it left off. Since this process can take awhile, the function 's components indicating that the tool is being used and its progress. These components allow the UI to reflect the specific information relevant to this tool's outcomes. render yield import { z } from 'zod';
import { Dewy } from 'dewy-ts';
import { OpenAIStream } from 'ai'
import { Tokens } from 'ai/react';

import AssistantMessage from './AssistantMessage';
import ResultCard from './ResultCard';
import SearchCard from './SearchCard';

// Create a Dewy client.
const dewy = new Dewy({
    BASE: process.env.DEWY_ENDPOINT
})

// Implement the tool's logic.
// In this case, we search for the given query
// and return the `count` most similar chunks in the KB.
// The returned chunks are used in the `render` method below.
async function searchProducts(query: string, count: number) {
    const context = await dewy.kb.retrieveChunks({
        collection: "product_info",
        query: query,
        n: count,
    })
    return context.text_results.map(c => c.text)
}

// Define the behavior of the product search tool.
export default function productSearch(aiState, openai) {
    return {
        // A description of the tool.
        // This used by the LLM to decide when to use the tool
        description: 'Get information about products',

        // Parameters control how the tool behaves.
        // These values will be picked by the LLM,
        // so be sure to clearly explain what they're
        // used for.
        parameters: z.object({
            query: z.string().describe(```
                A description of a product 
                or what the product can be used for.
            ```),
            count: z.number().describe(```
                The number of products to return.
            ```),
        }).required(),

        // Configure the tool's behavior.
        // This function will be called after the LLM has
        // chosen to use the tool and generated values for
        // the parameters we configured above.
        render: async function* ({ query, count }) {
            // Let the user know we're looking for 
            // products related to their message
            yield <SearchCard query={query} count={count} />

            // Search for products related to the user's question
            const products = await searchProducts(query, count)

            // Update the message history 
            // with the results we found
            aiState.update([
                ...aiState.get(),
                {
                    role: "function",
                    name: "product_search",
                    content: JSON.stringify(products),
                }
            ]);

            // Now reply to the user.
            // The products we retrieved are part of the state 
            // provided as the messages parameter
            const resp = await openai.chat.completions.create({
                model: 'gpt-4-0125-preview',
                messages: aiState.get(),
                stream: true,
            })

            // Stream the results back as they're generated
            const stream = OpenAIStream(resp, {
                onFinal: (completion) => {
                    // Update the conversation history 
                    // once the full response is received
                    aiState.done([
                        ...aiState.get(),
                        {
                            role: "assistant",
                            content: completion,
                        }
                    ])
                }
            });

            // Display the response alongside 
            // the products provided to the model.
            return <div className="flex flex-col gap-2">
                <ResultCard query={query} results={context} />
                <AssistantMessage>
                    <Tokens stream={stream} />
                </AssistantMessage>
            </div>
        }
    }
} Setup the server-side message handler Configure a message handling action to receive new messages from the client.
This handler configures the initial state of the chatbot and defines the server's behavior when a message is received from the user. import { OpenAI } from 'openai';
import { createAI, createStreamableUI, getMutableAIState, render } from 'ai/rsc';

import productSearch from './productSearch';
import AssistantMessage from './AssistantMessage';

// Configure the LLM, in this case OpenAI
const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
});
 
async function submitUserMessage(userInput: string) {
  'use server';
 
  // The AI state. This contains our message history,
  // and will be provided to the LLM each time a 
  // chat completion is generated.
  const aiState = getMutableAIState<typeof AI>();
  aiState.update([
    ...aiState.get(),
    {
      role: 'user',
      content: userInput,
    },
  ]);
 
  // Helper function for building streamable UI components.
  const ui = render({
    model: 'gpt-4-0125-preview',
    provider: openai,
    messages: [
      { role: 'system', content: `
        You are a product recommendation engine. 
        Respond only with information about products 
        retrieved using the "product_search" function role.
        `},
      { role: 'user', content: userInput }
    ],

    // This determines how generated text 
    // (as opposed to function calls) will
    // be rendered.
    text: ({ content, done }) => {
      if (done) {
        aiState.done([
          ...aiState.get(),
          {
            role: "assistant",
            content
          }
        ]);
      }
      return <AssistantMessage>{content}</AssistantMessage>
    },

    // Configure the tools available to the LLM
    tools: {
      product_search: productSearch(aiState, openai),
    }
  })
 
  return {
    id: Date.now(),
    display: ui
  };
}
 
// Define the initial state of the AI. It can be any JSON object.
const initialAIState: {
  role: 'user' | 'assistant' | 'system' | 'function';
  content: string;
  id?: string;
  name?: string;
}[] = [];
 
// The initial UI state that the client will keep track of, which contains the message IDs and their UI nodes.
const initialUIState: {
  id: number;
  display: React.ReactNode;
}[] = [{id: 0, display: <AssistantMessage>Hi! How can I help you today?</AssistantMessage>}];
 
// AI is a provider you wrap your application with so you can access AI and UI state in your components.
export const AI = createAI({
  actions: {
    submitUserMessage
  },
  // Each state can be any shape of object, but for chat applications
  // it makes sense to have an array of messages. Or you may prefer something like { id: number, messages: Message[] }
  initialUIState,
  initialAIState
}); Setup the chat UI on the client Finally, set up the chat UI on the client. Map over the UI state's messages and insert their property. display Configure a form to update the AI state, then call the server side handler. submitUserMessage 'use client'
 
import { useState } from 'react';
import { useUIState, useActions } from 'ai/rsc';
import type { AI } from './action';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
 
import UserMessage from './UserMessage';
import { PlaneIcon } from './icons';

export default function Page() {
  const [inputValue, setInputValue] = useState('');
  const [messages, setMessages] = useUIState<typeof AI>();
  const { submitUserMessage } = useActions<typeof AI>();
 
  return (
    <>
      <div className="flex-1 overflow-auto px-4 mt-4">
        <div className="grid gap-4 md:gap-8">
          {
            messages.map((message) => (
              <div key={message.id}>
                {message.display}
              </div>
            ))
          }

        </div>
      </div>

      <form onSubmit={async (e) => {
        e.preventDefault();

        // Add user message to UI state
        setMessages((currentMessages) => [
          ...currentMessages,
          {
            id: Date.now(),
            display: <UserMessage>{inputValue}</UserMessage>,
          },
        ]);

        // Submit and get response message
        const responseMessage = await submitUserMessage(inputValue);
        setMessages((currentMessages) => [
          ...currentMessages,
          responseMessage,
        ]);

        setInputValue('');
      }}>
        <div className="border-t-2">
          <div className="flex items-center h-14 px-4">
            <Input
              className="rounded-full flex-1 min-w-0 bg-gray-200 dark:bg-gray-800"
              placeholder="Type a message..."
              value={inputValue}
              type="text"
              onChange={(event) => {
                setInputValue(event.target.value)
              }}
            />
            <Button className="ml-2 h-8 w-8 rounded-full bg-gray-200 dark:bg-gray-800" size="icon">
              <PlaneIcon className="h-4 w-4" />
              <span className="sr-only">Send message</span>
            </Button>
          </div>
        </div>
      </form>
    </>
  )
} To keep this post from going any longer than it is already, several basic UI components have been omitted, but you can checkout the full implementation in the of the Dewy repo. examples directory Conclusion In conclusion, this blog post has guided you through the process of building a Retrieval-Augmented Generation (RAG) tool using Vercel's Generative UI components. This approach moves away from the traditional methods of pre-scripting logic for selecting and utilizing knowledge bases. By empowering the LLM to determine which knowledge bases are necessary and how best to use them, we've showcased a more dynamic, efficient, and user-centric way of handling information retrieval tasks. By utilizing Dewy as our knowledge base, we've emphasized the importance of a flexible, easy-to-use platform for storing, organizing, and retrieving information. This synergy between Dewy's streamlined data management and Vercel's dynamic UI rendering paves the way for developers to create more intelligent, responsive, and user-friendly applications. Also appears . here

How to Build a "RAG Tool" With Vercel's Generative UI Components

This is by (source: ). Kevin was previously the COO of Vercel. Twitter Thread Kevin Van Gundy @kevinvangundy 07-24-2023 https://twitter.com/kevinvangundy/status/1683560416902008832?s=46&embedable=true&thread=true

Kevin Van Gundy Announces He's Stepping Down as COO of Vercel

Why? Because… why not? (it’s , lol) FREE Utilize the power of my own PC to build web apps faster . (with zero build time cost) Kubernetes is hard & pushing developers to learn it even harder, well, I learned it so you don't have to. Unlike Vercel, with a cluster, I (and my teammates) can deploy ANY apps. Kubernetes Requirements A computer (obviously!) with Server OS Ubuntu Specification at least: 2 core, 4GB memory Recommendation: 4 core, 8GB memory
(because MicroK8S will take around 2,5GB of memory to run, but you will also need some for your applications) DigitalOcean has some droplets with good pricing tiers. to spin up a Kubernetes cluster MicroK8S Lastly, this magical open-source tool: Diginext Architecture In this case, I use my company’s PC (Ubuntu Server OS, 1TB SSD drive, 8 core, 32GB of memory) Install MicroK8S & deploy Diginext Server curl -sfL https://diginext.site/install/microk8s | sh - After it’s finished, you can try to access this URL: , if you can see the log in / sign-up screen, then your cluster is ready! http://server-ip-address *: * For example http://192.168.0.52 Create new account Navigate to: then create a new account. http://server-ip-address Create your first workspace Now you need a , grab one . Diginext key here (no worries, it’s free) Give your workspace a name and paste the key into it, then submit & you’re good to go. Connect Diginext CLI to your workspace To be able to deploy the web app to your MicroK8S cluster from your computer, you will need to install Diginext and connect it to your Diginext workspace. CLI Open the terminal and install with: Diginext CLI (If you don’t have Node.js 18+ installed, get it first) npm i @topgroup/diginext --location=global After it’s finished, you can use commands. dx But first, let’s connect your to the workspace: Diginext CLI dx login http://your-ip-address
# the browser will open up, copy & paste the access token here
# you will see a success message Deploy a static webapp needs permissions to pull the git repository and start building, so let’s navigate to and connect your Bitbucket or GitHub account. Diginext Server http:// server -ip-address/git also needs a to store the build image, I will use in this example. Navigate to and connect your Docker Hub with username & password. Diginext Server container registry Docker Hub http://your-ip-address/infrastructure/registry/ When it’s done, back to your Terminal and create a new app with command & fill in the form: dx new Project: Hello World App: Static Site Framework: pick “Static Site Framework” Git provider: select the one you have connected to recently. Navigate to the directory: and you will see the source code of the framework, nothing special here, just static files and a cd ./app-directory HTML Dockerfile Deploy to our MicroK8S cluster using this command: It will request the Diginext Server to pull the git repository of the webapp, then build the container image from the , and deploy it the MicroK8S cluster. dx deploy Dockerfile Cluster: pick “Default Cluster” Use generated domain: YES Port: 80 Now check out the link in the Terminal to see the build & deploy process, something like this: When it’s finished, click on the auto-generated link, and you will see your web app now going live, woohoo! 👉 Since I have only set up this server for internal use, if you want to publish it on the internet, you may need to expose some ports on your internet router and configure traffic routing / security guards to your metal server. However, this is beyond the scope of this article. Also published here.

Turning the Company’s PC Into a Personal “Vercel-Like” Platform

Hey there, fellow developers! Today, I want to walk you through the process of . This open-source software development kit is designed to (like ) with React and Svelte. getting started with the amazing Vercel AI SDK simplify building AI applications AIModels.fyi So, let's dive in and start building some powerful AI apps! Step 1: Installation The first step is to install the Vercel AI SDK in your project. Open your terminal, and run the following command: npm install ai With just that one simple command, you'll have the SDK ready to go, and you can start leveraging its powerful features right away. Step 2: Choose Your Framework The Vercel AI SDK supports React/Next.js and Svelte/SvelteKit. Depending on your preferred framework, choose the one that suits your project best. If you haven't already set up your chosen framework, now is the perfect time to do so. Follow the framework's documentation, and create a new project or integrate the SDK into an existing project. Step 3: Integration With AI Models The Vercel AI SDK provides seamless integration with leading AI models such as OpenAI, LangChain, Anthropic, and Hugging Face. Let's take a look at how you can integrate these models into your application using the SDK. Example: OpenAI Integration To integrate OpenAI's GPT-3.5 Turbo model, follow these steps: Import the required modules from the Vercel AI SDK and OpenAI packages: import { OpenAIStream, StreamingTextResponse } from 'ai';
import { Configuration, OpenAIApi } from 'openai-edge'; Create an OpenAI API client using your OpenAI API key: const config = new Configuration({
  apiKey: process.env.OPENAI_API_KEY
});
const openai = new OpenAIApi(config); Set the runtime to 'edge' to make use of Vercel's edge infrastructure: export const runtime = 'edge'; Implement your API route or endpoint to handle requests, and utilize the OpenAI model: export async function POST(req: Request) {
  const { messages } = await req.json();

  const response = await openai.createChatCompletion({
    model: 'gpt-3.5-turbo',
    stream: true,
    messages
  });

  const stream = OpenAIStream(response);

  return new StreamingTextResponse(stream);
} That's it! You've successfully integrated OpenAI's GPT-3.5 Turbo model into your application using the Vercel AI SDK. Step 4: Building UI Components Now it's time to build your AI-powered UI components. The Vercel AI SDK provides powerful React and Svelte hooks that make it a breeze to fetch and render streaming text responses. Let's take a look at an example using React: Import the necessary hooks from the Vercel AI SDK: import { useChat } from 'ai/react'; Set up your component, and utilize the hook to handle user interactions: useChat export default function ChatComponent() {
  const { messages, input, handleInputChange, handleSubmit } = useChat();

  return (
    <div>
      {messages.map((message) => (
        <div key={message.id}>{message.role === 'user' ? 'User: ' : 'AI: '}{message.content}</div>
      ))}

      <form onSubmit={handleSubmit}>
        <

input
          value={input}
          placeholder="Say something..."
          onChange={handleInputChange}
        />
      </form>
    </div>
  );
} With just a few lines of code, you've created a chat component that utilizes the Vercel AI SDK's streaming capabilities. Step 5: Run and Test Now that you have integrated the Vercel AI SDK and built your UI components, it's time to run your application and test it out! Start your development server and navigate to your app in the browser. Interact with the AI-powered components and see the magic happen in real time. Congratulations! You've successfully started building powerful AI applications with the Vercel AI SDK. Remember to explore the SDK's documentation and examples for further inspiration and advanced usage. Happy coding, and have a fantastic time building AI-powered experiences! Subscribe or follow me on Twitter for more content like this!

Building Powerful AI Apps: How to Get Started With the Vercel AI SDK

Vercel’s making quite the push for serverless, lately. It announced a whole fleet of services at its virtual event, with the biggest bombshell being storage – Postgres, KV, and Blob – all “re-imagined from the perspective of a frontend developer”, and critically, all serverless. Vercel Ship Here’s the TL;DR of what that means: Vercel Postgres – A PostgreSQL database powered by , that’s easy to set up, easy to integrate with any Postgres client (automatically generates environment variables in the Vercel dashboard), that you can write SQL (as strings) for, and can make work with just HTTP. No TCP connections required, and it’s managed, scalable (even to zero when not used), and fault-tolerant to boot. Neon Vercel KV – a Redis compatible Key-Value store, powered by , available at Vercel Edge locations, and usable with any Redis client. Upstash Vercel Blob – An accessible, streamlined Amazon S3-compatible solution to upload, store, and serve binary files, powered by , but without the complexity of configuring buckets, permissions, or fiddling with SDKs. Has a REST API. Cloudflare R2 This wasn’t a complete shocker – Vercel has bet big on being strictly serverless, and storage (or, statefulness at any rate) solutions that work serverless/on the edge are still a bit of a wild west scenario. What Vercel is doing here is wrapping existing service providers (NeonDB, Upstash, and Cloudflare R2) with an easy to use API, offering a ‘best practices-as-a-service’ solution for frontend devs in terms of DX, like they did with NextJS for React. On one hand, I get it. I get the appeal of a no-ops, DX-enhanced workflow for frontend developers, and how it is beneficial to distill down the process of deploying a website/webapp (complete with storage and security) into a few clicks. On the other…these markups are rather bad, and the added DX is not all that much considering how easy all three of these services were to integrate to begin with. So what’s the alternative? Because AWS Amplify sure ain’t it. Let’s talk about it, taking a look at some alternatives, and maybe also about how you could make DX easier while doing it for free – or very close to it. The Tale of the Tape First of all, let’s look at how bad this premium you’re paying really is. Image Source: service-markup.vercel.app The problem is laid bare in numbers, but here are some key things you need to know. For Vercel Postgres, you’re charged by compute time, not requests made (like many other providers). They also charge for actual data transfer per month! (this would be SQL query data, so not an insane volume, but it’s there.) For Vercel KV, you’re again charged for actual data transfer, but mercifully not compute time. Vercel Blob pricing is currently in beta, but as it stands right now, you’ll be charged $0.15/GB for egress (after the 1 GB you get free), while R2 charges nothing. Also, the storage cost (per GB) is doubled on Vercel. I understand not wanting to set up all infrastructure including CDNs and CI/CD pipelines on your own… but all three of these services are SaaS providers that were designed to be easy enough to integrate on your own to begin with, whether you’re using Next.js/React or not. So why pay the premium? Let’s see how you could use these same services – serverless – and in a type-safe, DX enhanced flavor, using WunderGraph to implement them all with : No vendor lock-in No markup cost Type-safe, enhanced DX Easy local dev, with any framework of choice. WunderGraph – A Quick Primer is a free and open-source (Apache 2.0 license) full stack dev tool, allowing you to declaratively turn your data dependencies – microservices, databases, and 3rd party APIs – into a secure, unified, and extensible API exposed over . WunderGraph JSON-RPC But data isn’t the only kind of dependency your project will have to deal with, and that’s why WunderGraph can also integrate S3-compatible storage for file uploads, OIDC/non-OIDC compatible auth providers, and more. It then aggregates and abstracts all of this into a namespaced virtual graph – and then you can define operations on them using GraphQL or TypeScript, and access them from the frontend via typesafe data fetching hooks (if using a React-based framework) or just by calling the JSON-RPC endpoints. Finally, WunderGraph can be run as a standalone server, or together with your framework of choice ( ). WunderGraph’s primary server (the WunderNode) needs to be deployed to a platform that supports Dockerized images, like Fly.io, or just take their Next.js, Remix, Nuxt, SvelteKit, and more fully managed option – WunderGraph Cloud. Using WunderGraph as an Alternative to Vercel Storage Let’s use WunderGraph to craft our own alternative to Vercel Storage, using the exact same providers – Neon for PostgreSQL, Upstash for Redis, and Cloudflare R2 for blob storage. Prerequisites First of all, we’ll set up WunderGraph, using its Next.js quickstart template: npx create-wundergraph-app my-project -E nextjs Then, cd into (or whichever name you used), and: my-project npm i && npm start If you see open on your browser, with the results of a sample query, you’re all set! http://localhost:3000 1. Postgres with Neon First of all, set up a Neon database : to Neon, or sign up if you do not yet have an account. Sign in From the Console, create a project. Create a database, and use the seed SQL to populate it. Or, use the default neondb database (we’ll use the latter, specifically, its Customer table). As with any Postgres provider, you’ll need a TCP connection string, copy that out from the Connection Details widget (Direct Connection, but it’s advised to use Pooled Connections if accessing from on your Neon Dashboard. Neon provisions access via roles. Create one, and note down the password. Now, your connection string is going to look something like postgres://ROLE:[[email protected]](/cdn-cgi/l/email-protection)/neondb. 👉 If you’re using Wundergraph Cloud, follow this handy guide for an easier time integrating Neon with WunderGraph, auto generating roles with passwords. Now, we’ll have to add this as a dependency to our WunderGraph config (don’t forget the namespace!), and include it in the dependency array. apis ./.wundergraph/operations/wundergraph.config.ts const neondb = introspect.postgresql({
	apiNamespace: "neondb",
	databaseURL: "postgres://ROLE:PASSWORD@ep-dawn-rain-071323.REGION.aws.neon.tech/neondb"
})

configureWunderGraphApplication({
	apis: [neondb],
...
}) Now, when we save, WunderGraph’s server (WunderNode) will introspect this data source, and generate all data operations we can define on it, including all type definitions needed. To get the data we want, we’ll have to write a simple GraphQL operation for this. ./.wundergraph/operations/AllCustomers.graphql query AllCustomers {
	customers: neondb_findManycustomer{
		id
		first_name
		last_name
		email
		phone
		ip_address
		username
	}
} You’ll notice we have autocomplete for all fields here, now that WunderGraph has introspected it. Neat DX win! Once you hit save on this, WunderGraph will get to work once again, generating . typesafe data fetching hooks we can use on the frontend index.tsx import {
	useQuery,
	withWunderGraph,
} from  "../components/generated/nextjs";

const Home: NextPage = () => {
	// postgres from Neon
	const { data: customerData, isLoading } = useQuery({
		operationName: "AllCustomers",
});

return (
...
{!isLoading &&
<pre>
	{JSON.stringify(customerData, null, 2)}
</pre>
}
...
)

export default withWunderGraph(Home); Being lazy and just printing out the JSON response here, but you can visualize this data however you like. Put it into <Card>’s, if you want! But that’s not all. Vercel’s Postgres client has this nifty feature where it actually lets you write SQL queries as strings. import { sql } from "@vercel/postgres";
import { redirect } from "next/navigation";

async function create(formData: FormData) {
  "use server";
  const { rows } = await sql`  
		INSERT INTO products (name)  
		VALUES (${formData.get("name")})  
	`;
  redirect(`/product/${rows[0].slug}`);
} Want that same developer experience? Let’s make it happen! Neon supports making SQL queries on your database(s), and we can make use of it, just like Vercel. WunderGraph’s introspection on our database reveals that we can use the queryRawJSON query for this (and you can check out the generated virtual graph’s schema in the wundergraph.schema.graphql file). To do this, first, create a GraphQL operation to execute a raw SQL query. ./.wundergraph/operations/AllCustomersSQL.graphql query AllCustomers ($query: String!) {
	customers: neondb_queryRawJSON(query: $query)
} Dead simple – takes in a SQL string, spits out data as JSON. Of course, we can’t really trust this to run clientside, so take this to the server instead. Enter ! Using these, you can write custom TypeScript functions – async resolvers, essentially – to perform data operations. These run entirely on the server and are never exposed clientside, so your app stays safe. Plus, you can even use existing GraphQL operations within them – which is exactly what we’ll be doing. TypeScript operations What do these TypeScript operations look like? They’re just namespaced .ts files within the operations directory, same as GraphQL operations. Here, I’m creating a .ts file within a ‘neon’ directory, but naming is up to you. Just make sure you stick to it. ./.wundergraph/operations/neon/get.ts ](#./.wundergraph/operations/neon/get.ts) import { createOperation } from "../../generated/wundergraph.factory";

export default createOperation.query({
  handler: async ({ operations }) => {
    const customers = await operations.query({
      operationName: "AllCustomersSQL",
      input: {
        query: "SELECT * FROM CUSTOMER",
      },
    });
    return {
      customers: customers?.data?.customers,
    };
  },
}); Note that we’re referencing the file here. AllCustomersSQL.graphql 💡 If you don’t want to write GraphQL at all, you could just import and use any postgres client here, await a SQL operation (just as you would in API handlers or server functions), then return data as needed. And then, we can use it clientside via hooks, just like before, with GraphQL operations. index.tsx ...
const { data: customerData, isLoading: pgIsLoading } = useQuery({
	operationName: "neon/get",
});
... 2. Redis with Upstash Using Upstash with WunderGraph is more or less the same, except we’ll rely entirely on serverland TypeScript operations for it, using the @upstash/redis library. The setup is fairly simple – much like Redis itself. Sign in/Sign up using your Amazon, Github or Google accounts….or just a regular email/password combination. Then, create a database, type in a name for it, and select the region where your database will run. For best performance, choose the Region which your applications are closer to – though you can also go Global and choose a combination of primary writes + primary reads regions. Once you click on the Create button, your cluster should be up and running, and you can connect to your database with any Redis client. As mentioned before, for simplicity, we will use Upstash’s own library. @upstash/redis npm i @upstash/redis For reusability, let’s create and export a Redis client instance. ./lib/redis.ts ](#./lib/redis.ts) import { redis } from "../../../lib/redis";

import { createOperation } from "../../generated/wundergraph.factory";

export default createOperation.query({
  handler: async () => {
    const data = await redis.get("A_REDIS_KEY_HERE");
    return {
      data,
    };
  },
}); Use hooks to access that data clientside, as usual. ./pages/index.tsx ](#./pages/index.tsx) import {
	useQuery,
	withWunderGraph,
} from  "../components/generated/nextjs";

const Home: NextPage = () => {
// redis from Upstash
	const { data: redisData, isLoading } = useQuery({
		operationName: "redis/get",
});


return (
...
{!isLoading &&
<pre>
	{JSON.stringify(redisData, null, 2)}
</pre>

...
)
export default withWunderGraph(Home); 3. Blob Storage with Cloudflare R2 Finally, for binary storage, using WunderGraph you can upload files to any S3 compatible storage provider, e.g. AWS S3, Minio, DigitalOcean Spaces or – what we’re using here – . Cloudflare R2 First, sign in/sign up to Cloudflare, set up an R2 plan on your account, and create a bucket. Copy out your Access Key ID and your Secret, and then back in WunderGraph config, you’ll need to define a provider via config-as-code. ./.wundergraph//wundergraph.config.ts const cloudflareR2 = {
	name: "cloudflareR2",
	endpoint: "YOUR_CLOUDFLARE_USER_ID.r2.cloudflarestorage.com",
	accessKeyID: "YOUR_ACCESS_KEY_ID",
	secretAccessKey:
	"YOUR_SECRET_ACCESS_KEY",
	bucketLocation: "", // not all S3 providers require this
	bucketName: "YOUR_BUCKET_NAME",
	useSSL: true, // you'll always want SSL enabled for cloud storage
	uploadProfiles: {
	// profile for a user's 'avatar' picture
		avatar: {
			maxAllowedUploadSizeBytes: 1024 * 1024 * 10, // 10 MB, optional, defaults to 25 MB
			maxAllowedFiles: 1, // limit the number of files to 1, leave undefined for unlimited files
			allowedMimeTypes: ["image/png", "image/jpeg"], // wildcard is supported, e.g. 'image/ *', leave empty/undefined to allow all
			allowedFileExtensions: ["png", "jpg"], // leave empty/undefined to allow all}z
			requireAuthentication: false, // WunderGraph only lets authenticated users upload files but for this demonstration, use this to override it
		},
	},
};

configureWunderGraphApplication({
...
	s3UploadProvider: [cloudflareR2],
...
}) Creating S3 profiles for your uploads (like one specifically meant for uploading avatar images, here) is technically optional, but I’m including it here anyway as it’s very useful in defining rules (and limits) for what can and cannot be uploaded. On the client, we can use the hook to handle uploads to our defined provider. In the code below, we’re storing the list of attached files in , and on submit, we're creating a object with all the submitted, and uploading them to the S3 provider (and bucket) we’ve configured, with a given profile name of , making sure that specific profile gets used. useFileUpload files FormData files avatar ./pages/index.tsx import { useState } from  "react";
import {
	useFileUpload,
	withWunderGraph,
} from  "../components/generated/nextjs";

const Home: NextPage = () => {

// s3 compatible blob via cloudflare r2
	const [files, setFiles] = useState<FileList>(); // list of files that were attached
	const [uploadData, setUploadData] = useState<string[]>([]); // an array to keep track of uploaded file names
	const { upload } = useFileUpload(); // WunderGraph autogenerated hook for file uploads

// handle files being added via input on form
		const onFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
	if (e.target.files) setFiles(e.target.files);
};

// handle form submission
const onSubmit = async (e: React.FormEvent<Element>) => {
	e.preventDefault();
	// if no files were attached.
	if (!files) {
		alert("No files!");
		return;
	}
	// otherwise, handle upload
	try {
		const result = await upload({
			provider: "cloudflareR2", // specify name of S3 provider
			profile: "avatar", // specify which S3 profile we want
			files, // files attached
		});
		result && setUploadData(result); // set data with array of uploaded filenames if successful
	} catch (e) {
// if unsuccessful, show error messages
	const msg = e instanceof  Error ? e.message : "Upload failed!";
	alert(msg);
	console.error("Couldn't upload files : ", msg);
	}
};

return (
...
<form
		onSubmit={onSubmit}
		>
		<input

		id="multiple_files"
		type="file"
		multiple
		onChange={onFileChange}
		/>
		<button
		name="avatar"

		type="submit"
		>
		Upload
		</button>
		</form>
<span> Files uploaded : </span>
		<pre>{JSON.stringify(uploadData, null, 2)}</pre>
...
)

export  default withWunderGraph(Home); And that’s all, folks! Conclusion The thing nobody warns you about modern web development? You have to wear many, many hats. Project management, UI/UX design, frontend + backend logic, infra, testing, security, and, yes, setting up and managing persistent storage. For anyone but enterprise developers, wearing all these hats and trying to make a living off of your projects is going to be difficult to balance. DX that streamlines fullstack development like Vercel’s offerings is a godsend, and I’m glad it exists – I just wish it didn’t have to come at such a premium. Will they revise this pricing soon? That seems to be the industry sentiment. But in the meantime, if you can get great devex with WunderGraph as an API Gateway/BFF server, that: Integrates these services for you in a painless, declarative, typesafe manner with auto-generated hooks to query/mutate data from the frontend, Provides all the DX wins while dealing with base Neon/Upstash/Cloudflare R2 pricing with no markup, Is compatible with more than just Next.js/React, And all using open-source technology, with no vendor lock-in, So why pay the Vercel tax? How to get started with WunderGraph Getting started with WunderGraph is easy and free since it is available as an open-source tool under the Apache 2.0 license. To begin your WunderGraph journey today, simply follow our 1-minute quick start guide # Init a new project
npx create-wundergraph-app my-project --example simple

# Move to the project directory
cd my-project

# Install dependencies
npm i Additionally, you can join our where you can interact with fellow users and ask any questions you may have. Discord community If you're interested in browsing the code, feel free to check out our . Don't forget to leave a star ⭐ to show your support! GitHub repository Also published . here

How to Bypass the Vercel Tax by Using Open-source Alternatives

When I started my career as a developer, my continuous integration workflow looked like this: Open FTP client Connect to the server Drag index.php from left to right Close FTP client My internet connection was slow, but it only took a few seconds to "deploy" my PHP application. I was new to programming, but I was able to get my code into "production" in just a few seconds. It was a great feeling to see my first website live on the internet. I have to admit, testing wasn't really automated, but my human CD pipeline was fast and reliable. If you think about it, this was actually "Serverless". I didn't have to worry about servers. I just had to upload my code to the "webspace" and it was live. Next, I wanted to add a database to my application. Here's the simplest code example I can find today: <?php$servername = "localhost";$username = "username";$password = "password";$dbname = "myDB";

// Create connection$conn = new mysqli($servername, $username, $password, $dbname);
// Check connectionif ($conn->connect_error) {  die("Connection failed: " . $conn->connect_error);}

$sql = "SELECT id, firstname, lastname FROM MyGuests";$result = $conn->query($sql);

if ($result->num_rows > 0) {  // output data of each row  while($row = $result->fetch_assoc()) 
{    echo "id: " . $row["id"]. " - Name: " . $row["firstname"]. " " . $row["lastname"]. "<br>";  }} else {  echo "0 results";}$conn->close();?> I f you copy this file to the web server, you have a fully functional application that can read and write data from a database. It's incredible how simple this concept was. A complete application in just one file. The "application" starts when the user opens the URL in the browser, and it ends when we're done sending the response to the user. That's as "Serverless" as it gets. Nowadays, we've gone absolutely crazy. We have AWS, Kubernetes, CDK, Terraform, Docker, Serverless, GraphQL, gRPC, REST, and so much more. You need many years of experience to be able to set up a project with this "modern stack". It's pure madness. You need Webpack or another tool to bundle your code, minify and optimize it. Build and publish Docker images, or upload zip files to AWS Lambda. And then there's yaml all over the place to configure your infrastructure. Architects proudly show off their "serverless" architecture diagrams on conferences with hundreds of components. I think to myself: "Why is this so complicated?" Why are there so many moving parts? There are specialised AWS consultants who earn a lot of money because nobody understands Cloud anymore. Our goal is to change this. We want to make using the cloud as easy as it was in the old days. But first, let's take a step back and look at the problem from a different angle. [ The rise of NextJS and Vercel From the early days on, I really enjoyed working with ReactJS. But for the first few years, there was a huge problem. I was constantly on the lookout for the perfect "boilerplate". Getting ReactJS right wasn't easy, especially if you want to have server-side rendering, hot reloading, and all the other features that make for a great developer experience. Then, in 2016, a new project called NextJS was released. It took NextJS a while to win the hearts of the community, but today it's the most popular ReactJS framework. With NextJS, I was able to stop my search for the perfect boilerplate. The framework might not be perfect in every way, but it's good enough for most projects. I can focus on the actual application instead of spending hours on figuring out how to do X. That said, NextJS wasn't alone. Along with NextJS came Zeit, a company that was founded by Guillermo Rauch, later renamed to Vercel. In Germany, we like to say "Es wird höchste Zeit" which means "It's about time". Vercel was the first company to understand that it's about "Zeit" to make deploying frontend applications easy. Vercel developed a simple but powerful playbook: Create an opinionated open source framework to consolidate the work of the community Add features that focus on developer experience, productivity and ergonomics Build a hosting platform that deploys your code on git push Abstract away the complexity of the underlying infrastructure so developers can focus on their code With this playbook, we're almost back to the simplicity of the PHP example above. Unsurprisingly, NextJS adds more complexity than a single PHP file, but we get a lot of value in return. Most importantly, we're back to the simplicity in terms of DevOps. Instead of dragging files from left to right, we just push our code to a git repository. The rest is handled by the hosting platform for us, and we're not just talking about a simple hosted NodeJS server. Vercel creates Serverless functions for server-side rendering, provides a CDN for static assets, runs middleware on the edge, integrates with GitHub, and builds previews on every git push. Now that we have NextJS and Vercel, we can say that "Frontend" is a solved problem. But what about the backend? Finding the right platform for the backend is hard When you ask developers where to host their backend, you'll get a lot of different answers. What all of them have in common is that they require a lot of DevOps and infrastructure knowledge. They offer you Redis and Postgres, they talk about Docker and containers. They have endless documentation and tutorials on how to set up the database and so on. Compare this to the simplicity of NextJS and Vercel. Backend seems to be years behind frontend in terms of simplicity and developer experience. That's why we decided to build WunderGraph the way we did. We want to create a "pure" backend framework that is as simple as NextJS, combined with a hosting platform that abstracts away the complexity of the underlying infrastructure. WunderGraph, an opinionated approach to backend development Similarly to NextJS, WunderGraph needs to be opinionated to create a great developer experience. Here's an overview of the most important decisions we made: The primary programming language is TypeScript WunderGraph supports multiple API styles server-side GraphQL as an integration layer JSON-RPC to expose internal APIs REST to expose external APIs Event-driven APIs for asynchronous workflows Configuration through code Touching infrastructure is optional Type-safety whenever possible TypeScript TypeScript is a perfect balance between adoption, language features, and performance. It's not ideal in every way, but perfect for configuration as code and implementing middleware and APIs. Multi API style No one API style is perfect for every use case. For us, GraphQL is the perfect language to integrate and combine multiple APIs. However, we're not directly exposing GraphQL, but only using it as a server-side integration layer. WunderGraph exposes internal APIs via JSON-RPC, while using REST when we'd like to expose APIs to third parties. For internal workflows and complex use cases, we're also offering event-driven APIs with asynchronous event handlers. Instead of forcing our users into a single API style, we're offering different options to choose from. Configuration through code Middleware, API, and event handlers are implemented in TypeScript, and we're using the same language for configuration as well. It's a single codebase for everything, not a single YAML or JSON file is needed. Touching infrastructure is optional It's possible to go from zero to production without touching any infrastructure, but we don't want to magically hide the underlying infrastructure from the user. You can always plug in your own infrastructure, like a Postgres database or Redis cache, but you don't have to. Type-safety whenever possible We want to avoid runtime errors as much as possible. The type system of TypeScript helps us a lot to achieve this goal. Sometimes, it might be favourable to have a bit more flexibility, but we're trying to avoid this as much as possible. Infraless backend development What are the most critical building blocks of a backend (in no particular order)? authentication & authorization database key-value store caching file storage cron jobs long-running operations job queues and async workflows logging monitoring automated deployments We're not reinventing the wheel here. We're using existing open source projects to implement the interfaces and offer them as one unified set of lego blocks. Let's dive into the details. Authentication & Authorization It's a problem that is already solved by WunderGraph. For authentication, we rely on OpenID Connect. For authorization, we offer rbac and abac as well as injecting claims into API Operations, allowing for a lot of flexibility. Database We're using Prisma as our database abstraction layer. Prisma not only allows us to offer simple migrations, but also to introspect the database schema and generate TypeScript types for it. Key-value store A typical key-value interface might look like this: const client = new Client()await client.set('foo', 'bar')const value = await client.get('foo') The problem with this interface is that it violates one of our principles: type-safety. A more type-safe approach might look like this: // define key-value store with zod schemaconst store = new Store('fooStore', {    foo: z.string(),})await store.set('foo', 'bar')const value = await store.get('foo')console.log(value.foo) // bar This store is now fully type-safe. By giving it a name, we're able to evolve the schema over time. As long as we're not introducing breaking changes, the schema can be evolved. Caching Caching is a very important part of a backend. We'd like to offer multiple caching strategies, HTTP-layer caching (already implemented), and application-layer caching in the form of a key-value store with TTLs and eviction policies. We'll probably use one of the existing well-known solutions to implement this. File storage File storage is already implemented in WunderGraph. WunderGraph is compatible with any S3-compatible storage. Cron jobs It's very common to have cron jobs in a backend that should run at a specific time or interval. If you do some research on how to run cron jobs with AWS Lambda, here's what you'll find: You need to create a CloudWatch Event Rule You need to create a Lambda function You need to create a CloudWatch Event Target You need to create a CloudWatch Event Permission You need to create a CloudWatch Event Rule Input You need to create a CloudWatch Event Rule Input Target You need to create a CloudWatch Event Rule Input Target Permission That's a lot of steps to run a simple cron job. What if we could just write this: const cron = new Cron('myCronJob', {    schedule: '0 0 * * *',   
handler: async () => {        // do something    },}) Git push this code to WunderGraph cloud and you're done. Even if we were using CDK, this would still be a lot of boilerplate code. Long-running operations There are many use cases where you'd like to implement workflows that run for a long time. Temporal (formerly Cadence) is a great source of inspiration for this, as well as AWS Step Functions. Here's an example that made me fall in love with Temporal: func RemindUserWorkflow(ctx workflow.Context, userID string, intervals []int) error {   // Send reminder emails, e.g. after 1, 7, and 30 days   
for _, interval := range intervals {      _ = workflow.Sleep(ctx, days(interval)) // Sleep for days!      _ = workflow.ExecuteActivity(ctx, SendEmail, userID).Get(ctx, nil)      // Activities have timeouts, and will be retried by default!   }} The idea that you can write synchronous code which can sleep for days is amazing. However, this love quickly turned into confusion when digging into their documentation. I have to understand too many new concepts to get started with Temporal, like activities, workflows, signals, queries, etc. The same applies to AWS Step Functions. They don't feel intuitive to me. Configuring state machines via JSON is not how I envision writing workflows. I'd like to offer a similar experience to our users, but without this steep learning curve. Here's an example of how a workflow to onboard users could be implemented: const workflow = new Workflow<{ userID: string }>('onboarding workflow', {    states: {        welcome: {            handler: async (ctx: Context) => {                console.log("send welcome email");                
const ok = await ctx.internalClient.sendEmail('userID', 'welcome');                if (ok) {                    ctx.next('sendReminder');                }            }        },        sendReminder: {            waitBeforeExecution: '5 days',            handler: async (ctx: Context) => {                const loggedIn = await ctx.internalClient.queries.userLoggedIn('userID');                if (!loggedIn) {                    console.log("send reminder email");                    ctx.internalClient.sendEmail('userID', 'reminder');                }                ctx.done();            }        }    }});
const id = await workflow.start({userID: '1234'}); // id: 1const state = await workflow.getState(id); // state: 'welcome'// after one dayconst state2 = await workflow.getState(id); // state: sendReminder (4 days remaining)// after 5 daysconst state3 = await workflow.getState(id); // state: 'sendReminder'// after 5 days and 1 secondconst state4 = await workflow.getState(id); // state: 'finished' What's the beauty of this approach? Other solutions to this problem already exist. WunderGraph Workflows will be, like everything else, type-safe and easy to use. But most importantly, they are fully integrated into the rest of your application. Start workflows from an API Operation, trigger them from a cron job, or run them in the background. You can get the state of a workflow from anywhere in your application, like an API handler. Finally, you're able to run workflows locally and debug them just by running . Deploy your WunderGraph application to WunderGraph cloud and the state of your workflows will automatically be persisted. wunderctl up Final note: Workflows will be Serverless, meaning that they will sleep when they're not running. When a workflow sleeps, it really does. Therefore, you don't have to pay for a workflow that's not running. Job queues and async workflows Another common use case is to run jobs asynchronously. For this to work, you usually need a job queue and a worker that processes the jobs. This is a very common pattern, but it's not very easy to implement. You have to configure a queue, a worker, and a way to communicate between them. As the queue, you can use AWS SQS, RabbitMQ, Nats, or similar solutions. Then you have to configure workers to process jobs, report state, handle errors, etc. Finally, you need to implement the logic to enqueue jobs and handle the responses. But isn't this just a workflow with a different name? Yes, it is. Workflows will automatically be backed by a job queue. The communication is already handled by the workflow engine. All you have to do is to define a handler, possible states, and the transitions between them. Workflows don't have to have multiple states, they can also be just a single handler that runs asynchronously. All the steps to implement a job queue and a worker are already handled by WunderGraph. We're trying to abstract away the complexity to the minimum. Insights: Logging, Monitoring, Metrics, Alerting and Tracing Another important aspect of developing APIs and services is to have insights into what's going on. This includes logging, monitoring, metrics, alerting, and tracing. WunderGraph will offer a unified way to collect and analyze all of these insights. In addition to that, we'll offer you ways of integrating with your existing tools. Automated Deployments / CI-CD A critical part of achieving a great developer experience is to not have to worry about deployments. One of our users reported that they were able to build a POC with WunderGraph within one hour, but then it took them multiple days to figure out how to properly deploy it to AWS, including health checks, DNS configuration, autoscaling, and so on. We believe that this should be abstracted away, just like Vercel does it. You should be able to push your code to a git repository and have it deployed automatically. No additional configuration should be required. Good defaults should be used, but you can always override them if you want to. We've invested heavily to build the perfect CI-CD pipeline for WunderGraph. It's based on top of Firecracker and is able to build and deploy WunderGraph applications in less than a minute. We'll talk about this topic in depth in a future post. Summary In this post, we demonstrated how an opinionated approach can radically simplify the existing workflow of building software. You don't have to understand the entire AWS ecosystem to build rich backend applications. It's clear that we're making trade-offs here, but we believe that the benefits outweigh the downsides. As I said earlier in the post, it's about "Zeit" (time) to simplify cloud-native software development. Serverless was a great start, but I think that we should go one layer above, abstracting away infrastructure completely. Back to the old days of PHP, but with a modern twist. We'd love to hear your thoughts on this topic. How do you think about abstracting away infrastructure as proposed in this post? Do you want to control every aspect of your infrastructure, or do you prefer to have a more opinionated approach? Additionally, we'd love to invite you to the WunderGraph community. Please share your opinion on our , and join the early access program if you're interested in trying out WunderGraph Cloud as soon as it's available. WunderGraph Cloud Early Access Discord server Are you ready for the next generation of Serverless Infraless API Development? Join the waitlist for WunderGraph Cloud Early Access and be the first to try it out. Also Published Here

Dev without Ops - Why we are building The Vercel for Backend

In this tutorial, you’ll learn how to add SuperTokens authentication to your React and NodeJS application and deploy it on Vercel. Getting started To get started with SuperTokens, please visit the and pick the login method you want for your application. After choosing a guide, follow the quick setup section or one of the sections for integrating with a framework that you have chosen. Recipe Guides page We also have a blog post on how to integrate , if that is what you are looking for. email password + social login with express and react Restructuring your application for Vercel deployment Once you have done the basic implementation on your local system, we want to do the following to convert your application so that it can be deployed on Vercel: Create an folder. This folder will contain the API logic that we can deploy on Vercel. We will be exposing the API's entry point via an file in this folder. api index.js Open the and export at the end of the file as shown below index.js app module.exports = app; Note: We are deploying our backend as a standalone express app, and not with serverless functions that Vercel provides. If you want to deploy using , then you can check out our nextJS framework integration guide that's within the recipe guide. /pages/api /pages/api Change the appInfo config to get Vercel deployments to work To enable your project to run on production and the inspect sites for Vercel, you need to make the and point to the URLs generated by Vercel. The production URL is always the same for an app, but the inspect URL keeps changing. To allow it to work in this dynamic condition, we must set the values of and dynamically. websiteDomain appDomain apiDomain websiteDomain On the backend appInfo = {
    appName: "My App",
    apiDomain: process.env.VERCEL_URL,
    websiteDomain: process.env.VERCEL_URL,
    apiBasePath: "/api/auth",
    websiteBasePath: "/auth",
}, Vercel provides an env var - - to the backend which is equal to the inspect URL / production URL (depending on the site that’s loaded). So we use this to set the and values dynamically. process.env.VERCEL_URL apiDomain websiteDomain On the frontend We can use it to get the currently loaded URL and set those to the and . This way, even if the inspect URL keeps on changing, it will still point to the current domain. window.location.origin apiDomain websiteDomain appInfo = {
    appName: "TodoApp",
    apiDomain: window.location.origin,
    websiteDomain: window.location.origin,
    apiBasePath: "/api/auth",
    websiteBasePath: "/auth",      
}, This only works if the frontend and backend of your application have the same domain. If your backend is hosted elsewhere and you use Vercel only for the frontend, be sure to change the on the frontend and backend to point to your backend server. In this case however, your app may not function properly for inspect deployments since your backend server has no way of knowing what the inspect URL of the frontend site would be on each deployment. apiDomain Update the CORS Middleware You also need to update the CORS middleware origin with the environment variable. VERCEL_URL app.use(
    cors({
        origin: process.env.VERCEL_URL,
        allowedHeaders: ['content-type', ...SuperTokens.getAllCORSHeaders()],credentials: true,
    })
); Configure Vercel and Deploy With the backend and frontend of your application code updated, create a file in the root directory of your application which will instruct Vercel to push all traffic on path to our express backend server: vercel.json /api/* {
    "rewrites": [{ "source": "/api/(.*)", "destination": "/api" }]
} Finally, to deploy the app to Vercel, you need to run the Vercel command on the root of your project: vercel Once deployed, you should be able to test the login functionality on the inspect URL and the production URL. Demo app We also have that has Email Password login with express and React, and is configured to work with Vercel. You can even see its . a demo app on our GitHub live preview Written by the Folks at — hope you enjoyed! We are always available on our server. Join us if you have any questions or need any help. SuperTokens Discord

Deploying SuperTokens with React and NodeJS on Vercel

When it came time to deploy the application I tried AWS, but honestly I was kind of bummed out with the amount of information and services they provide, and I really wanted to see my application out there in the wild. So I came across Vercel. On top of that, I’ve been learning about Docker and wanted to put into practice what I’ve learnt so far, this was the right opportunity. Vercel is well known for their zero config deployment. With just a couple clicks you can have your application deployed. You can also connect your repository and Vercel will instantly build and deploy your project after every commit. It couldn’t get any more convenient than that 😀 . Another reason I’ve chosen Vercel over AWS was their ‘serverless’ function, which I’ve used to render the documentos from my database through an Express API. To be honest, I can’t complain about their service. I’ve never had any issues with my project whatsoever. The thing here is that I wanted to learn more about the backend of my application and I figured that understanding the deployment of it could help me with that. I’ve seen a lot of people choosing AWS over Vercel because of their pricing plan. It doesn’t apply to my case as my application does not have that much traffic and I’m mainly using it for studying purposes. But it is good to mention that Vercel has an “issue” with escalation when it comes to pricing. The Toronto Food Basket application can be splitted in three different parts: Webscraper for gathering information from a local grocery store


Express API that organizes the information and can perform mathematical operations to do so.


React app that renders the application and all the needed information. For now I’m only deploying the Webscraper to AWS as I still need to learn more about servers and routes to deploy the Express API and the React app. To start with I launched an AWS EC2 instance and set a budget alarm so any time the spending on my instance goes over $0.01 I get a notification - learnt that the hard way after being billed for a DocumentDB instance I had running in my account since December/2023 and had no idea 😂. Amazon provides free tiers with 750 hours of t2.micro (or t3.micro in the Regions in which t2.micro is unavailable), 30Gib of EBS storage, 2 million IOs, 1 GB of snapshots and 100 GB of bandwidth to the internet. While learning how to deploy my dockerized application on AWS I realized that there are at least two different approaches - there might be more: build the docker container locally and send only the container over to AWS.


send everything to AWS and build my container remotely. I’ve chosen the second approach because I wanted to have the experience of working completely remote on my application if I had to. I’m not always on my own computer and having my application on an EC2 instance would be really handy in those situations. Also, I would be forced to work with Vim, which is something that I’ve been wanting to do. Before sending over the files to my EC2 instance I prepared my remote environment by installing Node.js and Docker. In order to send the files over to my EC2 instance I used the Secure Copy Protocol (scp). The command looked something like this: scp -i ubuntu.pem -r LOCAL_DIRECTORY ubuntu@35.183.21.127:/home/ubuntu/downloads/webscraperdockeraws -i ubuntu.pem: This flag specifies the identity file (private key) to use for public key authentication. In this case, ubuntu.pem is the private key file used to authenticate to the remote server.
-r: This flag indicates that the operation should be recursive, meaning it will copy directories and their contents recursively.
ubuntu@35.183.21.127:/home/ubuntu/downloads/webscraperdockeraws: This is the destination specification. It includes the username (ubuntu) and the IP address (35.183.21.127) of the remote server, followed by the directory path (/home/ubuntu/downloads) where the files will be copied to. Once all files were transferred to my EC2 instance I was able to then build my docker container. And here the bugs started - yay! The most important library of my Webscraper is Puppeteer, which provides a high-level API to control Chrome/Chromium over the DevTools Protocol. Puppeteer runs in a headless mode, making its execution faster. But when trying to dockerize my application I came across some issues: By default, when Puppeteer is installed it downloads the Chrome for Testing and a chrome-headless-shell binary. The browser is downloaded to the $HOME/.cache/puppeteer folder. The problem is that AWS does not include include a $HOME/.cache into its Ubuntu instance. I found out this issue after some research, and to solve all I had to do was move the /.cache folder to the root directory - this issue is well documented on Puppeteers’s npm portal. One obvious thing I haven’t realized was that up until now I was running my application in OS like Windows and MacOs.. But now I was dealing with Ubuntu. And because it was an empty instance it didn't any package/app pre-installed, this is why I installed node and docker as soon as I ran the instance for the first time. But I was forgetting a really important application for my Webscraper to work: Google Chrome. Remember what I said about Puppeteer before? Well, I needed to make sure I had the right version of Chromium on my instance . Every major version of Node.js is built over a version of Debian, and that Debian version comes with an old version of Chromium, which sometimes is not compatible with the latest version of Puppeteer. After some research I found out I had to include an instruction in my Dockerfile so the right version of Chromium could be downloaded before Docker installs all the dependencies of my app and runs it. My Docker file looked something like this: After fixing the previous issue another one came up. Now the error message states: “No usable sandbox”. To fix it all I had to do was change my code and include a –no-sandbox argument on puppeteer.launch() function for every single one of my grocery products. Done. Now my Webscraper runs in a container on my AWS EC2 instance. It wont scrape all 65 products though.. After the fifth product the app crashes. I believe it has something to do with the available resources I have on this instance - I was facing the same problem when running the scraper with github actions. Anyway, my goal was to launch an AWS EC2 instance and have my application running remotely, and I did. Lots to come! When it came time to deploy the application I tried AWS, but honestly I was kind of bummed out with the amount of information and services they provide, and I really wanted to see my application out there in the wild. So I came across Vercel. On top of that, I’ve been learning about Docker and wanted to put into practice what I’ve learnt so far, this was the right opportunity. Vercel is well known for their zero config deployment. With just a couple clicks you can have your application deployed. You can also connect your repository and Vercel will instantly build and deploy your project after every commit. It couldn’t get any more convenient than that 😀 . Another reason I’ve chosen Vercel over AWS was their ‘serverless’ function, which I’ve used to render the documentos from my database through an Express API. To be honest, I can’t complain about their service. I’ve never had any issues with my project whatsoever. The thing here is that I wanted to learn more about the backend of my application and I figured that understanding the deployment of it could help me with that. I’ve seen a lot of people choosing AWS over Vercel because of their pricing plan. It doesn’t apply to my case as my application does not have that much traffic and I’m mainly using it for studying purposes. But it is good to mention that Vercel has an “issue” with escalation when it comes to pricing. The Toronto Food Basket application can be splitted in three different parts: Webscraper for gathering information from a local grocery store Express API that organizes the information and can perform mathematical operations to do so. React app that renders the application and all the needed information. Webscraper for gathering information from a local grocery store Webscraper for gathering information from a local grocery store Express API that organizes the information and can perform mathematical operations to do so. Express API that organizes the information and can perform mathematical operations to do so. React app that renders the application and all the needed information. React app that renders the application and all the needed information. For now I’m only deploying the Webscraper to AWS as I still need to learn more about servers and routes to deploy the Express API and the React app. To start with I launched an AWS EC2 instance and set a budget alarm so any time the spending on my instance goes over $0.01 I get a notification - learnt that the hard way after being billed for a DocumentDB instance I had running in my account since December/2023 and had no idea 😂. Amazon provides free tiers with 750 hours of t2.micro (or t3.micro in the Regions in which t2.micro is unavailable), 30Gib of EBS storage, 2 million IOs, 1 GB of snapshots and 100 GB of bandwidth to the internet. While learning how to deploy my dockerized application on AWS I realized that there are at least two different approaches - there might be more: build the docker container locally and send only the container over to AWS. send everything to AWS and build my container remotely. build the docker container locally and send only the container over to AWS. build the docker container locally and send only the container over to AWS. send everything to AWS and build my container remotely. send everything to AWS and build my container remotely. I’ve chosen the second approach because I wanted to have the experience of working completely remote on my application if I had to. I’m not always on my own computer and having my application on an EC2 instance would be really handy in those situations. Also, I would be forced to work with Vim, which is something that I’ve been wanting to do. Before sending over the files to my EC2 instance I prepared my remote environment by installing Node.js and Docker. In order to send the files over to my EC2 instance I used the Secure Copy Protocol (scp). The command looked something like this: scp -i ubuntu.pem -r LOCAL_DIRECTORY ubuntu@35.183.21.127:/home/ubuntu/downloads/webscraperdockeraws scp -i ubuntu.pem -r LOCAL_DIRECTORY ubuntu@35.183.21.127:/home/ubuntu/downloads/webscraperdockeraws -i ubuntu.pem: This flag specifies the identity file (private key) to use for public key authentication. In this case, ubuntu.pem is the private key file used to authenticate to the remote server. -r: This flag indicates that the operation should be recursive, meaning it will copy directories and their contents recursively. ubuntu@35.183.21.127:/home/ubuntu/downloads/webscraperdockeraws: This is the destination specification. It includes the username (ubuntu) and the IP address (35.183.21.127) of the remote server, followed by the directory path (/home/ubuntu/downloads) where the files will be copied to. -i ubuntu.pem : This flag specifies the identity file (private key) to use for public key authentication. In this case, ubuntu.pem is the private key file used to authenticate to the remote server. -i ubuntu.pem ubuntu.pem -r : This flag indicates that the operation should be recursive, meaning it will copy directories and their contents recursively. -r ubuntu@35.183.21.127:/home/ubuntu/downloads/webscraperdockeraws : This is the destination specification. It includes the username ( ubuntu ) and the IP address ( 35.183.21.127 ) of the remote server, followed by the directory path ( /home/ubuntu/downloads ) where the files will be copied to. ubuntu@35.183.21.127:/home/ubuntu/downloads/webscraperdockeraws ubuntu 35.183.21.127 /home/ubuntu/downloads Once all files were transferred to my EC2 instance I was able to then build my docker container. And here the bugs started - yay! The most important library of my Webscraper is Puppeteer, which provides a high-level API to control Chrome/Chromium over the DevTools Protocol. Puppeteer runs in a headless mode, making its execution faster. But when trying to dockerize my application I came across some issues: By default, when Puppeteer is installed it downloads the Chrome for Testing and a chrome-headless-shell binary. The browser is downloaded to the $HOME/.cache/puppeteer folder. The problem is that AWS does not include include a $HOME/.cache into its Ubuntu instance. I found out this issue after some research, and to solve all I had to do was move the /.cache folder to the root directory - this issue is well documented on Puppeteers’s npm portal. By default, when Puppeteer is installed it downloads the Chrome for Testing and a chrome-headless-shell binary. The browser is downloaded to the $HOME/.cache/puppeteer folder. The problem is that AWS does not include include a $HOME/.cache into its Ubuntu instance. I found out this issue after some research, and to solve all I had to do was move the /.cache folder to the root directory - this issue is well documented on Puppeteers’s npm portal. By default, when Puppeteer is installed it downloads the Chrome for Testing and a chrome-headless-shell binary. The browser is downloaded to the $HOME/.cache/puppeteer folder. The problem is that AWS does not include include a $HOME/.cache into its Ubuntu instance. I found out this issue after some research, and to solve all I had to do was move the /.cache folder to the root directory - this issue is well documented on Puppeteers’s npm portal. One obvious thing I haven’t realized was that up until now I was running my application in OS like Windows and MacOs.. But now I was dealing with Ubuntu. And because it was an empty instance it didn't any package/app pre-installed, this is why I installed node and docker as soon as I ran the instance for the first time. But I was forgetting a really important application for my Webscraper to work: Google Chrome. Remember what I said about Puppeteer before? Well, I needed to make sure I had the right version of Chromium on my instance . Every major version of Node.js is built over a version of Debian, and that Debian version comes with an old version of Chromium, which sometimes is not compatible with the latest version of Puppeteer. After some research I found out I had to include an instruction in my Dockerfile so the right version of Chromium could be downloaded before Docker installs all the dependencies of my app and runs it. My Docker file looked something like this: One obvious thing I haven’t realized was that up until now I was running my application in OS like Windows and MacOs.. But now I was dealing with Ubuntu. And because it was an empty instance it didn't any package/app pre-installed, this is why I installed node and docker as soon as I ran the instance for the first time. But I was forgetting a really important application for my Webscraper to work: Google Chrome. Remember what I said about Puppeteer before? Well, I needed to make sure I had the right version of Chromium on my instance . Every major version of Node.js is built over a version of Debian, and that Debian version comes with an old version of Chromium, which sometimes is not compatible with the latest version of Puppeteer. After some research I found out I had to include an instruction in my Dockerfile so the right version of Chromium could be downloaded before Docker installs all the dependencies of my app and runs it. My Docker file looked something like this: One obvious thing I haven’t realized was that up until now I was running my application in OS like Windows and MacOs.. But now I was dealing with Ubuntu. And because it was an empty instance it didn't any package/app pre-installed, this is why I installed node and docker as soon as I ran the instance for the first time. But I was forgetting a really important application for my Webscraper to work: Google Chrome. Remember what I said about Puppeteer before? Well, I needed to make sure I had the right version of Chromium on my instance . Every major version of Node.js is built over a version of Debian, and that Debian version comes with an old version of Chromium, which sometimes is not compatible with the latest version of Puppeteer. After some research I found out I had to include an instruction in my Dockerfile so the right version of Chromium could be downloaded before Docker installs all the dependencies of my app and runs it. My Docker file looked something like this: After fixing the previous issue another one came up. Now the error message states: “No usable sandbox”. To fix it all I had to do was change my code and include a –no-sandbox argument on puppeteer.launch() function for every single one of my grocery products. After fixing the previous issue another one came up. Now the error message states: “No usable sandbox”. To fix it all I had to do was change my code and include a –no-sandbox argument on puppeteer.launch() function for every single one of my grocery products. After fixing the previous issue another one came up. Now the error message states: “No usable sandbox”. To fix it all I had to do was change my code and include a –no-sandbox argument on puppeteer.launch() function for every single one of my grocery products. Done. Now my Webscraper runs in a container on my AWS EC2 instance. It wont scrape all 65 products though.. After the fifth product the app crashes. I believe it has something to do with the available resources I have on this instance - I was facing the same problem when running the scraper with github actions. Anyway, my goal was to launch an AWS EC2 instance and have my application running remotely, and I did. Lots to come!

Stories, News & Mentions about VERCEL

Vercel’s Stories on HackerNoon

Vercel's News & Mentions