New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Nextjs AI SDK

by johnku2011 in johnku2011/boilerplates-with-ai-skills

A skill your agent uses when adding chat routes, LLM tools, structured outputs, or streaming UI with the Vercel AI SDK in this Next.js AI app.

MITAuto-check: notesAI & LLM Engineering

Install Nextjs AI SDK

skills CLI
$ npx skills add johnku2011/boilerplates-with-ai-skills --skill nextjs-ai-sdk -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install johnku2011/boilerplates-with-ai-skills nextjs-ai-sdk --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/johnku2011/boilerplates-with-ai-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/boilerplates/nextjs-ai-app/skills/nextjs-ai-sdk .claude/skills/nextjs-ai-sdk && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
nextjs-ai-sdk
GitHub stars
240
Token cost
~446 tokens
SKILL.md length
211 words
Files
1
Skills in repo
18
Repo updated
First seen
Licence
MIT

At a glance

A skill your agent uses when adding chat routes, LLM tools, structured outputs, or streaming UI with the Vercel AI SDK in this Next.js AI app.

  • Works in 5 steps: Add or extend app/api/chat/route.ts with… → Define tools with Zod schemas in… → Prefer structured outputs… → …
  • Adding chat routes
  • SKILL.md covers Overview, Process, Guidelines and Anti-patterns
  • Calls npm; needs OPENAI_API_KEY

What it does

Nextjs AI SDK is an agent skill from johnku2011/boilerplates-with-ai-skills. Use when adding chat routes, LLM tools, structured outputs, or streaming UI with the Vercel AI SDK in this Next.js AI app.

Its SKILL.md is about 450 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts. Compatibility notes: Next.js App Router + AI SDK + Zod; requires OPENAIAPIKEY (or compatible provider env)

It sits in AI & LLM Engineering, covering Structured output and tool calling. It works with Vercel AI SDK, Next.js, npm and Zod. The licence is MIT.

When your agent uses it

  • Adding chat routes
  • Structured outputs
  • Streaming UI with the Vercel AI SDK in this Next.js AI app

Example prompts

  • “/nextjs-ai-sdk”

Requirements

  • A credential in OPENAI_API_KEY
  • Compatibility (from SKILL.md): Next.js App Router + AI SDK + Zod; requires OPENAI_API_KEY (or compatible provider env)
  • Pre-approved tools (allowed-tools): Read, Bash

Workflow steps

5 steps, taken from the first numbered list in SKILL.md.

  1. Add or extend app/api/chat/route.ts with streamText (or equivalent) — never
  2. Define tools with Zod schemas in lib/tools.ts (or colocated modules); return
  3. Prefer structured outputs (generateObject / schema) when the UI needs a
  4. Keep app/page.tsx (or chat UI) as a client leaf; pass messages to the API
  5. Verify with npm run typecheck and npm run build. Smoke the chat UI with

What it can do on your machine

Read from SKILL.md and the folder at commit 475dc6a. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves these tools, so the agent can use them without asking each time:

    • Read
    • Bash

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • npm

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use npm, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names these keys or tokens, usually read from environment variables:

    • OPENAI_API_KEY

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

  • Compatibility

    Next.js App Router + AI SDK + Zod; requires OPENAI_API_KEY (or compatible provider env)

    From compatibility in the SKILL.md frontmatter.

Context cost

Nextjs AI SDK loads about 446 tokens when it runs. Until then it costs about 34 tokens; SKILL.md has 211 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~34
When it runs · the whole SKILL.md, loaded when a task matches
~446

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check: notes

The automated check noted patterns worth knowing about, such as sudo or a known installer.

  • NotePre-approves every shell command (allowed-tools: Bash)SKILL.md
    allowed-tools: Read, Bash

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from johnku2011/boilerplates-with-ai-skills at commit 475dc6a, republished under its MIT licence (© johnku2011). 211 words, ~446 tokens.

Download SKILL.mdSave it as .claude/skills/nextjs-ai-sdk/SKILL.md (or your agent's skills folder).
name
nextjs-ai-sdk
description
Use when adding chat routes, LLM tools, structured outputs, or streaming UI with the Vercel AI SDK in this Next.js AI app.
allowed-tools
Read, Bash
compatibility
Next.js App Router + AI SDK + Zod; requires OPENAI_API_KEY (or compatible provider env)
license
MIT
metadata.stack
nextjs-ai

Next.js AI SDK

Overview

Build AI product features with the Vercel AI SDK: server route handlers for streaming, Zod-validated tool schemas, and thin client UI. Keep secrets and model calls on the server.

Process

  1. Add or extend app/api/chat/route.ts with streamText (or equivalent) — never call providers from client components with secret keys.
  2. Define tools with Zod schemas in lib/tools.ts (or colocated modules); return typed, small results agents/UI can render.
  3. Prefer structured outputs (generateObject / schema) when the UI needs a known shape instead of free-form prose.
  4. Keep app/page.tsx (or chat UI) as a client leaf; pass messages to the API route only.
  5. Verify with npm run typecheck and npm run build. Smoke the chat UI with npm run dev when changing streaming behavior.

Guidelines

  • Read OPENAI_API_KEY (or provider env) only on the server.
  • Validate all tool arguments with Zod; reject unknown keys.
  • Document model id and provider choice in code comments when non-default.
  • For browser QA of the chat UI, use the project Playwright MCP (see AGENTS.md).
  • Re-check secrets and data exposure with project-security before shipping.

Anti-patterns

  • Exposing API keys via NEXT_PUBLIC_*.
  • Untyped tool arguments or free-form JSON without a schema.
  • Doing privileged tool work in the browser.
  • Giant route handlers mixing UI strings, prompts, and business logic.

© johnku2011, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in boilerplates/nextjs-ai-app/skills/nextjs-ai-sdk of johnku2011/boilerplates-with-ai-skills.

Open the folder on GitHubat commit 475dc6a

Compare with similar skills

Nextjs AI SDK next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Nextjs AI SDK compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Nextjs AI SDK this skilljohnku2011/boilerplates-with-ai-skills240—~446Automated safety check: NotesMIT
AI SDKvercel-labs/ai-facts16821 repos~1.2kAutomated safety check: PassNone
Vercel AI SDK Expertmajiayu000/claude-skill-registry6663 repos~2.2kAutomated safety check: PassMIT
Adynato Web APImajiayu000/claude-skill-registry6661 repos~2kAutomated safety check: PassMIT
Mem0 Provider for Vercel AI SDKmem0ai/mem067k—~2.3kAutomated safety check: PassApache-2.0
AI SDK Developmenttrypostit/trypost6782 repos~3.5kAutomated safety check: PassMIT

Similar skills

  • AI SDK

    vercel-labs/ai-facts

    Official

    Answer questions about the AI SDK and help build AI-powered features.

    168 GitHub starsUsed in 21 repos~1.2k tokens
    AI & LLM EngineeringAuto-check passed

  • Vercel AI SDK Expert

    majiayu000/claude-skill-registry

    Expert in the Vercel AI SDK. An agent skill from majiayu000/claude-skill-registry.

    666 GitHub starsUsed in 3 repos~2.2k tokens
    AI & LLM EngineeringAuto-check passed

  • Adynato Web API

    majiayu000/claude-skill-registry

    Web API development conventions for Adynato projects. An agent skill from majiayu000/claude-skill-registry.

    666 GitHub starsUsed in 1 repo~2k tokens
    Backend & APIsAuto-check passed

  • Mem0 Provider for Vercel AI SDK

    mem0ai/mem0

    Adds persistent memory to Vercel AI SDK apps with the Mem0 provider, using a wrapped model or standalone retrieve and store utilities.

    67k GitHub stars~2.3k tokensUpdated yesterday
    AI & LLM EngineeringAuto-check passed

  • AI SDK Development

    trypostit/trypost

    TRIGGER when working with ai-sdk which is Laravel official first-party AI SDK.

    678 GitHub starsUsed in 2 repos~3.5k tokens
    AI & LLM EngineeringAuto-check passed

  • Add AI Chat Tool

    ryokun6/ryos

    Add or modify an AI chat tool ("Ask Ryo" capability) in ryOS.

    1.3k GitHub stars~2.2k tokensUpdated yesterday
    AI & LLM EngineeringAuto-check passed

More from johnku2011/boilerplates-with-ai-skills

All 18 skills in this repo

  • Project Security

    johnku2011/boilerplates-with-ai-skills

    A skill your agent uses when reviewing security-sensitive code paths — check auth, secrets, input validation, dependency risk, and data exposure before shipping.

    240 GitHub stars~650 tokensUpdated 1 mo ago
    Auto-check passed

  • Code Review

    johnku2011/boilerplates-with-ai-skills

    A skill your agent uses when reviewing a diff or pull request — check correctness, tests, readability, security, and server/client boundaries before approving.

    240 GitHub stars~708 tokensUpdated 1 mo ago
    Auto-check passed

  • Python API Design

    johnku2011/boilerplates-with-ai-skills

    A skill your agent uses when adding or changing FastAPI routes, dependencies, or tests in this Python service — keep endpoints typed, validated, and covered by pytest.

    240 GitHub stars~449 tokensUpdated 1 mo ago
    Auto-check passed

  • Bwai Advisor

    johnku2011/boilerplates-with-ai-skills

    Use before scaffolding a bwai project — runs the full startup-goal workflow then recommends the right boilerplate and outputs the exact bwai new command to run.

    240 GitHub stars~1.2k tokensUpdated 1 mo ago
    Auto-check passed

  • Deploy Vercel

    johnku2011/boilerplates-with-ai-skills

    A skill your agent uses when deploying or configuring this project on Vercel — env vars, build settings, serverless limits, and production checks for Next.js or Express.

    240 GitHub stars~660 tokensUpdated 1 mo ago
    Auto-check: notes

  • Express API Design

    johnku2011/boilerplates-with-ai-skills

    A skill your agent uses when adding or changing routes, middleware, or error handling in this Express.js API, to keep endpoints consistent, validated, and testable.

    240 GitHub stars~575 tokensUpdated 1 mo ago
    Auto-check passed

Works with

Categories

Questions about Nextjs AI SDK

What does Nextjs AI SDK do?

A skill your agent uses when adding chat routes, LLM tools, structured outputs, or streaming UI with the Vercel AI SDK in this Next.js AI app. Nextjs AI SDK is an agent skill from johnku2011/boilerplates-with-ai-skills.js AI app.

When should I use Nextjs AI SDK?

Nextjs AI SDK fits situations like: adding chat routes; structured outputs; streaming UI with the Vercel AI SDK in this Next.js AI app.

How do I install Nextjs AI SDK in Claude Code?

Run `npx skills add johnku2011/boilerplates-with-ai-skills --skill nextjs-ai-sdk -a claude-code`. Or copy the skill folder (boilerplates/nextjs-ai-app/skills/nextjs-ai-sdk in johnku2011/boilerplates-with-ai-skills) into .claude/skills/nextjs-ai-sdk in your project. Claude Code loads it when a task matches its description.

How do I install Nextjs AI SDK in Codex?

Run `npx skills add johnku2011/boilerplates-with-ai-skills --skill nextjs-ai-sdk -a codex`. Or copy the skill folder (boilerplates/nextjs-ai-app/skills/nextjs-ai-sdk in johnku2011/boilerplates-with-ai-skills) into .agents/skills/nextjs-ai-sdk in your project. Codex loads it when a task matches its description.

Can I use Nextjs AI SDK in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add johnku2011/boilerplates-with-ai-skills --skill nextjs-ai-sdk -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/nextjs-ai-sdk, .gemini/skills/nextjs-ai-sdk, .github/skills/nextjs-ai-sdk and .opencode/skills/nextjs-ai-sdk in your project.

What does Nextjs AI SDK need to run?

Going by SKILL.md and its folder, Nextjs AI SDK needs the command-line tools its instructions call (npm) and credentials named OPENAI_API_KEY. Our summary lists: A credential in OPENAI_API_KEY. Its frontmatter pre-approves these tools: Read, Bash. Compatibility (from SKILL.md): Next.js App Router + AI SDK + Zod; requires OPENAI_API_KEY (or compatible provider env).

Does Nextjs AI SDK access the network?

SKILL.md contains no URLs. Its commands use npm, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Nextjs AI SDK safe to install?

Our automated static check of SKILL.md found notes only (pre-approves every shell command (allowed-tools: bash)), nothing it rates as a warning. It is not a guarantee. Review the folder before installing.

What licence does Nextjs AI SDK use?

Nextjs AI SDK is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Nextjs AI SDK use?

About 446 tokens (SKILL.md is roughly 1.8k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Nextjs AI SDK?

Skills that share tags, products or a category with Nextjs AI SDK: AI SDK (vercel-labs/ai-facts, 168 stars), Vercel AI SDK Expert (majiayu000/claude-skill-registry, 666 stars), Adynato Web API (majiayu000/claude-skill-registry, 666 stars) and Mem0 Provider for Vercel AI SDK (mem0ai/mem0, 67k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Nextjs AI SDK?

johnku2011 (a GitHub user) maintains it in johnku2011/boilerplates-with-ai-skills, which has 240 GitHub stars. The repository holds 18 skills in this directory. The repository was last updated on August 24, 2026.

Source: johnku2011/boilerplates-with-ai-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.