Vercel Ai Sdk

Vercel AI SDK Plugin

Modular Vercel AI SDK development plugin with feature bundles and specialized agents. Build AI applications incrementally or all-at-once.

Overview

This plugin helps you build Vercel AI SDK applications using two approaches:

Incremental Approach (Modular)

1. Create minimal scaffold with /vercel-ai-sdk:new-app
2. Add core features one-by-one (streaming, tools, chat)
3. Add feature bundles as needed (UI, data, production, advanced)

Full-Stack Approach (All-at-Once)

1. Run /vercel-ai-sdk:build-full-stack
2. Answer a few questions
3. Get a complete production-ready app with all features

Why This Architecture?

• Manageable: Feature bundles group related capabilities (4-7 URLs each)
• Flexible: Add only what you need, or build everything at once
• Specialized Agents: Each feature bundle has a dedicated agent that fetches docs as needed
• Framework Agnostic: Works with Next.js, React, Node.js, Python, etc.

Commands

1. /vercel-ai-sdk:new-app [project-name]

Purpose: Create initial Vercel AI SDK project scaffold

What it does:

• Creates project directory and initializes framework
• Installs ai package + one AI provider
• Sets up environment variables
• Creates minimal working example
• NO features - just basic structure

Fetches: 4 URLs (intro, foundations, getting-started, provider)

Example:

/vercel-ai-sdk:new-app my-chatbot

Then asks:

• Language? (TypeScript, JavaScript, Python)
• Framework? (Next.js, React, Node.js, etc.)
• AI Provider? (OpenAI, Anthropic, Google, xAI)

Creates: Working scaffold ready for features

---

2. /vercel-ai-sdk:add-streaming

Purpose: Add text streaming capability

What it does:

• Detects your framework
• Adds streamText() or useChat() hook
• Creates streaming example
• Verifies TypeScript compilation

Fetches: 3 URLs (streaming docs)

Use when: You want real-time AI responses

---

3. /vercel-ai-sdk:add-tools

Purpose: Add tool/function calling

What it does:

• Creates tool schemas (with zod)
• Implements tool handlers
• Adds 1-2 example tools
• Integrates with existing AI calls

Fetches: 3 URLs (tools docs)

Use when: AI needs to call your functions

---

4. /vercel-ai-sdk:add-chat

Purpose: Add chat UI with message persistence

What it does:

• Creates chat interface components
• Adds useChat() hook (or framework equivalent)
• Implements message persistence
• Creates API route/endpoint
• Adds styling

Fetches: 3 URLs (chatbot UI docs)

Use when: Building a chat application

---

5. /vercel-ai-sdk:add-provider

Purpose: Add another AI provider

What it does:

• Installs provider package
• Updates environment variables
• Shows how to use new provider
• Documents how to switch providers

Fetches: 2 URLs (provider docs)

Use when: Want to use multiple AI providers

---

Feature Bundle Commands

These commands add multiple related features at once using specialized agents:

6. /vercel-ai-sdk:add-ui-features

Purpose: Add advanced UI capabilities

What it does (via vercel-ai-ui-agent):

• Generative UI with AI SDK RSC (Next.js App Router)
• useObject hook for structured outputs in UI
• useCompletion hook for text completion
• Message persistence with database integration
• File attachments and multi-modal support
• Message metadata and resume streams

Fetches: 5-9 URLs (fetched progressively by agent as needed)

Use when: Need advanced UI features beyond basic chat

---

7. /vercel-ai-sdk:add-data-features

Purpose: Add AI-powered data processing

What it does (via vercel-ai-data-agent):

• Embeddings generation with embed() and embedMany()
• Vector database integration (Pinecone, Weaviate, Chroma, pgvector)
• RAG pipeline with document chunking and retrieval
• Structured data generation with generateObject/streamObject
• Semantic search functionality

Fetches: 4-9 URLs (fetched progressively by agent)

Use when: Building knowledge bases, RAG systems, or semantic search

---

8. /vercel-ai-sdk:add-production

Purpose: Make your app production-ready

What it does (via vercel-ai-production-agent):

• Telemetry/observability with OpenTelemetry
• Rate limiting (Redis/Upstash or edge-based)
• Comprehensive error handling patterns
• Testing infrastructure with mocks (>80% coverage goal)
• Middleware for auth, validation, logging

Fetches: 5-10 URLs (fetched progressively by agent)

Use when: Preparing for production deployment

---

9. /vercel-ai-sdk:add-advanced

Purpose: Add cutting-edge AI capabilities

What it does (via vercel-ai-advanced-agent):

• AI agents with workflows and loop control
• MCP (Model Context Protocol) tools integration
• Image generation (DALL-E, Fal AI)
• Audio transcription (Whisper)
• Text-to-speech synthesis
• Multi-step reasoning patterns

Fetches: 6-15 URLs (fetched progressively by agent)

Use when: Building autonomous agents or multi-modal features

---

10. /vercel-ai-sdk:build-full-stack

Purpose: Build complete production app from scratch

What it does: Chains all commands together sequentially:

1. Creates scaffold (new-app)
2. Adds core features (add-streaming, add-tools, add-chat)
3. Adds UI features (add-ui-features)
4. Adds data features (add-data-features)
5. Adds production features (add-production)
6. Optionally adds advanced features (add-advanced)

Fetches: 0 URLs (delegates to other commands which call agents)

Use when: Want a complete app with everything configured

---

Agents

Core Commands Agents (Verifiers)

These agents validate your Vercel AI SDK setup after core commands:

• vercel-ai-verifier-ts: TypeScript project verification
• vercel-ai-verifier-js: JavaScript project verification
• vercel-ai-verifier-py: Python project verification

What they check:

• SDK installation and versions
• Configuration files (package.json, tsconfig.json)
• Proper SDK usage patterns
• Type safety (for TypeScript)
• Environment setup
• Security (no hardcoded API keys)
• Best practices from official docs

Invoked automatically by core commands after setup.

---

Feature Bundle Agents (Specialized)

These agents implement feature bundles and fetch documentation progressively:

vercel-ai-ui-agent

• Handles all UI features (generative UI, useObject, persistence, attachments)
• Fetches UI-specific docs as needed across 5 phases
• Adapts to framework (Next.js, React, etc.)
• Implements database integration for persistence

vercel-ai-data-agent

• Handles data features (embeddings, RAG, structured data)
• Fetches data/vector DB docs progressively
• Designs vector database schemas
• Implements RAG pipelines and semantic search

vercel-ai-production-agent

• Handles production readiness (telemetry, rate limiting, testing)
• Fetches production docs progressively
• Sets up monitoring and observability
• Implements comprehensive testing

vercel-ai-advanced-agent

• Handles advanced features (agents, MCP, image/audio generation)
• Fetches advanced docs progressively
• Designs agent workflows with loop control
• Implements multi-modal capabilities

Key Feature: All specialized agents spread WebFetch calls across phases instead of loading all docs upfront, making documentation fetching more manageable.

---

Workflow Examples

Incremental Build (Modular)

# Step 1: Create scaffold (TypeScript + Next.js + OpenAI)
/vercel-ai-sdk:new-app my-ai-app

# Step 2: Add streaming
/vercel-ai-sdk:add-streaming

# Step 3: Add tool calling
/vercel-ai-sdk:add-tools

# Step 4: Add chat UI
/vercel-ai-sdk:add-chat

# Step 5: Add Anthropic provider
/vercel-ai-sdk:add-provider

Result: Full-featured AI chat app with streaming, tools, and multi-provider support!

Full-Stack Build (All-at-Once)

# One command to build everything
/vercel-ai-sdk:build-full-stack my-complete-app

Then answer:

• Project name?
• Framework? (Next.js, React, Node.js, etc.)
• AI Provider? (OpenAI, Anthropic, etc.)
• Want all features or subset?

Result: Production-ready app with:

• ✅ Core features (streaming, tools, chat)
• ✅ Advanced UI (generative UI, useObject, persistence)
• ✅ Data features (embeddings, RAG, structured data)
• ✅ Production ready (telemetry, rate limiting, testing)
• ✅ Advanced features (agents, MCP, image/audio) - optional

Feature Bundle Build (Targeted)

# Start with basics
/vercel-ai-sdk:new-app my-app
/vercel-ai-sdk:add-streaming

# Add only what you need
/vercel-ai-sdk:add-ui-features       # Advanced UI
/vercel-ai-sdk:add-data-features     # RAG & embeddings
/vercel-ai-sdk:add-production        # Production readiness

Result: Targeted app with only the features you need!

---

Supported Frameworks

Frontend/Fullstack

• Next.js (App Router or Pages Router)
• React (with Vite)
• Svelte (with SvelteKit)
• Vue (with Nuxt)

Backend

• Node.js (Express, Fastify, or standalone)
• Python (FastAPI, Flask)

All commands detect your framework and adapt accordingly.

---

Supported AI Providers

• OpenAI (GPT-4, GPT-3.5)
• Anthropic (Claude)
• Google (Gemini)
• xAI (Grok)
• Azure (OpenAI on Azure)
• Amazon Bedrock
• Groq
• Mistral
• DeepSeek
• Cohere
• Fireworks

Add providers incrementally with /vercel-ai-sdk:add-provider

---

Key Features

✅ Two Build Modes: Incremental (modular) or all-at-once (full-stack) ✅ Feature Bundles: Related features grouped together (UI, Data, Production, Advanced) ✅ Specialized Agents: Each bundle has a dedicated agent that fetches docs progressively ✅ Framework Agnostic: Works with Next.js, React, Node.js, Python, etc. ✅ Progressive Doc Fetching: Agents spread WebFetch calls across phases (not all upfront) ✅ Auto-Verification: Verifier agents check your setup after core commands ✅ Multi-Provider: Easily switch between OpenAI, Anthropic, Google, xAI, etc. ✅ Production Ready: Includes telemetry, rate limiting, testing, error handling ✅ Best Practices: Follows official Vercel AI SDK documentation ✅ Scalable Architecture: 10 commands, 7 agents (instead of 30+ commands)

---

Resources

Official Documentation

• Vercel AI SDK: https://ai-sdk.dev/docs
• Getting Started: https://ai-sdk.dev/docs/getting-started
• API Reference: https://ai-sdk.dev/docs/reference
• Providers: https://ai-sdk.dev/providers

Templates & Examples

• Templates: https://vercel.com/templates?type=ai
• Chatbot Starter: https://vercel.com/templates/next.js/nextjs-ai-chatbot
• RAG Template: https://vercel.com/templates/next.js/ai-sdk-internal-knowledge-base
• Multi-Modal Chat: https://vercel.com/templates/next.js/multi-modal-chatbot

Cookbook

• All Guides: https://ai-sdk.dev/cookbook
• RAG Agent: https://ai-sdk.dev/cookbook/guides/rag-chatbot
• SQL Agent: https://ai-sdk.dev/cookbook/guides/natural-language-postgres
• Computer Use Agent: https://ai-sdk.dev/cookbook/guides/computer-use
• Slackbot Agent: https://ai-sdk.dev/cookbook/guides/slackbot

Framework Examples

• Next.js: https://github.com/vercel/ai/tree/main/examples/next-openai
• Nuxt: https://github.com/vercel/ai/tree/main/examples/nuxt-openai
• SvelteKit: https://github.com/vercel/ai/tree/main/examples/sveltekit-openai

Agents (Advanced)

• Building Agents: https://ai-sdk.dev/docs/agents/building-agents
• Workflow Patterns: https://ai-sdk.dev/docs/agents/workflows
• Loop Control: https://ai-sdk.dev/docs/agents/loop-control

---

Installation

This plugin is part of the ai-dev-marketplace. Install via:

# Clone the marketplace
git clone https://github.com/vanman2024/ai-dev-marketplace.git

# The plugin is in plugins/vercel-ai-sdk/

Or install as a standalone Claude Code plugin (if published to marketplace).

---

Version

Current Version: 1.0.0

SDK Compatibility: Vercel AI SDK v5+ (beta 6 coming soon)

Note: Vercel AI SDK is moving fast. Commands fetch latest docs dynamically to stay current.

---

Contributing

Contributions welcome! This plugin is part of:

• Repository: https://github.com/vanman2024/ai-dev-marketplace
• Plugin Directory: plugins/vercel-ai-sdk/

---

License

MIT License - see LICENSE file

---

Built with the domain-plugin-builder framework