name: ui-to-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に注入
claude -p は使えないClaude Code セッション内から claude -p を呼ぶことはできない。
CLAUDECODE 環境変数がある → ネストセッションエラーCLAUDECODE を除外 → セッション用の ANTHROPIC_API_KEY は単体使用不可(Invalid API key)解決策: Anthropic Messages API を fetch で直接呼ぶ。
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;
スキルは日々更新されるため、コード内にベタ書きせず、常に最新版を readFile で読み込む。
テンプレート: scripts/api-route-template.ts
主要な構成:
callAnthropicAPI(): Anthropic Messages API を fetch で呼び出す関数POST(): スキルファイルを動的に読み込み、system prompt に注入して API を呼ぶANTHROPIC_USER_API_KEY を使用(ANTHROPIC_API_KEY は不可)状態遷移: idle → input → generating → success / error
.env.local に API キーを追加:
ANTHROPIC_USER_API_KEY=sk-ant-api03-...
注意: ANTHROPIC_API_KEY ではなく ANTHROPIC_USER_API_KEY を使うこと
使用するスキルの SKILL.md パスを API route に設定
API route を作成(scripts/api-route-template.ts 参照)
フロントエンドの UI コンポーネントを作成(scripts/agent-button-template.tsx 参照)
| ユースケース | スキル | 入力 | 出力 |
|---|---|---|---|
| セッション会話→記事ドラフト | draft-writer | 会話 + 方向性 | Markdown記事 |
| コードレビュー | code-reviewer | diff | レビューコメント |
| アイデア→企画書 | content-generator | アイデアメモ | 構成案 |
| ログ分析→レポート | (任意) | ログデータ | 分析レポート |
/api/lifelog/draft-from-session)
draft-writerclaude-sonnet-4-20250514ANTHROPIC_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 で直接呼ぶ方式に切り替えるreadFile で毎回動的に読み込む