vercel-hello-world
Create a minimal working Vercel deployment with a serverless API route. Use when starting a new Vercel project, testing your setup, or learning basic Vercel deployment and API route patterns. Trigger with phrases like "vercel hello world", "vercel example", "vercel quick start", "simple vercel project", "first vercel deploy".
Best use case
vercel-hello-world is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Create a minimal working Vercel deployment with a serverless API route. Use when starting a new Vercel project, testing your setup, or learning basic Vercel deployment and API route patterns. Trigger with phrases like "vercel hello world", "vercel example", "vercel quick start", "simple vercel project", "first vercel deploy".
Teams using vercel-hello-world should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/vercel-hello-world/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How vercel-hello-world Compares
| Feature / Agent | vercel-hello-world | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Create a minimal working Vercel deployment with a serverless API route. Use when starting a new Vercel project, testing your setup, or learning basic Vercel deployment and API route patterns. Trigger with phrases like "vercel hello world", "vercel example", "vercel quick start", "simple vercel project", "first vercel deploy".
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
Related Guides
AI Agents for Coding
Browse AI agent skills for coding, debugging, testing, refactoring, code review, and developer workflows across Claude, Cursor, and Codex.
Best AI Skills for Claude
Explore the best AI skills for Claude and Claude Code across coding, research, workflow automation, documentation, and agent operations.
ChatGPT vs Claude for Agent Skills
Compare ChatGPT and Claude for AI agent skills across coding, writing, research, and reusable workflow execution.
SKILL.md Source
# 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-auth` setup
- Vercel CLI installed and authenticated
- Node.js 18+
## Instructions
### Step 1: Create Project Structure
```bash
mkdir my-vercel-app && cd my-vercel-app
npm init -y
```
Create the static landing page:
```html
<!-- 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
```typescript
// 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:
```bash
npm install --save-dev @vercel/node typescript
```
### Step 3: Add vercel.json Configuration
```json
{
"rewrites": [
{ "source": "/api/(.*)", "destination": "/api/$1" }
],
"headers": [
{
"source": "/api/(.*)",
"headers": [
{ "key": "Cache-Control", "value": "s-maxage=0, stale-while-revalidate" }
]
}
]
}
```
### Step 4: Deploy Preview
```bash
# 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
```bash
# 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
```bash
# 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
- [Vercel Serverless Functions](https://vercel.com/docs/functions)
- [Vercel Project Configuration](https://vercel.com/docs/project-configuration)
- [Vercel CLI Deploy](https://vercel.com/docs/cli/deploy)
- [@vercel/node Runtime](https://vercel.com/docs/functions/runtimes/node-js)
## Next Steps
Proceed to `vercel-local-dev-loop` for development workflow setup.Related Skills
workhuman-hello-world
Workhuman hello world for employee recognition and rewards API. Use when integrating Workhuman Social Recognition, or building recognition workflows with HRIS systems. Trigger: "workhuman hello world".
wispr-hello-world
Wispr Flow hello world for voice-to-text API integration. Use when integrating Wispr Flow dictation, WebSocket streaming, or building voice-powered applications. Trigger: "wispr hello world".
windsurf-hello-world
Create your first Windsurf Cascade interaction and Supercomplete experience. Use when starting with Windsurf, testing your setup, or learning basic Cascade and Supercomplete workflows. Trigger with phrases like "windsurf hello world", "windsurf example", "windsurf quick start", "first windsurf project", "try windsurf".
webflow-hello-world
Create a minimal working Webflow Data API v2 example. Use when starting a new Webflow integration, testing your setup, or learning basic Webflow API patterns — list sites, read CMS collections, create items. Trigger with phrases like "webflow hello world", "webflow example", "webflow quick start", "simple webflow code", "first webflow API call".
vercel-webhooks-events
Implement Vercel webhook handling with signature verification and event processing. Use when setting up webhook endpoints, processing deployment events, or building integrations that react to Vercel deployment lifecycle. Trigger with phrases like "vercel webhook", "vercel events", "vercel deployment.ready", "handle vercel events", "vercel webhook signature".
vercel-upgrade-migration
Upgrade Vercel CLI, Node.js runtime, and Next.js framework versions with breaking change detection. Use when upgrading Vercel CLI versions, migrating Node.js runtimes, or updating Next.js between major versions on Vercel. Trigger with phrases like "upgrade vercel", "vercel migration", "vercel breaking changes", "update vercel CLI", "next.js upgrade on vercel".
vercel-security-basics
Apply Vercel security best practices for secrets, headers, and access control. Use when securing API keys, configuring security headers, or auditing Vercel security configuration. Trigger with phrases like "vercel security", "vercel secrets", "secure vercel", "vercel headers", "vercel CSP".
vercel-sdk-patterns
Production-ready Vercel REST API patterns with typed fetch wrappers and error handling. Use when integrating with the Vercel API programmatically, building deployment tools, or establishing team coding standards for Vercel API calls. Trigger with phrases like "vercel SDK patterns", "vercel API wrapper", "vercel REST API client", "vercel best practices", "idiomatic vercel API".
vercel-reliability-patterns
Implement reliability patterns for Vercel deployments including circuit breakers, retry logic, and graceful degradation. Use when building fault-tolerant serverless functions, implementing retry strategies, or adding resilience to production Vercel services. Trigger with phrases like "vercel reliability", "vercel circuit breaker", "vercel resilience", "vercel fallback", "vercel graceful degradation".
vercel-reference-architecture
Implement a Vercel reference architecture with layered project structure and best practices. Use when designing new Vercel projects, reviewing project structure, or establishing architecture standards for Vercel applications. Trigger with phrases like "vercel architecture", "vercel project structure", "vercel best practices layout", "how to organize vercel project".
vercel-rate-limits
Handle Vercel API rate limits, implement retry logic, and configure WAF rate limiting. Use when hitting 429 errors, implementing retry logic, or setting up rate limiting for your Vercel-deployed API endpoints. Trigger with phrases like "vercel rate limit", "vercel throttling", "vercel 429", "vercel retry", "vercel backoff", "vercel WAF rate limit".
vercel-prod-checklist
Vercel production deployment checklist with rollback and promotion procedures. Use when deploying to production, preparing for launch, or implementing go-live and instant rollback procedures. Trigger with phrases like "vercel production", "deploy vercel prod", "vercel go-live", "vercel launch checklist", "vercel promote".