Agent skill

Deploy Fullstack Vercel

by vellum-ai in vellum-ai/vellum-assistant

Build and deploy a full-stack app (React frontend + Python/FastAPI backend) or a Vellum app to Vercel as a serverless demo with seeded data

MITAuto-check passedBackend & APIs

Install Deploy Fullstack Vercel

skills CLI
$ npx skills add vellum-ai/vellum-assistant --skill deploy-fullstack-vercel -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install vellum-ai/vellum-assistant deploy-fullstack-vercel --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/vellum-ai/vellum-assistant.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/deploy-fullstack-vercel .claude/skills/deploy-fullstack-vercel && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
deploy-fullstack-vercel
GitHub stars
1.4k
Token cost
~2.8k tokens
SKILL.md length
757 words
Files
1
Skills in repo
108
Repo updated
First seen
Licence
MIT

At a glance

Build and deploy a full-stack app (React frontend + Python/FastAPI backend) or a Vellum app to Vercel as a serverless demo with seeded data

  • Works in 12 steps: Detect Vellum Bridge Usage → Create Vellum Bridge Shim → Inject the Shim into index.html → …
  • Tasks that involve Serverless
  • SKILL.md covers When to Use, Authentication, Deploying a Vellum App and Deploying a Custom Full-Stack…, plus 2 more sections
  • Calls vercel, bun and bunx

What it does

Deploy Fullstack Vercel is an agent skill from vellum-ai/vellum-assistant. Build and deploy a full-stack app (React frontend + Python/FastAPI backend) or a Vellum app to Vercel as a serverless demo with seeded data

Its SKILL.md is about 2.8k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts. Compatibility notes: Designed for Vellum personal assistants

It sits in Backend & APIs, covering Serverless, Deployment and Backend development. It works with Vercel, FastAPI, React and Python. The repository describes itself as: An AI Assistant that’s easy to setup, does your work 24/7, knows your preferences and gets better over time. The licence is MIT.

When your agent uses it

  • Tasks that involve Serverless
  • Tasks that involve Deployment
  • Tasks that involve Backend development

Example prompts

  • “/deploy-fullstack-vercel”

Requirements

  • Python 3
  • Compatibility (from SKILL.md): Designed for Vellum personal assistants

Workflow steps

12 steps, taken from the step headings in SKILL.md.

  1. Detect Vellum Bridge Usage
  2. Create Vellum Bridge Shim
  3. Inject the Shim into index.html
  4. Deploy the App
  5. Build the Frontend
  6. Create the Vercel Deploy Directory
  7. Create api/index.py (Serverless Entry Point)
  8. Update database.py for Vercel
  9. Seed ALL Required Data
  10. Create vercel.json
  11. Deploy
  12. Verify

What it can do on your machine

Read from SKILL.md and the folder at commit 56dfa96. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • vercel
    • bun
    • bunx
    • curl

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use vercel, bunx and curl, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

  • Compatibility

    Designed for Vellum personal assistants

    From compatibility in the SKILL.md frontmatter.

Context cost

Deploy Fullstack Vercel loads about 2.8k tokens when it runs. Until then it costs about 41 tokens; SKILL.md has 757 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~41
When it runs · the whole SKILL.md, loaded when a task matches
~2.8k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from vellum-ai/vellum-assistant at commit 56dfa96, republished under its MIT licence (© vellum-ai). 757 words, ~2,757 tokens.

Download SKILL.mdSave it as .claude/skills/deploy-fullstack-vercel/SKILL.md (or your agent's skills folder).
name
deploy-fullstack-vercel
description
Build and deploy a full-stack app (React frontend + Python/FastAPI backend) or a Vellum app to Vercel as a serverless demo with seeded data
compatibility
Designed for Vellum personal assistants
metadata.emoji
🚀

Deploy Fullstack to Vercel

Deploy a full-stack app with a React/Vite frontend and Python/FastAPI backend to Vercel as a serverless demo, OR deploy a Vellum-built app from the library. No auth required - meant for demos, portfolio pieces, and quick showcases.

When to Use

  • User says "deploy this to Vercel", "host this", "publish this"
  • User has a project with a frontend + backend they want live
  • User wants to deploy a Vellum app that uses backend features (data store, custom routes)
  • User wants a quick demo deployment (no persistent database needed)

Authentication

Vellum App Publishing

For publishing Vellum apps from the library, use the built-in publish_page tool. This is the preferred path — it uses the stored Vercel API token (vercel/api_token) via the brokered publish flow without exposing the token to shell commands.

The stored Vercel API token is reserved for brokered publish_page and unpublish_page actions only. Do not pass it to bash, curl, Vercel CLI commands, or proxy credential injection. Do not use network_mode: "proxied" with credential_ids for Vercel deployments.

Custom Full-Stack Deployments

For custom projects that need Vercel deployment (not Vellum app publishing):

  1. Install the Vercel CLI with bun install -g vercel (not npm — npm is not available in the sandbox).
  2. Use vercel login to authenticate interactively (opens browser for the user).
  3. If the user does not want to use CLI auth, stop and ask them for an approved deployment path. Do not extract, inject, or shell with the stored API token.

Deploying a Vellum App

When the user asks to deploy a Vellum app from their library (from /workspace/data/apps/<app-name>/):

1. Detect Vellum Bridge Usage

Check the compiled app for Vellum bridge API usage:

bash
grep -l "window\.vellum\.\|vellum\.fetch\|vellum\.data\|vellum\.sendAction" /workspace/data/apps/<app-name>/dist/*.js /workspace/data/apps/<app-name>/dist/*.html 2>/dev/null

If found, the app depends on the Vellum bridge and needs a shim to work standalone.

2. Create Vellum Bridge Shim

The app uses window.vellum.* APIs that are normally injected by the Vellum viewer. For standalone deployment, create a vellum-shim.js file in the app's dist/ directory that provides browser-native replacements.

Before writing the shim, read the app's compiled JavaScript (dist/main.js or equivalent) to understand exactly which window.vellum.* APIs the app calls and what data shapes it expects. The shim must match the app's actual usage — don't guess at signatures.

Common APIs to shim (implement only what the app actually uses):

Bridge APIStandalone replacementNotes
vellum.data.query()localStorage-backed storeRead the app code to determine the record shape — some apps expect {id, data: {...}} wrappers, others use flat records
vellum.data.create(...)localStorage insert with crypto.randomUUID()Match the argument signature the app passes (some pass a payload, others pass {id, ...fields})
vellum.data.update(...)localStorage updateMatch the argument signature (typically (id, payload))
vellum.data.delete(...)localStorage deleteTypically (id)
vellum.fetch(path, opts)console.warn + return empty success ResponseCustom routes aren't available standalone
vellum.sendAction(id, data)No-op with console.warnSurface actions aren't available standalone
vellum.openLink(url)window.open(url, '_blank')
vellum.widgets.toast(msg)Create a temporary styled <div> that auto-dismisses
vellum.routenullDeep-link routes aren't available standalone

Structure: Wrap everything in an IIFE that guards against the real bridge: (function() { if (window.vellum) return; ... })();

Show full SKILL.md (263 more words)Show less
3. Inject the Shim into index.html

Add a <script src="vellum-shim.js"></script> tag in dist/index.html BEFORE any <script type="module"> tags:

bash
sed -i 's|<script type="module"|<script src="vellum-shim.js"></script>\n<script type="module"|' dist/index.html
4. Deploy the App
bash
cd /workspace/data/apps/<app-name>/dist

Create a vercel.json in the dist directory:

json
{
  "rewrites": [
    {
      "source": "/((?!main\\.js|main\\.css|vellum-shim\\.js|assets/).*)",
      "destination": "/index.html"
    }
  ]
}

Then deploy using the publish_page tool (preferred). For Vellum apps, use the built-in app publish flow rather than raw Vercel API calls from shell.

Deploying a Custom Full-Stack Project

1. Build the Frontend
bash
cd <project>/frontend
bun install
bunx vite build

This produces static files in frontend/dist/.

2. Create the Vercel Deploy Directory
<project>/vercel-deploy/
├── api/
│   ├── index.py          ← FastAPI app wrapper (entry point)
│   ├── database.py        ← DB config (use /tmp for SQLite)
│   ├── models.py
│   ├── schemas.py
│   ├── seed_data.py       ← Must seed ALL required data (users, etc.)
│   ├── routers/
│   │   ├── __init__.py
│   │   └── *.py
│   └── requirements.txt   ← Python deps (fastapi, sqlalchemy, pydantic)
├── index.html             ← From frontend/dist/
├── assets/                ← From frontend/dist/assets/
└── vercel.json

Key steps:

bash
mkdir -p <project>/vercel-deploy/api

# Copy frontend build output to deploy root
cp -r <project>/frontend/dist/* <project>/vercel-deploy/

# Copy backend files into api/
cp <project>/backend/models.py <project>/vercel-deploy/api/
cp <project>/backend/database.py <project>/vercel-deploy/api/
cp <project>/backend/schemas.py <project>/vercel-deploy/api/
cp <project>/backend/seed_data.py <project>/vercel-deploy/api/
cp -r <project>/backend/routers <project>/vercel-deploy/api/
cp <project>/backend/requirements.txt <project>/vercel-deploy/api/
3. Create api/index.py (Serverless Entry Point)
python
import sys, os
sys.path.insert(0, os.path.dirname(__file__))

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
from database import engine, Base, SessionLocal
from seed_data import seed_exercises, seed_default_user  # all seed functions
from routers import users, exercises, workouts, schedule, progress

# Create tables and seed on EVERY cold start
Base.metadata.create_all(bind=engine)
db = SessionLocal()
try:
    seed_exercises(db)
    seed_default_user(db)  # IMPORTANT: seed all required data
finally:
    db.close()

app = FastAPI(title="MyApp")

app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

app.include_router(users.router)
# ... other routers

@app.get("/api/health")
def health_check():
    return {"status": "ok"}
4. Update database.py for Vercel

Critical: Vercel serverless functions can only write to /tmp. Update the SQLite path:

python
SQLALCHEMY_DATABASE_URL = "sqlite:////tmp/app.db"
5. Seed ALL Required Data

This is the #1 gotcha. Since /tmp is ephemeral, every cold start gets a fresh database. If your frontend assumes certain data exists (like user ID 1), you MUST seed it:

python
def seed_default_user(db: Session):
    count = db.query(UserProfile).count()
    if count > 0:
        return
    user = UserProfile(name="Demo User", ...)
    db.add(user)
    db.commit()
6. Create vercel.json
json
{
  "rewrites": [
    { "source": "/api/(.*)", "destination": "/api/index.py" },
    { "source": "/((?!assets/).*)", "destination": "/index.html" }
  ]
}

This routes:

  • /api/* → Python serverless function
  • Everything else → React SPA (index.html)
7. Deploy
bash
cd <project>/vercel-deploy
vercel --yes --prod
8. Verify
bash
curl -s <deployed-url>/api/health
# Should return: {"status":"ok"}

Gotchas & Limitations

IssueSolution
SQLite resets on cold startSeed ALL required data in index.py startup
No persistent storageAcceptable for demos. For production, use Vercel Postgres or Supabase
No authFine for demos/portfolios. Add auth layer for real apps
requirements.txt locationMust be inside api/ folder (next to index.py)
Module imports in routersUse sys.path.insert(0, os.path.dirname(__file__)) in index.py
CORSSet allow_origins=["*"] for demo deployments
--name flag deprecatedDon't use --name with Vercel CLI, just deploy from the directory
Vellum bridge APIsUse the vellum-shim.js to provide localStorage-backed data + no-op stubs
npm not availableUse bun install -g vercel to install Vercel CLI in sandbox

Vercel CLI Quick Reference

bash
bun install -g vercel        # Install
vercel login                 # Authenticate (opens browser for user-mediated auth)
vercel --yes --prod          # Deploy to production (skip prompts)
vercel logs --project <name> # Check function logs

© vellum-ai, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in skills/deploy-fullstack-vercel of vellum-ai/vellum-assistant.

Open the folder on GitHubat commit 56dfa96

Compare with similar skills

Deploy Fullstack Vercel next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Deploy Fullstack Vercel compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Deploy Fullstack Vercel this skillvellum-ai/vellum-assistant1.4k—~2.8kAutomated safety check: PassMIT
Fastapi Appccplugins/awesome-claude-code-plugins967—~1.1kAutomated safety check: NotesApache-2.0
Vercel Experttheneoai/awesome-skills183—~3.2kAutomated safety check: PassMIT
Azure Realtime Podcast Generationmicrosoft/skills3.1k1 repos~947Automated safety check: PassMIT
Airflow Pluginsastronomer/agents450—~6kAutomated safety check: NotesApache-2.0
Fastcrudbenavlabs/fastcrud1.6k—~5kAutomated safety check: PassMIT

Similar skills

  • Fastapi App

    ccplugins/awesome-claude-code-plugins

    Bootstrap a new FastAPI backend with async SQLAlchemy 2.0, asyncpg, Alembic, Pydantic v2, and no deprecated APIs.

    967 GitHub stars~1.1k tokensUpdated 1 mo ago
    Backend & APIsAuto-check: notes
  • Vercel Expert

    theneoai/awesome-skills

    Vercel expert: Frontend deployment, Serverless Functions, environment configuration, preview deployments, edge functions, and performance optimization.

    183 GitHub stars~3.2k tokensUpdated 4 mo ago
    Backend & APIsAuto-check passed
  • Official

    Builds podcast-style audio narration from text with Azure OpenAI's GPT Realtime Mini over WebSocket, from a Python FastAPI backend to a React player.

    3.1k GitHub starsUsed in 1 repo~947 tokens
    Media & CreativeAuto-check passed
  • Airflow Plugins

    astronomer/agents

    Builds Airflow 3.1+ plugins that embed FastAPI apps, custom UI pages, React components, middleware, macros, and operator links directly into the Airflow UI.

    450 GitHub stars~6k tokensUpdated 2 days ago
    Data & AnalyticsAuto-check: notes
  • Fastcrud

    benavlabs/fastcrud

    A skill your agent uses when building or modifying CRUD endpoints with FastCRUD (the fastcrud PyPI package) in a FastAPI project — covers FastCRUD, crudrouter, EndpointCreator, FilterConfig…

    1.6k GitHub stars~5k tokensUpdated 13 days ago
    Backend & APIsAuto-check passed
  • Phoenix Server

    Arize-ai/phoenix

    Backend development guide for the Phoenix AI observability platform (Strawberry GraphQL, SQLAlchemy async, FastAPI).

    12k GitHub stars~1.6k tokensUpdated today
    Backend & APIsAuto-check passed

More from vellum-ai/vellum-assistant

All 108 skills in this repo
  • Vellum GitHub App Setup

    vellum-ai/vellum-assistant

    Create and configure a GitHub App so the assistant can push commits, open PRs, and comment under its own bot identity.

    1.4k GitHub stars~3.1k tokensUpdated 3 days ago
    Auto-check passed
  • Discord App Setup

    vellum-ai/vellum-assistant

    Connect a Discord bot to the assistant via the Discord Gateway with guided application creation and intent configuration

    1.4k GitHub stars~4.2k tokensUpdated 3 days ago
    Auto-check passed
  • Sentry App Setup

    vellum-ai/vellum-assistant

    Create and configure a Sentry internal integration so the assistant can manage issues, alerts, and releases under its own identity

    1.4k GitHub stars~1.3k tokensUpdated 3 days ago
    Auto-check passed
  • Memory Corpus Ingest

    vellum-ai/vellum-assistant

    Ingest a large dataset into memory as a skimmed map. An agent skill from vellum-ai/vellum-assistant.

    1.4k GitHub stars~3k tokensUpdated 3 days ago
    Auto-check: notes
  • Plugin Builder

    vellum-ai/vellum-assistant

    A skill your agent uses when the user wants to build, scaffold, ship, or edit a Vellum plugin that bundles multiple surfaces (hooks, tools, skills, and more) into one installable package.

    1.4k GitHub stars~3.1k tokensUpdated 3 days ago
    Auto-check passed
  • Slack App Setup

    vellum-ai/vellum-assistant

    Connect a Slack app to the Vellum Assistant via Socket Mode.

    1.4k GitHub stars~2.5k tokensUpdated 3 days ago
    Auto-check: warnings

Categories

Questions about Deploy Fullstack Vercel

What does Deploy Fullstack Vercel do?

Build and deploy a full-stack app (React frontend + Python/FastAPI backend) or a Vellum app to Vercel as a serverless demo with seeded data. Deploy Fullstack Vercel is an agent skill from vellum-ai/vellum-assistant.

When should I use Deploy Fullstack Vercel?

Deploy Fullstack Vercel fits situations like: tasks that involve Serverless; tasks that involve Deployment; tasks that involve Backend development.

How do I install Deploy Fullstack Vercel in Claude Code?

Run `npx skills add vellum-ai/vellum-assistant --skill deploy-fullstack-vercel -a claude-code`. Or copy the skill folder (skills/deploy-fullstack-vercel in vellum-ai/vellum-assistant) into .claude/skills/deploy-fullstack-vercel in your project. Claude Code loads it when a task matches its description.

How do I install Deploy Fullstack Vercel in Codex?

Run `npx skills add vellum-ai/vellum-assistant --skill deploy-fullstack-vercel -a codex`. Or copy the skill folder (skills/deploy-fullstack-vercel in vellum-ai/vellum-assistant) into .agents/skills/deploy-fullstack-vercel in your project. Codex loads it when a task matches its description.

Can I use Deploy Fullstack Vercel in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add vellum-ai/vellum-assistant --skill deploy-fullstack-vercel -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/deploy-fullstack-vercel, .gemini/skills/deploy-fullstack-vercel, .github/skills/deploy-fullstack-vercel and .opencode/skills/deploy-fullstack-vercel in your project.

What does Deploy Fullstack Vercel need to run?

Going by SKILL.md and its folder, Deploy Fullstack Vercel needs the command-line tools its instructions call (vercel, bun, bunx and curl). Our summary lists: Python 3. Compatibility (from SKILL.md): Designed for Vellum personal assistants.

Does Deploy Fullstack Vercel access the network?

SKILL.md contains no URLs. Its commands use curl, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Deploy Fullstack Vercel safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Deploy Fullstack Vercel use?

Deploy Fullstack Vercel is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Deploy Fullstack Vercel use?

About 2.8k tokens (SKILL.md is roughly 11k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Deploy Fullstack Vercel?

Skills that share tags, products or a category with Deploy Fullstack Vercel: Fastapi App (ccplugins/awesome-claude-code-plugins, 967 stars), Vercel Expert (theneoai/awesome-skills, 183 stars), Azure Realtime Podcast Generation (microsoft/skills, 3.1k stars) and Airflow Plugins (astronomer/agents, 450 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Deploy Fullstack Vercel?

vellum-ai (a GitHub organization) maintains it in vellum-ai/vellum-assistant, which has 1,392 GitHub stars. The repository holds 108 skills in this directory. The repository was last updated on October 4, 2026.

Source: vellum-ai/vellum-assistant on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.