ai-sdk-handler

Integrate Vercel AI SDK for LLMs, Chatbots, Generative UI, and Agentic Workflows.

242 stars

Best use case

ai-sdk-handler is best used when you need a repeatable AI agent workflow instead of a one-off prompt. It is especially useful for teams working in multi. Integrate Vercel AI SDK for LLMs, Chatbots, Generative UI, and Agentic Workflows.

Integrate Vercel AI SDK for LLMs, Chatbots, Generative UI, and Agentic Workflows.

Users should expect a more consistent workflow output, faster repeated execution, and less time spent rewriting prompts from scratch.

Practical example

Example input

Use the "ai-sdk-handler" skill to help with this workflow task. Context: Integrate Vercel AI SDK for LLMs, Chatbots, Generative UI, and Agentic Workflows.

Example output

A structured workflow result with clearer steps, more consistent formatting, and an output that is easier to reuse in the next run.

When to use this skill

  • Use this skill when you want a reusable workflow rather than writing the same prompt again and again.

When not to use this skill

  • Do not use this when you only need a one-off answer and do not need a reusable workflow.
  • Do not use it if you cannot install or maintain the related files, repository context, or supporting tools.

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/ai-sdk-handler/SKILL.md --create-dirs "https://raw.githubusercontent.com/aiskillstore/marketplace/main/skills/aayushbaniya2006/ai-sdk-handler/SKILL.md"

Manual Installation

  1. Download SKILL.md from GitHub
  2. Place it in .claude/skills/ai-sdk-handler/SKILL.md inside your project
  3. Restart your AI agent — it will auto-discover the skill

How ai-sdk-handler Compares

Feature / Agentai-sdk-handlerStandard Approach
Platform SupportNot specifiedLimited / Varies
Context Awareness High Baseline
Installation ComplexityUnknownN/A

Frequently Asked Questions

What does this skill do?

Integrate Vercel AI SDK for LLMs, Chatbots, Generative UI, and Agentic Workflows.

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.

SKILL.md Source

# AI SDK Handler

This skill defines how to implement Large Language Model (LLM) features using the Vercel AI SDK. It covers streaming chat, structured object generation, generative UI, and background agents.

**Note**: For Image/Video generation (Replicate, Fal.ai), continue to use `ai-handler`. Use `ai-sdk-handler` specifically for text, chat, and agentic text/JSON workflows.

## When to Use
- **Chatbots**: Building interactive chat interfaces (`useChat`, `streamText`).
- **Structured Data**: Extracting JSON from text (`generateObject`).
- **Generative UI**: Streaming React components directly from the server (`streamUI`).
- **Agents**: Complex, multi-step reasoning tasks (often combined with Inngest).
- **Multimodal**: Handling image inputs with text.

## Capabilities

### 1. Streaming Chat
- **Tool**: `streamText` (Server), `useChat` (Client).
- **Pattern**: Create a route handler at `src/app/api/chat/route.ts`.
- **Auth**: Wrap with `withAuthRequired` to protect the route.
- **UI**: Use `src/components/chat-ui/` for chat components.

### 2. Generative UI (RSC)
- **Tool**: `streamUI` (Server).
- **Pattern**: Return React components based on tool calls.
- **Use Case**: Dashboards that build themselves, dynamic reports.

### 3. Structured Object Generation
- **Tool**: `generateObject`.
- **Pattern**: Define a Zod schema and get strictly typed JSON back.
- **Use Case**: Populating database forms, extracting itinerary details, categorizing content.

### 4. Background Agents (with Inngest)
- **Tool**: `generateText` / `generateObject` inside Inngest steps.
- **Why**: Next.js Server Actions/Routes have timeouts (max 60s usually). Agents taking longer must run in the background.
- **Pattern**:
    1. Trigger Inngest event from UI.
    2. Inngest function runs the LLM logic (loops, multi-step).
    3. Store result in DB or notify user.
    4. **Docs**: [AI SDK Agents](https://ai-sdk.dev/docs/agents/overview).

## Best Practices

1.  **Streaming**: Always prefer streaming for text generation > 2 seconds to improve perceived latency.
2.  **Auth**: Never expose open AI routes. Always verify `session.user.id`.
3.  **Providers**: Use `@ai-sdk/openai` or `@ai-sdk/anthropic`. Abstract the provider configuration in `src/lib/ai/index.ts`.
4.  **Backpressure**: The AI SDK handles this automatically in `streamText`.
5.  **Caching**: Use `unstable_cache` or KV stores if queries are repetitive.
6.  **Prompt Engineering**: Keep prompts in a dedicated folder or constant file if they are complex.

## Documentation & Examples

-   **`reference.md`**: Core setup and essential code snippets.
-   **`examples.md`**: Exhaustive examples covering:
    1.  Basic Chat
    2.  Generative UI
    3.  Structured Object Generation
    4.  Agents & Workflows (Loop Control)
    5.  Caching
    6.  Streaming Data
    7.  Reading UI Streams
    8.  Handling Backpressure
    9.  Multimodal Chat

Related Skills

error-handler-advisor

242
from aiskillstore/marketplace

Proactively reviews error handling patterns and suggests improvements using Result types, proper error propagation, and idiomatic patterns. Activates when users write error handling code or use unwrap/expect.

ui-handler

242
from aiskillstore/marketplace

Implement UI using Shadcn MCP (atoms/theme) and 21st.dev MCP (complex sections). Use when adding buttons, layouts, or generating landing pages.

theme-handler

242
from aiskillstore/marketplace

Manage and update application themes using shadcn and tweakcn.

stripe-handler

242
from aiskillstore/marketplace

Handle Stripe payments, custom checkouts, and webhook fulfillment outside of standard plans/credits.

seo-handler

242
from aiskillstore/marketplace

Manage SEO, sitemaps, and metadata for optimal search engine visibility

s3-upload-handler

242
from aiskillstore/marketplace

Handle S3 file uploads including UI components, client-side logic, and server-side processing

replicate-handler

242
from aiskillstore/marketplace

Integrate with Replicate AI for running models (image generation, LLMs, etc.).

plate-handler

242
from aiskillstore/marketplace

Implement rich text editors using Plate.js. Supports creating both simple (comment/chat) and detailed (document/blog) editors.

plans-handler

242
from aiskillstore/marketplace

Manage subscription plans, pricing, and quotas. Use when adding plan features, updating limits, or building pricing pages.

inngest-handler

242
from aiskillstore/marketplace

Create and manage Inngest functions for reliable background jobs, workflows, and scheduled tasks.

env-handler

242
from aiskillstore/marketplace

Manage environment variables securely. Handles distinction between .env (template) and .env.local (secrets).

email-handler

242
from aiskillstore/marketplace

Create and send transactional emails using React Email. Covers templates, layout integration, and sending logic.