芝原 隼人

SNS 投稿のハッシュタグは、次の 2 つを使ってください
#ClaudeCommunity
#ClaudeCommunityFukuoka

Setup
ワークショップでは、特典のクレジットで Claude の API を使う

→
→ 

→
→ 

を押す
→ 
→ 
→ 
Claude Code を起動するターミナルで、環境変数にキーを入れてから起動する
export ANTHROPIC_API_KEY=sk-ant-...
claude
元に戻すとき
unset ANTHROPIC_API_KEY
Hands-on
Claude Code の仕組みで動く AI エージェント


Anthropic のクラウドで動くエージェントを、画面から作って動かせる
福岡市オープンデータ(https://odcs.bodik.jp/401307/)からデータを探し、グラフ画像を作成するエージェント
→
→ 
エージェントを作成 → 環境を設定 → 新しい環境を作成 → 無制限 → セッションを開始


Claude Code を部品として、自分のアプリに組み込める
→
→ 
Claude Agent SDK を使って次のエージェントの対話型ウェブアプリを作って:福岡市オープンデータ(https://odcs.bodik.jp/401307/)からデータを探し、グラフ画像を作成するエージェント


1. 完了したら「起動して」と入力

2. Ports → Open in Browser を選択



作ったアプリを GitHub の自分のリポジトリに保存して


import asyncio
from claude_agent_sdk import AgentDefinition, ClaudeAgentOptions, query
# エージェントの設定
options = ClaudeAgentOptions(
system_prompt="福岡市オープンデータからグラフを作る",
allowed_tools=["WebFetch", "Bash", "Write"],
permission_mode="acceptEdits",
# サブエージェント(別のコンテキストで動く助手)
agents={"finder": AgentDefinition(
description="データを探す係",
prompt="福岡市オープンデータから、使えるデータを探す",
tools=["WebFetch"],
)},
)
# 指示を送り、進み具合を順に受け取る
async def main():
async for message in query(prompt="人口の推移をグラフにして", options=options):
print(message)
asyncio.run(main())
options
エージェントの設定。役割、使ってよいツール、確認なしで動かす範囲を決める
agents
サブエージェント。役割・プロンプト・ツールを分けて仕事を任せる
query
指示を送ると、エージェントが自分でツールを使って仕事を進める。途中のメッセージが順に届く
| 機能 | できること | Claude Code への一言(例) |
|---|---|---|
| ツールと権限 | 使うツールと、確認なしで動く範囲を決める | 「ツールは WebFetch・Bash・Write だけ」 |
| MCP | 外部のサービスとつなぐ | 「Google Workspace MCP を使って連携して」 |
| フック | ツールの実行の前後に自分の処理を挟む | 「エージェントの行動履歴をログに書き出して」 |
| サブエージェント | 別の助手に分けて任せる。並列にも動かせる | 「20 並列で文章を和訳して」 |
| スキル | 手順書(SKILL.md)を要るときだけ読む | 「yomiyasu スキルを使って日本語を読みやすくして」 |
| 構造化出力 | 答えを JSON の形にそろえる | 「答えはタイトルと画像のパスの JSON で」 |
| 上限 | ターン数と費用で止める | 「最大 5 ターンで 1 ドルまで使って」 |
Your Turn
Let's Share