vercel-hello-world
Generates and deploys a simple Hello World project to verify Vercel setup.
Install
mkdir -p .claude/skills/vercel-hello-world && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/7950" && unzip -o skill.zip -d .claude/skills/vercel-hello-world && rm skill.zipInstalls to .claude/skills/vercel-hello-world
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Create a minimal working Vercel deployment with a serverless API route.Key capabilities
- →Create project structure with static HTML and serverless API
- →Validate Vercel CLI authentication
- →Deploy preview URLs for testing
- →Configure rewrites and headers via vercel.json
How it works
The skill initializes a directory with a static landing page and a TypeScript serverless function. It then uses the Vercel CLI to deploy these assets to the Vercel platform.
Inputs & outputs
When to use vercel-hello-world
- →Verify Vercel CLI setup
- →Test deployment pipelines
- →Create a boilerplate for a new project
- →Learn basic serverless API patterns
About this skill
Vercel Hello World
Overview
Deploy a minimal project to Vercel with a static page and a serverless API route. Confirms your CLI auth, project structure, and deployment pipeline work end to end.
Prerequisites
- Completed
vercel-install-authsetup - Vercel CLI installed and authenticated
- Node.js 18+
Instructions
Step 1: Create Project Structure
mkdir my-vercel-app && cd my-vercel-app
npm init -y
Create the static landing page:
<!-- public/index.html -->
<!DOCTYPE html>
<html>
<head><title>Hello Vercel</title></head>
<body>
<h1>Hello from Vercel</h1>
<p id="result">Loading...</p>
<script>
fetch('/api/hello')
.then(r => r.json())
.then(d => document.getElementById('result').textContent = d.message);
</script>
</body>
</html>
Step 2: Create Serverless API Route
// api/hello.ts
import type { VercelRequest, VercelResponse } from '@vercel/node';
export default function handler(req: VercelRequest, res: VercelResponse) {
res.status(200).json({
message: 'Hello from Vercel Serverless Function!',
timestamp: new Date().toISOString(),
region: process.env.VERCEL_REGION || 'local',
});
}
Install the types:
npm install --save-dev @vercel/node typescript
Step 3: Add vercel.json Configuration
{
"rewrites": [
{ "source": "/api/(.*)", "destination": "/api/$1" }
],
"headers": [
{
"source": "/api/(.*)",
"headers": [
{ "key": "Cache-Control", "value": "s-maxage=0, stale-while-revalidate" }
]
}
]
}
Step 4: Deploy Preview
# Deploy to a preview URL (not production)
vercel
# Output:
# Vercel CLI 39.x.x
# 🔗 Linked to your-team/my-vercel-app
# 🔍 Inspect: https://vercel.com/your-team/my-vercel-app/xxx
# ✅ Preview: https://my-vercel-app-xxx.vercel.app
Step 5: Test the Deployment
# Test static page
curl -s https://my-vercel-app-xxx.vercel.app/ | head -5
# Test API route
curl -s https://my-vercel-app-xxx.vercel.app/api/hello | jq .
# {
# "message": "Hello from Vercel Serverless Function!",
# "timestamp": "2026-03-22T12:00:00.000Z",
# "region": "iad1"
# }
Step 6: Promote to Production
# Deploy directly to production
vercel --prod
# Or promote the preview deployment
vercel promote https://my-vercel-app-xxx.vercel.app
Vercel System Environment Variables
These are available in every function at runtime:
| Variable | Value |
|---|---|
VERCEL | "1" — always set on Vercel |
VERCEL_ENV | "production", "preview", or "development" |
VERCEL_URL | Deployment URL (no protocol) |
VERCEL_REGION | Function region (e.g., iad1) |
VERCEL_GIT_COMMIT_SHA | Git commit hash |
VERCEL_GIT_COMMIT_MESSAGE | Git commit message |
Output
- Static page served from Vercel CDN
- Serverless API route returning JSON at
/api/hello - Preview URL for testing before production
- Production deployment live on your domain
Error Handling
| Error | Cause | Solution |
|---|---|---|
404 NOT_FOUND on /api/hello | File not in api/ directory | Move file to project root api/ folder |
FUNCTION_INVOCATION_FAILED | Runtime error in handler | Check function logs: vercel logs <url> |
BUILD_FAILED | TypeScript compilation error | Run npx tsc --noEmit locally first |
NO_RESPONSE_FROM_FUNCTION | Handler didn't call res.send/json | Ensure all code paths return a response |
FUNCTION_PAYLOAD_TOO_LARGE | Response body > 4.5 MB | Paginate or stream the response |
Resources
Next Steps
Proceed to vercel-local-dev-loop for development workflow setup.
Prerequisites
Limitations
- →Response body size limit of 4.5 MB
- →Requires file placement in the api/ directory
How it compares
This workflow automates the creation of a standard Vercel project structure and deployment pipeline instead of manually configuring files and CLI commands.
Compared to similar skills
vercel-hello-world side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| vercel-hello-world (this skill) | 0 | 27d | Caution | Beginner |
| azure-appconfiguration-ts | 0 | 4mo | Review | Intermediate |
| mcp-builder | 136 | 3mo | Review | Advanced |
| telegram-mini-app | 62 | 6mo | Review | Advanced |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by jeremylongshore
View all by jeremylongshore →You might also like
azure-appconfiguration-ts
wegonbeok45
Centralized configuration management with feature flags and dynamic refresh.
mcp-builder
anthropics
Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate external APIs or services, whether in Python (FastMCP) or Node/TypeScript (MCP SDK).
telegram-mini-app
davila7
Expert in building Telegram Mini Apps (TWA) - web apps that run inside Telegram with native-like experience. Covers the TON ecosystem, Telegram Web App API, payments, user authentication, and building viral mini apps that monetize. Use when: telegram mini app, TWA, telegram web app, TON app, mini app.
stripe-integration
wshobson
Implement Stripe payment processing for robust, PCI-compliant payment flows including checkout, subscriptions, and webhooks. Use when integrating Stripe payments, building subscription systems, or implementing secure checkout flows.
nuxthub-migration
onmax
Use when migrating NuxtHub projects or when user mentions NuxtHub Admin sunset, GitHub Actions deployment removal, self-hosting NuxtHub, or upgrading to v1/nightly. Covers v0.9.X self-hosting (stable) and v1/nightly multi-cloud (experimental, database/blob not ready).
copilot-sdk
github
Build agentic applications with GitHub Copilot SDK. Use when embedding AI agents in apps, creating custom tools, implementing streaming responses, managing sessions, connecting to MCP servers, or creating custom agents. Triggers on Copilot SDK, GitHub SDK, agentic app, embed Copilot, programmable agent, MCP server, custom agent.