Vercel AI SDK — Build AI-Powered Apps in TypeScript

You are an expert in the Vercel AI SDK, the TypeScript toolkit for building AIpowered applications. You help developers integrate LLMs (OpenAI, Anthropic, Google, Mistral, Ollama) with React Server Components, streaming UI, tool calling, structured output with Zod schemas, RAG pipelines, multistep agents, and edgecompa

概要

This skill provides expert guidance on the Vercel AI SDK, a specialized TypeScript toolkit designed for developing AI-driven applications. It facilitates the seamless integration of major large language models, including OpenAI, Anthropic, Google, and Mistral, into modern web frameworks. Key features covered include React Server Components, real-time streaming UI, and structured data output using Zod schemas. Part of the TerminalSkills/skills repository, this resource assists developers in implementing complex patterns such as Retrieval-Augmented Generation (RAG) pipelines and multi-step autonomous agents. By leveraging edge computing capabilities, it ensures high-performance AI interactions. The skill serves as a technical reference for managing tool calling and data processing within a TypeScript environment for building scalable AI interfaces.

ユースケース

Implementing real-time streaming AI responses within React Server Components.
Defining structured data outputs for LLMs using Zod schema validation.
Orchestrating multi-step AI agents with tool calling and RAG integration.

導入方法

# Review source first
open https://github.com/TerminalSkills/skills/blob/main/skills/ai-sdk/SKILL.md

Copy or clone the skill folder into your agent skills directory after reviewing its instructions and scripts.

セキュリティ

Users must ensure secure management of API keys for integrated LLM providers and validate all structured outputs generated by the SDK. Implementation should follow standard TypeScript security practices for edge computing environments as documented in the TerminalSkills/skills repository.

関連Skills

Claude API

anthropics/skills

コーディング

Claude API / Anthropic SDK のリファレンス — モデルID、料金、パラメータ、ストリーミング、ツール利用、MCP、エージェント、キャッシュ、トークン計測、モデル移行。 TRIGGER — ターゲットファイルを開いて BEFORE を読んでください。「1行だけに見える」という理由でスキップしないでください。プロンプトに Claude/Anthropic の名称(Claude, Anthropic, Fable, Opus, Sonnet, Haiku, `anthropic`, `@anthropic-ai`, `claude-*`, `us.anthropic.*`, `[1m]`)が含まれる場合、またはユーザーが LLM(料金/モデル選択/制限/キャッシュ)について質問した場合は、常に実行してください。決して回答しないでください。

Claude CodeClaude
typescriptpython
171,224 StarsApache-2.0

MCP Builder

anthropics/skills

コーディング

適切に設計されたツールを通じて、LLMが外部サービスと連携できるようにする高品質な MCP (Model Context Protocol) サーバーを作成するためのガイドです。Python (FastMCP) または Node/TypeScript (MCP SDK) を使用して、外部APIやサービスを統合する MCP サーバーを構築する際に使用します。

CodexClaude
typescriptpython
171,224 StarsApache-2.0

Skill Creator

anthropics/skills

コーディング

新しいスキルの作成、既存スキルの修正と改善、およびスキルパフォーマンスの測定を行います。ユーザーがスキルをゼロから作成、既存スキルの編集や最適化、スキルテストのための評価(evals)の実行、分散分析によるスキルパフォーマンスのベンチマーク、またはトリガー精度の向上のためのスキル説明の最適化を行いたい場合に使用します。

Claude CodeClaude
pythondesign
171,224 StarsApache-2.0

API And Interface Design

addyosmani/agent-skills

コーディング

安定した API とインターフェース設計をガイドします。API、モジュール境界、またはパブリックインターフェースの設計時に使用します。REST や GraphQL エンドポイントの作成、モジュール間の型コントラクトの定義、フロントエンドとバックエンドの境界設定を行う際に活用してください。

typescriptfrontend
89,319 StarsMIT

Browser Testing With Devtools

addyosmani/agent-skills

コーディング

Chrome DevTools MCP を介して実際のブラウザでテストを実行します。ブラウザで動作するものの構築やデバッグ時に使用します。DOM の検査、コンソールエラーのキャプチャ、ネットワークリクエストの分析、パフォーマンスのプロファイリング、または実際のランタイムデータによる視覚的出力の検証が必要な場合に使用してください。chrome-devtools MCP サーバーの設定が必要です。

Claude CodeClaude
javascriptreact
89,319 StarsMIT

Yeet

openai/plugins

コーディング

ローカルの変更をGitHubに公開します。スコープの確認、意図的なコミット、ブランチのプッシュを行い、このプラグインからGitHubアプリ経由でドラフトPRを作成します。コネクタの適用範囲が不十分な場合にのみ、`gh`をフォールバックとして使用します。

Codex
reviewgithub
5,188 StarsApache-2.0