本文へ移動
cccskills
無料GitHub で公開

ai-sdk-setup

Integrar features de IA en Next.js con el Vercel AI SDK: streaming de chat, tool calling, structured output, agents y RAG. Default a modelos Claude. Usar al agregar chat, generación o agentes a una app Next/Node.

日本語の概要は準備中です。原文の説明を表示しています。

SebastianLuser/claude-code-arcaneスター 3(GitHub 3 + cccskills 0)
連携ツールVercel

実行スコア 未検証

インストール方法を見る

含まれるファイル(1)

  • SKILL.md3.2 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

ai-sdk-setup — Vercel AI SDK con Claude

MANDATORY WORKFLOW

Antes de codear features LLM, leer la skill claude-api para model IDs vigentes, params y pricing. No asumir de memoria.

Step 0: Gather Requirements

  1. Caso: chat / generación one-shot / extracción structured / agente con tools / RAG
  2. Streaming al cliente o respuesta completa
  3. Modelo: Opus 5.5 (claude-opus-5-5, razonamiento) / Sonnet 5.5 (claude-sonnet-5-5, balance) / Haiku 5.5 (claude-haiku-5-5, rápido/barato)
  4. ¿Necesita tool calling / structured output / RAG (ver skill pgvector-search)?

Step 1: Instalar

pnpm add ai @ai-sdk/anthropic zod
# env: ANTHROPIC_API_KEY (validar con Zod en src/lib/env.ts, nunca hardcodear)

Step 2: Chat con streaming (Route Handler)

// app/api/chat/route.ts
import { anthropic } from '@ai-sdk/anthropic';
import { streamText, convertToModelMessages } from 'ai';

export async function POST(req: Request) {
  const { messages } = await req.json();
  const result = streamText({
    model: anthropic('claude-sonnet-5-5'),
    messages: convertToModelMessages(messages),
  });
  return result.toUIMessageStreamResponse();
}

Cliente: useChat() de @ai-sdk/react.

Step 3: Structured output (Zod)

const { object } = await generateObject({
  model: anthropic('claude-sonnet-5-5'),
  schema: z.object({ sentiment: z.enum(['pos','neg','neutral']), score: z.number() }),
  prompt: text,
});

Step 4: Tool calling / agente

const result = await generateText({
  model: anthropic('claude-opus-5-5'),
  tools: {
    search: tool({
      description: 'Buscar docs', inputSchema: z.object({ q: z.string() }),
      execute: async ({ q }) => searchDocs(q),
    }),
  },
  stopWhen: stepCountIs(5),   // loop multi-step controlado
  prompt,
});

Step 5: Buenas prácticas

  • Server-only la API key — nunca exponer al cliente
  • Auth en el route handler (como cualquier API route — ver rule nextjs-code)
  • Rate limiting en endpoints de IA (costo $)
  • Prompt caching para system prompts grandes (ver skill claude-api)
  • Manejar errores de stream y abort (AbortController)
  • Validar/parsear toda salida structured con Zod antes de usarla

Cierre

Probar el endpoint con streaming real, verificar manejo de errores/abort y que la API key nunca llega al cliente. Endpoint funcionando + key server-only → integración READY. Confirmar el approach con el usuario antes de escribir código. Siguiente paso: skill claude-api para tuning de modelo/caching, o pgvector-search para RAG.


Inspirado en las skills de AI SDK de laguagu/claude-code-nextjs-skills. Adaptado al formato Arcane y a modelos Claude. Verificar API/SDK contra la skill claude-api.

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

コメント

ログインなしで書き込めます。使ってみた感想、質問、動かなかった環境などを気軽にどうぞ。

まだコメントはありません。最初のコメントを書いてみませんか。

送信するとすぐに公開されます。メールアドレスや電話番号などの個人情報は書かないでください。URL は 2 つまでです。

0 / 1000 文字

このフォームは reCAPTCHA で保護されており、Google のプライバシーポリシーと利用規約が適用されます。

同じリポジトリのスキル

Plan, design, and implement A/B tests and experiments with statistical rigor. Covers hypothesis frameworks, sample sizing, metrics, and result analysis.

日本語の概要は準備中です。原文の説明を表示しています。

SebastianLuser/claude-code-arcane32026年10月27日 更新

Web/mobile accessibility decision guide: WCAG 2.2 AA, ARIA, keyboard nav, focus management, contrast, testing. Use for: a11y, accessibility, wcag, aria, screen reader, keyboard, contrast.

日本語の概要は準備中です。原文の説明を表示しています。

SebastianLuser/claude-code-arcane32026年10月27日 更新

Generate, iterate, and scale ad creative for paid advertising across Google, Meta, LinkedIn, and X. Covers platform specs, creative frameworks, and quality validation.

日本語の概要は準備中です。原文の説明を表示しています。

SebastianLuser/claude-code-arcane32026年10月27日 更新

Musica interactiva para juegos: layering vertical, re-secuenciacion horizontal, stingers, reglas de transicion con sync points, y mapeo de estados de gameplay a musica. Usar para: musica adaptativa, sistema de musica dinamica, transiciones musicales, combat music.

日本語の概要は準備中です。原文の説明を表示しています。

SebastianLuser/claude-code-arcane32026年10月27日 更新

Design multi-agent systems, create agent architectures, define communication patterns, and build autonomous agent workflows with structured evaluation frameworks.

日本語の概要は準備中です。原文の説明を表示しています。

SebastianLuser/claude-code-arcane32026年10月27日 更新

Inter-agent communication protocol for C-suite agent teams. Defines invocation syntax, loop prevention, isolation rules, response formats, and quality loops.

日本語の概要は準備中です。原文の説明を表示しています。

SebastianLuser/claude-code-arcane32026年10月27日 更新

SebastianLuser のスキルをすべて見る

このスキルの問題を報告する