SCALE — Build Lab
機能パターン · REACT COMPONENT

AI要約ボタン(Claude API)

CATEGORY機能パターン TYPEReact Component EFFORT60〜120分 DIFFICULTY
PRIMARY CODE
ts
// /api/ai/summarize.ts
import Anthropic from '@anthropic-ai/sdk';
const client = new Anthropic({ apiKey: process.env.ANTHROPIC_API_KEY });

export async function POST(req: Request) {
  const { text } = await req.json();
  const msg = await client.messages.create({
    model: 'claude-haiku-4-5-20251001',
    max_tokens: 500,
    messages: [{ role: 'user', content: `次の文章を3行で要約: \n\n${text}` }],
  });
  const summary = msg.content[0].type === 'text' ? msg.content[0].text : '';
  return Response.json({ summary });
}
前提条件
Tailwind CSS v4TypeScript 5
USE CASES
  • 任意のダッシュボードに組み込み

AI要約ボタン(Claude API)

:LiTarget: 用途

長文を Claude API で3行要約。議事録・記事・問い合わせ要約に。

:LiSparkle: 特徴

  • Claude API
  • ストリーミング
  • リトライ
  • コスト管理

:LiCode: コード(コピペ用)

// /api/ai/summarize.ts
import Anthropic from '@anthropic-ai/sdk';
const client = new Anthropic({ apiKey: process.env.ANTHROPIC_API_KEY });

export async function POST(req: Request) {
  const { text } = await req.json();
  const msg = await client.messages.create({
    model: 'claude-haiku-4-5-20251001',
    max_tokens: 500,
    messages: [{ role: 'user', content: `次の文章を3行で要約: \n\n${text}` }],
  });
  const summary = msg.content[0].type === 'text' ? msg.content[0].text : '';
  return Response.json({ summary });
}

:LiHandPointer: 使い方

対象プロジェクトに該当ファイルをコピーして、props を流し込むだけ。

:LiAlertCircle: 注意事項

  • 依存パッケージを忘れず追加