Setup

Run these steps as soon as the setup slide goes up.

Start Devbox

1. 1

   Install Devbox.

   curl -fsSL https://api.vercel.com/v1/devbox/install.sh | bash

   Devbox gives you the remote development environment for this workshop.

2. 2

   Log in to Vercel.

   vercel login
3. 3

   Start Devbox.

   devbox ssh --ai-gateway-token <workshop-token>

   Keep this SSH session open for the rest of the workshop.

4. 4

   Install uv.

   Run this inside Devbox:

   curl -LsSf https://astral.sh/uv/install.sh | sh

   vercel dev uses uv under the hood to install Python dependencies.

5. 5

   Save your Devbox ID.

   Open the Devbox menu with Ctrl+], copy the Devbox ID, and save it somewhere you can find later.

Clone and configure

Run these commands inside Devbox.

1. 1

   Clone the starter.

   git clone https://github.com/vercel-labs/nextjs-fastapi-chat-app-starter.git cd nextjs-fastapi-chat-app-starter
2. 2

   Install the Vercel plugin.

   npx plugins add vercel/vercel-plugin

   This gives your agent Vercel-specific context, skills, agents, and slash commands to help it more easily build applications it can deploy to Vercel.

   Learn more about the Vercel plugin.

3. 3

   Install the AI SDK for Python skill.

   npx skills add vercel-labs/ai-python

   This teaches your agent how to use the AI SDK in Python, including model calls, streaming, and tool usage patterns.

   Learn more about the AI SDK for Python.

4. 4

   Open your agent.

   claude --permission-mode acceptEdits

Preview the starter

Open the starter before asking the agent to make edits so you know what the app looks like first.

1. 1

   Open a second Devbox session.

   Open a new terminal window on your laptop. Start a second Devbox session with the Devbox ID you saved:

   devbox ssh devbox_abc123...
2. 2

   Go back into the starter repo.

   cd nextjs-fastapi-chat-app-starter
3. 3

   Start the app.

   vercel dev

   The first time you run this, Vercel will ask you to set up the project.

   Use these answers:

   • Create a new Vercel project.
   • Do not link a GitHub repo.
   • Keep the default settings.
4. 4

   Open the app.

   Open the Devbox menu with Ctrl+]. Look for a line like 3000: https://..., then open that URL in your browser.

vercel dev starts both parts of the app:

• the Next.js dev server for the UI
• the FastAPI dev server for the backend

It also connects them so the UI can call the backend from your browser. Keep vercel dev running while you work.

You are ready when

• Your Devbox SSH session is open.
• uv is installed inside Devbox.
• You saved the Devbox ID.
• The starter repo is cloned.
• The Vercel plugin and Python skill are installed (npx plugins list / npx skills list).
• Your agent is open in the repo root.
• The starter app loads in the browser.
• vercel dev is running without errors in your second Devbox session.
• .vercel/project.json exists in the repo root.

Keep the agent terminal and the vercel dev terminal visible alongside this tab. The Build the App page assumes you can paste a prompt into a live agent session and watch the preview update.