jpskill.com
🛠️ 開発・MCP コミュニティ

ai-sdk-handler

Vercel AI SDKを活用し、LLM、チャットボット、生成AIインターフェース、自律型ワークフローなどを組み込み、ビジネス課題を解決するAIアプリケーションを開発・運用するSkill。

📜 元の英語説明(参考)

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

🇯🇵 日本人クリエイター向け解説

一言でいうと

Vercel AI SDKを活用し、LLM、チャットボット、生成AIインターフェース、自律型ワークフローなどを組み込み、ビジネス課題を解決するAIアプリケーションを開発・運用するSkill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux 
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o ai-sdk-handler.zip https://jpskill.com/download/16897.zip && unzip -o ai-sdk-handler.zip && rm ai-sdk-handler.zip
🪟 Windows (PowerShell) 
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/16897.zip -OutFile "$d\ai-sdk-handler.zip"; Expand-Archive "$d\ai-sdk-handler.zip" -DestinationPath $d -Force; ri "$d\ai-sdk-handler.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して ai-sdk-handler.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → ai-sdk-handler フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動
⬇ .zip でダウンロード(推奨) ⬇ .skill 形式(上級者用) 元のソース ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-18
取得日時
2026-05-18
同梱ファイル
1

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

AI SDK Handler

この Skill は、Vercel AI SDK を使用して Large Language Model (LLM) の機能を実装する方法を定義します。ストリーミングチャット、構造化オブジェクトの生成、生成的な UI、およびバックグラウンドエージェントについて説明します。

注記: 画像/動画生成 (Replicate, Fal.ai) については、引き続き ai-handler を使用してください。ai-sdk-handler は、テキスト、チャット、およびエージェントによるテキスト/JSON ワークフローに特化して使用してください。

使用する場面

  • チャットボット: インタラクティブなチャットインターフェースの構築 (useChat, streamText)。
  • 構造化データ: テキストから JSON を抽出 (generateObject)。
  • 生成的な UI: サーバーから直接 React コンポーネントをストリーミング (streamUI)。
  • エージェント: 複雑な、複数ステップの推論タスク (多くの場合 Inngest と組み合わせる)。
  • マルチモーダル: テキストによる画像入力の処理。

機能

1. ストリーミングチャット

  • ツール: streamText (サーバー), useChat (クライアント)。
  • パターン: src/app/api/chat/route.ts にルートハンドラーを作成します。
  • 認証: ルートを保護するために withAuthRequired でラップします。
  • UI: チャットコンポーネントには src/components/chat-ui/ を使用します。

2. 生成的な UI (RSC)

  • ツール: streamUI (サーバー)。
  • パターン: ツールコールに基づいて React コンポーネントを返します。
  • ユースケース: 自動的に構築されるダッシュボード、動的なレポート。

3. 構造化オブジェクトの生成

  • ツール: generateObject。
  • パターン: Zod スキーマを定義し、厳密に型付けされた JSON を取得します。
  • ユースケース: データベースフォームへの入力、旅程の詳細の抽出、コンテンツの分類。

4. バックグラウンドエージェント (Inngest と連携)

  • ツール: Inngest ステップ内の generateText / generateObject。
  • 理由: Next.js の Server Actions/Routes にはタイムアウトがあります (通常最大 60 秒)。より時間がかかるエージェントはバックグラウンドで実行する必要があります。
  • パターン:
    1. UI から Inngest イベントをトリガーします。
    2. Inngest 関数が LLM ロジック (ループ、複数ステップ) を実行します。
    3. 結果を DB に保存するか、ユーザーに通知します。
    4. ドキュメント: AI SDK Agents。

ベストプラクティス

  1. ストリーミング: 知覚されるレイテンシーを改善するために、2 秒を超えるテキスト生成には常にストリーミングを優先してください。
  2. 認証: オープンな AI ルートを公開しないでください。常に session.user.id を検証してください。
  3. プロバイダー: @ai-sdk/openai または @ai-sdk/anthropic を使用してください。src/lib/ai/index.ts でプロバイダーの設定を抽象化してください。
  4. バックプレッシャー: AI SDK は streamText でこれを自動的に処理します。
  5. キャッシュ: クエリが繰り返される場合は、unstable_cache または KV ストアを使用してください。
  6. プロンプトエンジニアリング: プロンプトが複雑な場合は、専用のフォルダーまたは定数ファイルに保持してください。

ドキュメントと例

  • reference.md: コアセットアップと必須のコードスニペット。
  • examples.md: 以下を網羅した詳細な例:
    1. 基本的なチャット
    2. 生成的な UI
    3. 構造化オブジェクトの生成
    4. エージェントとワークフロー (ループ制御)
    5. キャッシュ
    6. ストリーミングデータ
    7. UI ストリームの読み取り
    8. バックプレッシャーの処理
    9. マルチモーダルチャット
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

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.

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