Mmcp.market

ai-sdk skill

by laguagu·laguagu/claude-code-nextjs-skills·67 stars·MIT

Answer questions about the AI SDK and help build AI-powered features. Use when developers ask about Vercel AI SDK, generateText, streamText, ToolLoopAgent, useChat, providers, tools, structured output, embeddings, streaming, or adding AI to an app. First identify the installed major version and route version-specific work: use ai-sdk-7 for AI SDK 7 features/migrations such as WorkflowAgent, HarnessAgent, reasoning, runtime/tools context, toolApproval, telemetry, realtime, or v6-to-v7 upgrades; use ai-sdk-6 for v6 code.

A100/100content scan

Is the ai-sdk skill safe?

Clean: nothing in its files matched our rules. We read 6 files in the folder on 2026-09-28.

No findings.

Install the ai-sdk skill

A skill is a folder. Copy it into your agent's skills folder and the agent loads it when the task matches its description. 

git clone --depth 1 https://github.com/laguagu/claude-code-nextjs-skills.git /tmp/claude-code-nextjs-skills
mkdir -p ~/.claude/skills
cp -r /tmp/claude-code-nextjs-skills/skills/ai-sdk ~/.claude/skills/ai-sdk
available in every project

In the Claude apps, zip the folder and upload it from the Skills settings. The folder on GitHub

The instructions your agent would load

SKILL.md as published, without the frontmatter. Read it on GitHub

Prerequisites

Before searching docs, check the installed major version in package.json, lockfiles, or node_modules/ai/package.json.

clear. If starting fresh or no version is pinned, assume the current line (AI SDK 7) and use ai-sdk-7.

  • AI SDK 7 implementation or migration work -> use ai-sdk-7.
  • AI SDK 6 implementation work -> use ai-sdk-6.
  • Unknown or mixed versions -> continue with this skill until the version is

Check installed docs before fetching online. If dependencies are not installed, restore the existing lockfile with the project's package manager when installation is needed. Do not add or upgrade ai merely to read documentation.

In a monorepo, resolve ai from the relevant app/workspace. Hoisting and nodemodules layout depend on package-manager configuration; Yarn PnP may not have nodemodules. Check app-local paths or use the version-matched online docs.

Critical: Do Not Trust Internal Knowledge

AI SDK APIs differ between major versions. Verify the installed API before applying remembered patterns.

When working with the AI SDK:

  1. Identify the project dependency version and available docs (see Prerequisites)
  2. Identify the installed major version and use ai-sdk-7 or ai-sdk-6 for deep version-specific work
  3. Search nodemodules/ai/docs/ and nodemodules/ai/src/ for current APIs
  4. If not found locally, search ai-sdk.dev documentation (instructions below)
  5. Never rely on memory - always verify against source code or docs
  6. useChat has changed significantly - check Common Errors before writing client code
  7. Always fetch current model IDs - Never use model IDs from memory. A public catalog of current IDs across providers is available at https://ai-gateway.vercel.sh/v1/models — useful purely for discovery, not a recommendation to use Gateway as a runtime provider. Example: curl -s https://ai-gateway.vercel.sh/v1/models | jq -r '[.data[] | select(.id | startswith("anthropic/")) | .id] | reverse | .[]' (swap anthropic/ for openai/, google/, etc.). Pick the model family/tier by capability, cost, and latency requirements; within the chosen family, use the latest version from the catalog (e.g. prefer claude-sonnet-5 over an older claude-sonnet-4-x) — version number alone is not a selection criterion across families.
  8. Run typecheck after changes to ensure code is correct
  9. Be minimal - Only specify options that differ from defaults. When unsure of defaults, check docs or source rather than guessing or over-specifying.

If you cannot find documentation to support your answer, state that explicitly.

Finding Documentation

ai@6.0.34+ and ai@7+

Search bundled docs and source in node_modules/ai/:

  • Docs: grep "query" node_modules/ai/docs/
  • Source: grep "query" node_modules/ai/src/

Provider packages include docs at node_modules/@ai-sdk//docs/.

For v7-specific features such as WorkflowAgent, HarnessAgent, tool context, reasoning, telemetry, realtime, video, or v6-to-v7 migration, read the ai-sdk-7 skill after confirming the installed major version.

Earlier versions or missing local docs

  1. Search: https://ai-sdk.dev/api/search-docs?q=your_query
  2. Fetch .md URLs from results (e.g., https://ai-sdk.dev/docs/agents/building-agents.md)

Working examples

For runnable provider × feature examples (Anthropic cache-control, OpenAI computer-use, Google grounding, etc.), see examples.md. Fetch individual files on demand via WebFetch or gh api — do not clone the repo.

When Typecheck Fails

Before searching source code, grep Common Errors for the failing property or function name. Many type errors are caused by deprecated APIs documented there.

If not found in common-errors.md:

  1. Search nodemodules/ai/src/ and nodemodules/ai/docs/
  2. Search ai-sdk.dev (for earlier versions or if not found locally)

Building and Consuming Agents

Creating Agents

Use the agent pattern that matches the installed major version and task:

  • v6/v7 in-memory agent loops: ToolLoopAgent
  • v7 durable workflow-backed agents: WorkflowAgent from @ai-sdk/workflow
  • v7 external coding/runtime harnesses: HarnessAgent from @ai-sdk/harness/agent

Search node_modules/ai/docs/ for current agent creation APIs before writing code.

File conventions: See type-safe-agents.md for where to save agents and tools.

Type Safety: When consuming agents with useChat, always use InferAgentUIMessage for type-safe tool results. See reference.

Consuming Agents (Framework-Specific)

Before implementing agent consumption:

  1. Check package.json to detect the project's framework/stack
  2. Search documentation for the framework's quickstart guide
  3. Follow the framework-specific patterns for streaming, API routes, and client integration

References

  • Common Errors - Renamed parameters reference (parameters → inputSchema, etc.)
  • Type-Safe Agents with useChat - End-to-end type safety with InferAgentUIMessage
  • DevTools - Local debugging and observability (development only)
  • Canonical Examples - Provider × feature working code from vercel/ai/examples

Related Skills

  • ai-sdk-7 - AI SDK 7 development, HarnessAgent, WorkflowAgent, telemetry, realtime, video, and v6-to-v7 migration
  • ai-sdk-6 - AI SDK 6 development with ToolLoopAgent, Output patterns, MCP, middleware, tools, and UI hooks

More skills from laguagu/claude-code-nextjs-skills

  • Aai-appFull-stack AI application generator with Next.js, AI SDK, and ai-elements. Use when creating chatbots, agent dashboards, or custom AI applications.
  • Aai-elementsBuild AI chat interfaces with pre-built shadcn-style components (Message, Conversation, PromptInput, Reasoning, Sources, Tool, Artifact, CodeBlock, Suggestion, Task, Image, ChainOfThought, InlineCitation, WebPreview, Checkpoint, Plan, Queue, ModelSelector, and more). Use when adding AI chat UI to a Next.js + AI SDK app, installing AI Elements components via the CLI (`bun x ai-elements@latest add message` or `npx shadcn@latest add @ai-elements/message`), composing message displays with markdown, building prompt inputs with attachments, or rendering streaming reasoning and tool output.
  • Aai-sdk-6Vercel AI SDK v6 development, for projects already on ai@6. Use when building or maintaining AI agents, chatbots, tool integrations, streaming apps, or structured output in a v6 codebase. New projects and ai@7 code use ai-sdk-7; an unknown version goes through ai-sdk. Covers ToolLoopAgent, useChat, generateText, streamText, tool approval, smoothStream, provider tools, MCP integration, and Output patterns.
  • Aai-sdk-7Vercel AI SDK v7 development and migration. Use when building or upgrading AI SDK 7 apps, especially ToolLoopAgent, WorkflowAgent, HarnessAgent, Claude Code/Codex/Pi harnesses, runtimeContext, toolsContext, toolApproval, telemetry, reasoning, file or skill uploads, realtime, video generation, or v6-to-v7 breaking changes. For AI SDK v6 code use ai-sdk-6; for version discovery and general doc lookup use ai-sdk.
  • Acache-componentsExpert guidance for Next.js Cache Components and Partial Prerendering (PPR). Use when implementing 'use cache' directive, configuring cache lifetimes with cacheLife(), tagging cached data with cacheTag(), invalidating caches with updateTag()/revalidateTag(), optimizing static vs dynamic content boundaries, instant navigation validation, 'use cache: private', pass-through/interleaving patterns, GET Route Handler caching, debugging cache issues, and reviewing Cache Component implementations.
  • Achrome-devtoolsTests in real browsers via Chrome DevTools MCP. Use when building or debugging anything that runs in a browser. Use when you need to inspect the DOM, capture console errors, analyze network requests, profile performance (LCP/CLS/INP), or verify visual output with real runtime data. Complements Playwright — use this for live debugging and performance work, Playwright for stable E2E test suites.
  • Afrontend-designGuidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
  • AgoOpens the running app in a browser and verifies that recent UI changes actually work. Use for any quick smoke test of recent work — "go", "test in browser", "check in browser", "make sure it works", "verify it works", "did it work", "works on mobile" — including when the user appends "...and make sure it works" to a UI request. For design critique, use go-ui or web-design-guidelines.
  • AhandoffWrite or update a HANDOFF.md so a fresh agent can continue this work. Use when the user says "handoff", "compact this", "context is full", or "/clear and continue".
  • Chetzner-cloudManage Hetzner Cloud infrastructure with the `hcloud` CLI — servers, networks, firewalls, load balancers, volumes, DNS zones, SSH keys, primary/floating IPs, snapshots, certificates, placement groups, storage boxes. Use whenever the user mentions Hetzner, hcloud, VPS provisioning, or Hetzner location codes (fsn1, hel1, nbg1, ash, hil, sin) — even if they don't say "hcloud". CLI-only; does NOT cover Hetzner Robot (dedicated servers, separate product and API).
  • AiconsFind, fetch, and install the right icon or logo from the right source — brand marks, country flags, file-type icons (PDF, DOCX, ZIP), and UI glyphs — and keep them visually consistent with the app. Use when the project's icon library has no match, when svgl comes up empty, or when the user asks for a flag, a file-type badge, a brand logo, or just "an icon for X". Covers the Iconify search API (200k+ icons across flags, file types, logos and UI sets), the svgl shadcn registry for full-colour brand logos, family and stroke-weight matching so a borrowed icon does not look pasted in, and fallback sources when neither Iconify nor svgl has the mark. Triggers on "add an icon", "country flag", "flag icon", "PDF icon", "file type icon", "brand logo", "sign in with Google/GitHub", "language switcher", "svgl", "iconify", "find an icon". For overall visual direction rather than sourcing one specific mark, use frontend-design; for installing shadcn components generally, use shadcn.
  • Anext-best-practicesNext.js App Router best practices covering file conventions, RSC boundaries, async APIs, data patterns, hydration errors, metadata, route handlers, image/font optimization, and bundling. Use when writing or reviewing Next.js code to prevent hydration errors, RSC violations, data waterfalls, and configuration mistakes.

All agent skills → · MCP servers