{content}
— use AI Elements\n│ → AI SDK UI hooks (useChat, useCompletion)\n│ → shadcn/ui (component primitives) ⤳ skill: shadcn\n│\n│\n├── MCP Integration (@ai-sdk/mcp)\n│ ⊃ MCP Client (connect to any MCP server)\n│ ⊃ OAuth authentication for remote MCP servers\n│ ⊃ Resources, Prompts, Elicitation\n│ ⊃ mcp-to-ai-sdk CLI (static tool generation for security)\n│\n├── Providers (Global Provider System: \"provider/model\")\n│ ⊃ @ai-sdk/openai (GPT-5.x, o-series)\n│ ⊃ @ai-sdk/anthropic (Claude 4.x)\n│ ⊃ @ai-sdk/google (Gemini)\n│ ⊃ @ai-sdk/amazon-bedrock\n│ ⊃ @ai-sdk/azure\n│ ⊃ @ai-sdk/mistral\n│ ⊃ @ai-sdk/cohere\n│ ⊃ @ai-sdk/xai (Grok)\n│ ⊃ @ai-sdk/deepseek\n│ ⊃ @ai-sdk/gateway (Vercel AI Gateway routing)\n│ └── ... 20+ providers\n│\n├── Streaming Protocol\n│ ⊃ SSE-based (Server-Sent Events)\n│ → Vercel Functions (streaming support)\n│ ↔ Next.js Route Handlers / Server Actions\n│ ↔ AI Elements (render streaming responses) ⤳ skill: ai-elements\n│\n└── Key Patterns\n ↔ Next.js (chat apps, AI features in web apps)\n ↔ Workflow DevKit (durable agents)\n ↔ AI Gateway (model routing, cost tracking)\n ↔ Generation Persistence (IDs, URLs, cost tracking) ⤳ skill: ai-generation-persistence\n ↔ v0 (AI-generated UI components)\n ↔ AI Elements (production chat UI components) ⤳ skill: ai-elements\n ↔ shadcn/ui (component foundation) ⤳ skill: shadcn\n\nAI GATEWAY ⤳ skill: ai-gateway 📖 docs: https://vercel.com/docs/ai-gateway\n├── Unified API (\"creator/model-name\" format)\n│ → @ai-sdk/gateway package\n│ ↔ AI SDK (automatic when using model strings)\n│\n├── Authentication\n│ ⊃ OIDC (default — auto-provisioned via `vercel env pull`)\n│ ⊃ AI_GATEWAY_API_KEY (alternative — manual key)\n│ ⊃ VERCEL_OIDC_TOKEN (short-lived JWT, auto-refreshed on deploy)\n│ → @vercel/oidc (reads VERCEL_OIDC_TOKEN from env)\n│ → Vercel CLI (`vercel env pull` provisions OIDC token)\n│\n├── Features\n│ ⊃ Provider Routing (order, only, fallback models)\n│ ⊃ Automatic Retries & Failover\n│ ⊃ Cost Tracking & Usage Attribution (tags, user tracking)\n│ ⊃ <20ms routing latency\n│ ⊃ Bring Your Own Key (0% markup)\n│ ⊃ Built-in Observability\n│\n├── Image Generation (gateway-native)\n│ ⊃ Multimodal LLMs: model: 'google/gemini-3.1-flash-image-preview' + generateText → result.files\n│ ⊃ Image-only models: experimental_generateImage (Imagen 4.0, Flux 2, Grok Imagine)\n│ ⊃ Default model: google/gemini-3.1-flash-image-preview\n│ ⊃ DALL-E, gemini-2.x image models are outdated — use Gemini 3.1 Flash Image Preview\n│\n├── Supported Providers\n│ ⊃ OpenAI, Anthropic, Google, Meta, xAI, Mistral\n│ ⊃ DeepSeek, Amazon Bedrock, Cohere, Perplexity, Alibaba\n│ └── 100+ models total\n│\n└── Multimodal\n ⊃ Text, Image, Video generation\n ↔ AI SDK (unified interface)\n\nWORKFLOW DEVKIT (WDK) ⤳ skill: workflow 📖 docs: https://vercel.com/docs/workflow\n├── Core Concepts\n│ ⊃ 'use workflow' directive\n│ ⊃ 'use step' directive\n│ ⊃ Durable execution (survives deploys, crashes)\n│ ⊃ Deterministic replay\n│ ⊃ Pause/resume (minutes to months)\n│ ⊃ Hooks (defineHook → human-in-the-loop approval, pause/resume)\n│ ⊃ AI Gateway OIDC required (vercel link + vercel env pull before dev)\n│\n├── Worlds (Execution Environments)\n│ ⊃ Local World (JSON files on disk)\n│ ⊃ Vercel World (managed, zero-config on Vercel)\n│ ⊃ Self-hosted (Postgres, Redis, custom)\n│\n├── AI Integration\n│ ⊃ DurableAgent (@workflow/ai/agent)\n│ → AI SDK Agent class (wrapped with durability)\n│ → AI SDK tool calling (each tool = retryable step)\n│ → AI Gateway (OIDC auth for model strings in workflow steps)\n│\n├── Key Properties\n│ ⊃ Open source, no vendor lock-in\n│ ⊃ TypeScript-native (async/await, no YAML)\n│ ⊃ Observable (step-level visibility)\n│ ⊃ Retryable (automatic retry on failure)\n│\n└── Integrations\n ↔ AI SDK 6 (DurableAgent)\n ↔ Vercel Functions (automatic step isolation)\n ↔ Next.js (API routes as workflow endpoints)\n\nv0 (AI Development Agent) ⤳ skill: v0-dev 📖 docs: https://v0.dev/docs\n├── Capabilities\n│ ⊃ Natural language → production React/Next.js code\n│ ⊃ Visual input (Figma, screenshots, sketches)\n│ ⊃ Multi-framework output (React, Vue, Svelte, HTML)\n│ ⊃ Agentic intelligence (research, plan, debug, iterate)\n│\n├── Integration Features\n│ ⊃ GitHub Integration (branches, PRs, deploy on merge)\n│ ⊃ One-click Vercel deployment\n│ ⊃ Environment variable import from Vercel\n│ ⊃ shadcn/ui + Tailwind CSS defaults\n│\n└── Ecosystem Position\n → Next.js (primary output framework)\n → Vercel Platform (deployment target)\n ↔ AI SDK (AI features in generated apps)\n ↔ Vercel Marketplace (integrations in generated apps)\n\nCHAT SDK (TypeScript) ⤳ skill: chat-sdk 📖 docs: https://chat-sdk.dev\n├── Core\n│ ⊃ Chat class (event routing, adapter coordination)\n│ ⊃ Thread & Message (normalized cross-platform models)\n│ ⊃ Postable interface (shared by Thread and Channel: post, postEphemeral, mentionUser, startTyping)\n│ ⊃ openDM / channel (out-of-thread message routing)\n│ ⊃ Serialization (registerSingleton, reviver for JSON deserialization)\n│ ⊃ Cards (JSX → Slack Block Kit, Teams Adaptive Cards, Discord Embeds)\n│ ⊃ Modals (Slack-only form dialogs)\n│ ⊃ Streaming (native on Slack, post+edit fallback elsewhere)\n│ ⊃ Emoji system (cross-platform placeholders)\n│\n├── Platform Adapters\n│ ⊃ @chat-adapter/slack (single + multi-workspace, OAuth, native streaming)\n│ ⊃ @chat-adapter/teams (Microsoft Teams, Adaptive Cards)\n│ ⊃ @chat-adapter/discord (HTTP Interactions + Gateway, Ed25519)\n│ ⊃ @chat-adapter/telegram (Telegram Bot API, webhook verification)\n│ ⊃ @chat-adapter/gchat (Google Chat, Spaces)\n│ ⊃ @chat-adapter/github (Issues/PRs as threads)\n│ ⊃ @chat-adapter/linear (Issue comment threads)\n│\n├── State Adapters\n│ ⊃ @chat-adapter/state-redis (production, distributed locking)\n│ ⊃ @chat-adapter/state-ioredis (Redis Cluster/Sentinel)\n│ ⊃ @chat-adapter/state-memory (dev/testing only)\n│\n├── Event Handlers\n│ ⊃ onNewMention, onSubscribedMessage, onNewMessage\n│ ⊃ onReaction, onAction, onSlashCommand\n│ ⊃ onModalSubmit, onModalClose\n│ ⊃ onAssistantThreadStarted, onAssistantContextChanged\n│ ⊃ onAppHomeOpened\n│ ⊃ onMemberJoinedChannel\n│\n├── Key Patterns\n│ ↔ AI SDK (streaming AI responses via thread.post(textStream))\n│ ↔ Workflow DevKit (registerSingleton/reviver for durable serialization)\n│ ↔ Vercel Functions (webhook handlers, waitUntil)\n│ ↔ Next.js (API routes for webhooks)\n│ ↔ Upstash Redis (state adapter backend)\n│\n└── Testing\n ⊃ Replay framework (record real webhooks, replay in tests)\n ⊃ Test context factories (createSlackTestContext, etc.)\n ⊃ Assertion helpers (expectValidMention, expectSentMessage)\n\nVERCEL AGENT ⤳ skill: vercel-agent 📖 docs: https://vercel.com/docs/workflow/agent\n├── Capabilities\n│ ⊃ Automated code review (PR analysis, security, logic errors)\n│ ⊃ Incident investigation (anomaly debugging)\n│ ⊃ SDK installation assistance\n│ ⊃ Vercel Sandbox (secure patch validation) ⤳ skill: vercel-sandbox\n│\n└── Integrations\n ↔ GitHub (PR triggers, @vercel mentions)\n ↔ Vercel Sandbox (isolated code execution)\n ↔ AI SDK (underlying AI capabilities)\n```\n\n---\n\n## 4. Build Tools\n\n```\nTURBOREPO ⤳ skill: turborepo 📖 docs: https://turbo.build/repo/docs\n├── Purpose: Monorepo build orchestration\n│ ⊃ Task caching (local + remote)\n│ ⊃ Parallel execution (all cores)\n│ ⊃ Incremental builds (content-aware hashing)\n│ ⊃ --affected flag (changed packages only)\n│ ⊃ Pruned subsets (deploy only what's needed)\n│ ⊃ Rust-powered core\n│\n├── Remote Caching\n│ → Vercel Account (free tier available)\n│ ↔ CI/CD pipelines (shared cache across machines)\n│\n├── Conformance (code quality + best-practice checks for monorepos)\n│ ⊃ Automated rule enforcement (ESLint, TypeScript, import boundaries)\n│ ↔ Turborepo (runs as part of task pipeline)\n│ ↔ Vercel Platform (enforced on deploy)\n│ ⤳ skill: turborepo (Conformance is configured within Turborepo)\n│\n└── Integrations\n ↔ Next.js (monorepo with multiple Next.js apps)\n ↔ Vercel Platform (auto-detected, optimized builds)\n ↔ Turbopack (per-app bundling)\n\nTURBOPACK ⤳ skill: turbopack 📖 docs: https://turbo.build/pack/docs\n├── Purpose: JavaScript/TypeScript bundler\n│ ⊃ Instant HMR (doesn't degrade with app size)\n│ ⊃ Multi-environment builds (Browser, Server, Edge, SSR, RSC)\n│ ⊃ TypeScript, JSX, CSS, CSS Modules, WebAssembly\n│ ⊃ React Server Components (native support)\n│\n├── Status: Default bundler in Next.js 16\n│ → Next.js (top-level turbopack config)\n│ ⇢ alternative to: Webpack\n│\n└── Architecture\n ⊃ Rust-powered\n ⊃ Incremental computation engine\n ⊃ Lives in the Next.js monorepo\n```\n\nAGENT BROWSER ⤳ skill: agent-browser\n├── Purpose: Browser automation for dev-server testing\n│ ⊃ Snapshot-driven interaction with localhost\n│ ⊃ Works with next dev, vite, nuxt dev, vercel dev\n│\n└── Use When: Verifying UI behavior, form testing, e2e workflows\n\nAGENT BROWSER VERIFY ⤳ skill: agent-browser-verify\n├── Purpose: Automated dev-server verification checklist\n│ ⊃ Triggers on dev-server start (next dev, vite, etc.)\n│ ⊃ Runs visual gut-check: page loads, no errors, key UI renders\n│\n└── Use When: After starting a dev server, before continuing development\n\nVERIFICATION ⤳ skill: verification\n├── Purpose: Full-story verification orchestrator\n│ ⊃ Infers the user story from recent edits and project structure\n│ ⊃ Verifies end-to-end: browser → API → data → response\n│ ⊃ Coordinates agent-browser-verify, investigation-mode, observability\n│\n└── Use When: Dev server starts, user says \"something's off\", or verifying a feature works end-to-end\n\nREACT BEST PRACTICES ⤳ skill: react-best-practices\n├── Purpose: TSX/JSX quality review checklist\n│ ⊃ Component structure, hooks, a11y, performance, TypeScript\n│ ⊃ Triggers when editing component files\n│\n└── Use When: After editing multiple TSX components, before shipping\n\nSWR (v2, React Hooks) ⤳ skill: swr 📖 docs: https://swr.vercel.app\n├── Purpose: Client-side data fetching with stale-while-revalidate caching\n│ ⊃ useSWR (data fetching with auto-revalidation)\n│ ⊃ useSWRMutation (remote mutations, optimistic UI)\n│ ⊃ useSWRInfinite (pagination & infinite loading)\n│ ⊃ SWRConfig (global configuration provider)\n│\n├── Key Features\n│ ⊃ Request deduplication\n│ ⊃ Revalidation on focus, reconnect, interval\n│ ⊃ Built-in cache with shared keys\n│ ⊃ Middleware support\n│\n└── Integrations\n ↔ Next.js (App Router & Pages Router)\n ↔ React (any React framework)\n\nNCC (Node.js Compiler Collection) ⤳ skill: ncc 📖 docs: https://github.com/vercel/ncc\n├── Purpose: Compile Node.js modules into a single file with all dependencies\n│ ⊃ Serverless function bundling\n│ ⊃ CLI tool distribution\n│ ⊃ GitHub Actions bundling\n│ ⊃ TypeScript compilation (uses project tsconfig.json)\n│ ⊃ External module exclusion\n│\n└── Use When: Single-file deployment, reducing node_modules, bundling serverless functions\n\nMICRO (HTTP Microservices) ⤳ skill: micro 📖 docs: https://github.com/vercel/micro\n├── Purpose: Lightweight async HTTP microservices framework\n│ ⊃ Single-endpoint HTTP servers\n│ ⊃ JSON/text/buffer body parsing\n│ ⊃ Composable handler middleware\n│ ⊃ micro-dev for hot-reloading development\n│\n└── Use When: Minimal HTTP services, single-purpose API endpoints\n\nGEIST (Font Family) ⤳ skill: geist 📖 docs: https://github.com/vercel/geist-font\n├── Purpose: Vercel's open-source font family for Next.js\n│ ⊃ Geist Sans (modern sans-serif for UI)\n│ ⊃ Geist Mono (monospace for code)\n│ ⊃ next/font integration (zero layout shift)\n│ ⊃ CSS variables (--font-geist-sans, --font-geist-mono)\n│ ⊃ Variable font (all weights 100–900)\n│\n└── Use When: Typography setup in Next.js, Vercel design system styling\n\nGEISTDOCS (Documentation Template) ⤳ skill: geistdocs 📖 docs: https://preview.geistdocs.com/docs\n├── Purpose: Production-ready documentation template for Vercel microsites\n│ ⊃ Next.js 16 + Fumadocs framework\n│ ⊃ MDX authoring with auto-routing (content/docs/)\n│ ⊃ AI-powered chat (Ask AI, llms.txt, Open in Chat)\n│ ⊃ i18n, feedback widget, RSS, Edit on GitHub\n│ ⊃ geistdocs.tsx config (Logo, nav, title, prompt, translations)\n│\n└── Use When: Building documentation sites, docs microsites, developer docs\n\n---\n\n## 5. Storage & Data\n\n```\nVERCEL BLOB (active, first-party) ⤳ skill: vercel-storage 📖 docs: https://vercel.com/docs/storage/vercel-blob\n├── Purpose: File storage for unstructured data\n│ ⊃ Client uploads (up to 5 TB)\n│ ⊃ Conditional gets with ETags\n│ ⊃ @vercel/blob package\n│\n└── Use When: Media files, user uploads, large assets\n\nVERCEL EDGE CONFIG (active, first-party) ⤳ skill: vercel-storage 📖 docs: https://vercel.com/docs/storage/edge-config\n├── Purpose: Global low-latency key-value for config\n│ ⊃ Feature flags\n│ ⊃ A/B testing configuration\n│ ⊃ Dynamic routing rules\n│ ⊃ @vercel/edge-config package (supports Next.js 16 cacheComponents)\n│\n└── Use When: Config that must be read at the edge instantly\n\nMARKETPLACE STORAGE (partner-provided) ⤳ skill: vercel-storage\n├── Neon Postgres (replaces @vercel/postgres)\n│ ⊃ @neondatabase/serverless\n│ ⊃ Branching, auto-scaling\n│ ⇢ alternative to: @vercel/postgres (sunset)\n│\n├── Upstash Redis (replaces @vercel/kv)\n│ ⊃ @upstash/redis\n│ ⊃ Same Vercel billing integration\n│ ⇢ alternative to: @vercel/kv (sunset)\n│\n└── Other: MongoDB, PlanetScale, Supabase, etc.\n ↔ Vercel Marketplace (one-click install, auto env vars)\n```\n\n**IMPORTANT**: `@vercel/postgres` and `@vercel/kv` are **sunset**. Use Neon and Upstash respectively.\n\n---\n\n## 6. Security\n\n```\nVERCEL FIREWALL ⤳ skill: vercel-firewall 📖 docs: https://vercel.com/docs/security/vercel-firewall\n├── DDoS Protection (automatic, all plans)\n│ ⊃ Layer 3/4 mitigation\n│ ⊃ Layer 7 protection\n│ ⊃ 40x faster with stream processing\n│\n├── Web Application Firewall (WAF)\n│ ⊃ Custom rules engine (path, user-agent, IP, geo, JA4)\n│ ⊃ Framework-aware rules (no regex needed)\n│ ⊃ Managed rulesets (OWASP Top 10, Enterprise)\n│ ⊃ Rate limiting\n│ ⊃ Bot Filter (public beta, all plans)\n│ ⊃ Attack Challenge Mode\n│ ⊃ Persistent Actions (block repeat offenders)\n│ ⊃ Firewall API (programmatic control)\n│ ⊃ 300ms global propagation\n│\n└── Integrations\n ↔ Edge Network (embedded in request lifecycle)\n ↔ Vercel Observability (linked logs)\n ↔ Vercel REST API (Firewall API)\n\nSIGN IN WITH VERCEL ⤳ skill: sign-in-with-vercel 📖 docs: https://vercel.com/docs/security/sign-in-with-vercel\n├── OAuth 2.0 / OIDC Identity Provider\n│ ⊃ Authorization Code flow\n│ ⊃ ID tokens with user profile claims\n│ ⊃ Access tokens for Vercel API calls\n│\n└── Integrations\n ↔ Teams & Access Control (team-scoped auth)\n ↔ Vercel REST API (token exchange)\n ↔ Next.js (auth route handlers)\n\nAUTHENTICATION INTEGRATIONS ⤳ skill: auth\n├── Clerk (native Vercel Marketplace)\n│ ⊃ Auto-provisioned env vars\n│ ⊃ Middleware auth patterns\n│ ⊃ Pre-built UI components\n│\n├── Descope (Vercel Marketplace)\n│ ⊃ Passwordless / social login flows\n│ ⊃ Visual flow builder\n│\n├── Auth0\n│ ⊃ Enterprise SSO / SAML\n│ ⊃ Multi-tenant identity\n│\n└── Integrations\n ↔ Vercel Marketplace (provisioning)\n ↔ Next.js Middleware (route protection)\n ↔ Sign in with Vercel (Vercel OAuth)\n```\n\n---\n\n## 7. Observability\n\n```\nVERCEL OBSERVABILITY ⤳ skill: observability 📖 docs: https://vercel.com/docs/analytics\n├── Web Analytics\n│ ⊃ First-party, privacy-friendly\n│ ⊃ Custom events (Pro/Enterprise)\n│ ⊃ UTM parameters (Analytics Plus)\n│ ↔ Next.js (@vercel/analytics)\n│\n├── Speed Insights\n│ ⊃ Real user performance data\n│ ⊃ Core Web Vitals\n│ ↔ Next.js (@vercel/speed-insights)\n│\n├── Monitoring & Logs\n│ ⊃ Real-time infrastructure logs\n│ ⊃ Function runtime logs\n│ ⊃ Custom queries and visualizations\n│ ⤳ skill: investigation-mode\n│\n├── Vercel Drains (export observability data)\n│ ⊃ OpenTelemetry-compatible traces\n│ ⊃ Web analytics events\n│ ⊃ Speed Insights metrics\n│ → Datadog, Honeycomb, Grafana Tempo, New Relic\n│\n└── Integrations\n ↔ Vercel Firewall (security event logs)\n ↔ Vercel Functions (automatic tracing)\n ↔ Next.js (automatic instrumentation)\n```\n\n---\n\n## 8. CLI & API\n\n```\nVERCEL CLI (vercel / vc) ⤳ skill: vercel-cli 📖 docs: https://vercel.com/docs/cli\n├── Deployment\n│ ⊃ vercel / vercel deploy (preview deployment)\n│ ⊃ vercel --prod (production deployment)\n│ ⊃ vercel build (local build)\n│ ⊃ vercel deploy --prebuilt (deploy build output only)\n│ ⊃ vercel promote / vercel rollback\n│\n├── Development\n│ ⊃ vercel dev (local dev server)\n│ ⊃ vercel link (connect to Vercel project)\n│ ⊃ vercel pull (pull env vars and project settings)\n│\n├── Environment Variables\n│ ⊃ vercel env ls / add / rm / pull\n│ ⊃ Branch-scoped variables\n│ ⊃ Sensitive variables (write-only)\n│\n├── Marketplace Integrations\n│ ⊃ vercel integration add (install integration)\n│ ⊃ vercel integration list (list installed)\n│ ⊃ vercel integration open (open dashboard)\n│ ⊃ vercel integration remove (uninstall)\n│\n├── Other\n│ ⊃ vercel logs (view function logs)\n│ ⊃ vercel inspect (deployment details)\n│ ⊃ vercel domains (manage domains)\n│ ⊃ vercel certs (SSL certificates)\n│ ⊃ vercel dns (DNS records)\n│ ⊃ vercel teams (team management)\n│\n└── CI/CD Integration\n ⊃ VERCEL_TOKEN, VERCEL_ORG_ID, VERCEL_PROJECT_ID\n ↔ Any CI provider (GitHub Actions, Azure DevOps, etc.)\n\nVERCEL MCP SERVER (Official) ⤳ skill: vercel-api 📖 docs: https://vercel.com/docs/mcp\n├── URL: https://mcp.vercel.com\n│ ⊃ Streamable HTTP transport\n│ ⊃ OAuth 2.1 authentication (automatic)\n│ ⊃ Read-only in initial release (Beta)\n│\n├── MCP Tools\n│ ⊃ Search & navigate Vercel / Next.js / AI SDK docs\n│ ⊃ List & inspect projects and deployments\n│ ⊃ Query build logs and function invocation logs\n│ ⊃ List domains and environment variables\n│ ⊃ View team members and settings\n│\n├── Supported AI Clients\n│ ⊃ Codex, Cursor, VS Code (reviewed and approved clients)\n│\n└── Relationship to REST API\n → Uses Vercel REST API under the hood\n ↔ AI SDK MCP Client (@ai-sdk/mcp)\n\nVERCEL REST API / @vercel/sdk ⤳ skill: vercel-api 📖 docs: https://vercel.com/docs/rest-api\n├── Endpoint Categories\n│ ⊃ /v1/deployments — Create, list, inspect, cancel\n│ ⊃ /v1/projects — CRUD, environment variables, domains\n│ ⊃ /v1/teams — Members, billing, settings\n│ ⊃ /v1/domains — Register, configure, transfer\n│ ⊃ /v1/dns — Record management\n│ ⊃ /v1/certs — SSL certificate management\n│ ⊃ /v1/secrets — Secret management\n│ ⊃ /v1/integrations — Marketplace integration management\n│ ⊃ /v1/edge-config — Edge Config management\n│ ⊃ /v1/firewall — WAF rule management\n│\n├── SDK (@vercel/sdk)\n│ ⊃ TypeScript SDK for all API endpoints\n│ ⊃ vercel.deployments, vercel.projects, etc.\n│\n└── Authentication\n ⊃ Bearer Token (personal or team)\n ⊃ OAuth (for integrations)\n```\n\n---\n\n## 9. Marketplace\n\n```\nVERCEL MARKETPLACE ⤳ skill: marketplace 📖 docs: https://vercel.com/marketplace\n├── Categories\n│ ⊃ Databases (Neon, MongoDB, Supabase, PlanetScale)\n│ ⊃ CMS (Sanity, Contentful, Storyblok) ⤳ skill: cms\n│ ⊃ Auth (Clerk, Auth0)\n│ ⊃ Payments (Stripe) ⤳ skill: payments\n│ ⊃ Email (Resend) ⤳ skill: email\n│ ⊃ Feature Flags (LaunchDarkly, Statsig)\n│ ⊃ AI Agents (CodeRabbit, Corridor, Sourcery, Parallel)\n│ ⊃ Storage (Upstash Redis, Cloudinary)\n│ ⊃ Monitoring (Datadog, Sentry)\n│\n├── Features\n│ ⊃ Unified billing\n│ ⊃ One-click install\n│ ⊃ Auto-provisioned environment variables\n│ ⊃ CLI management (vercel integration add/list/open/remove)\n│\n└── Integration\n ↔ Vercel CLI (agent-friendly discovery)\n ↔ Vercel REST API (programmatic management)\n ↔ Environment Variables (auto-injected)\n```\n\n---\n\n## 10. Decision Matrix — When to Use What\n\n### Rendering Strategy\n| Need | Use | Why |\n|------|-----|-----|\n| Static content, rarely changes | SSG (`generateStaticParams`) | Fastest, cached at edge |\n| Static with periodic updates | ISR (`revalidate`) | Fresh enough, still fast |\n| Per-request dynamic data | SSR (Server Components) | Always fresh, streamed |\n| Mix of static shell + dynamic parts | Cache Components (`'use cache'`) | Best of both worlds |\n| Real-time interactive UI | Client Components | Full browser API access |\n\n### Data Mutations\n| Need | Use | Why |\n|------|-----|-----|\n| Form submissions, in-app mutations | Server Actions | Integrated with caching, progressive enhancement |\n| Public API, webhooks, large uploads | Route Handlers | REST semantics, streaming support |\n| Scheduled tasks | Cron Jobs + Serverless Functions | Reliable scheduling |\n\n### AI Features\n| Need | Use | Why |\n|------|-----|-----|\n| **Any AI feature (default)** | **AI Gateway** (`model: 'provider/model'`) | **Failover, cost tracking, observability — no provider API keys needed on Vercel** |\n| **Any streaming AI UI (default)** | **AI Elements** (`npx ai-elements`) + AI SDK `useChat` | **Handles UIMessage parts, streaming markdown, tool calls, reasoning — no manual rendering** |\n| **Any AI-generated text (mandatory)** | **AI Elements `{content}
` — it shows ugly `**`, `##`, `---`. Use `