---

name: ui-to-agent-api description: UIからAnthropic Messages APIを呼び出し、スキルファイルで動作を制御するパターン metadata: {"version":"1.0.0","author":"keita","tags":["api","anthropic","skill-driven","next.js","pattern"]}

UI → Agent API パターン

Web UIのボタンから、ローカルのAPIルート経由でAnthropic Messages APIを呼び出し、スキルファイル（SKILL.md）の内容をsystem promptに注入して動作させるパターン。

アーキテクチャ

[ブラウザUI] → [Next.js API Route] → [Anthropic Messages API]
                      ↑
              [readFile: SKILL.md]
              スキルをsystem promptに注入

重要な制約と解決策

1. claude -p は使えない

Claude Code セッション内から claude -p を呼ぶことはできない。

• CLAUDECODE 環境変数がある → ネストセッションエラー
• CLAUDECODE を除外 → セッション用の ANTHROPIC_API_KEY は単体使用不可（Invalid API key）

解決策: Anthropic Messages API を fetch で直接呼ぶ。

2. 環境変数名の衝突

Claude Code セッションは ANTHROPIC_API_KEY を独自のセッショントークン（sk-ant-oat01-...）で上書きする。.env.local に同名で設定しても、プロセス環境変数が優先されるため読み込まれない。

解決策: 別名の環境変数を使う。

# .env.local
ANTHROPIC_USER_API_KEY=sk-ant-api03-...

// API route
const apiKey = process.env.ANTHROPIC_USER_API_KEY;

3. スキルファイルの動的参照

スキルは日々更新されるため、コード内にベタ書きせず、常に最新版を readFile で読み込む。

詳細: references/skill-dynamic-loading.md

実装テンプレート

API Route（Next.js App Router）

テンプレート: scripts/api-route-template.ts

主要な構成:

• callAnthropicAPI(): Anthropic Messages API を fetch で呼び出す関数
• POST(): スキルファイルを動的に読み込み、system prompt に注入して API を呼ぶ
• 環境変数 ANTHROPIC_USER_API_KEY を使用（ANTHROPIC_API_KEY は不可）

フロントエンド UI（React）

テンプレート: scripts/agent-button-template.tsx

状態遷移: idle → input → generating → success / error

セットアップ手順

1. .env.local に API キーを追加:

   ANTHROPIC_USER_API_KEY=sk-ant-api03-...
   

   注意: ANTHROPIC_API_KEY ではなく ANTHROPIC_USER_API_KEY を使うこと

2. 使用するスキルの SKILL.md パスを API route に設定

3. API route を作成（scripts/api-route-template.ts 参照）

4. フロントエンドの UI コンポーネントを作成（scripts/agent-button-template.tsx 参照）

応用例

ユースケース	スキル	入力	出力
セッション会話→記事ドラフト	draft-writer	会話 + 方向性	Markdown記事
コードレビュー	code-reviewer	diff	レビューコメント
アイデア→企画書	content-generator	アイデアメモ	構成案
ログ分析→レポート	(任意)	ログデータ	分析レポート

実績

• content-studio: Lifelog セッション会話 → 記事ドラフト生成（/api/lifelog/draft-from-session）
  • スキル: draft-writer
  • モデル: claude-sonnet-4-20250514
  • 処理時間: 約30-60秒

よくある落とし穴

• ANTHROPIC_API_KEY を .env.local に設定しても読み込まれない: Claude Codeセッション内ではセッショントークン（sk-ant-oat01-...）がプロセス環境変数として ANTHROPIC_API_KEY を上書きする。必ず ANTHROPIC_USER_API_KEY など別名の環境変数を使うこと
• claude -p でネスト呼び出ししようとする: Claude Codeセッション内から claude -p は実行できない（CLAUDECODE 環境変数によるネストセッションエラー）。Anthropic Messages API を fetch で直接呼ぶ方式に切り替える
• スキルファイルをコード内にベタ書きする: SKILL.md は随時更新されるため、ハードコードすると古い内容で動作し続ける。必ず readFile で毎回動的に読み込む