こんなWebアプリを簡単に作ろう!
好きなMCPサーバーをセットできます。
超簡易構成図
完成品は、ここから誰でも試せます!
Strands Agents SDKとは?
AWSが最近発表した、AIエージェント開発用フレームワークです。
LangGraphとかMastraみたいなやつですね。
めちゃシンプルかつ高機能で、特にAWSやBedrockとの親和性が高いです!
手順
AWSアカウントを作成
Bedrockのモデルを有効化
「Bedrock > モデルアクセス」から、すべてのモデルを有効化すればOKです。
CloudShellでアプリを開発
AWSのシェル環境「CloudShell」を使って、ブラウザ完結でアプリを動かしてみます。
もちろんローカルPCで実施してもOKです。
Pythonバージョンを上げます。
# Python 3.12をインストール
sudo yum install python3.12
# シンボリックリンクを修正
sudo ln -sf /usr/bin/python3.12 /usr/bin/python3
# pipもアップグレード
sudo python -m ensurepip --upgrade
nanoエディターでPythonファイルを作成します。
nano app.py
以下のコードを貼り付けます。
import asyncio
import streamlit as st
from strands import Agent
from strands.models import BedrockModel
from strands.tools.mcp import MCPClient
from mcp import stdio_client, StdioServerParameters
# メインエリア
st.title("Strands MCPエージェント")
st.text("👈 サイドバーで好きなMCPサーバーを設定して、Strands Agents SDKを動かしてみよう!")
question = st.text_input("質問を入力", "Bedrockでマルチエージェントは作れる?")
# サイドバー
with st.sidebar:
mcp_args = st.text_input("MCPサーバーのパッケージ名(uvx用)", "awslabs.aws-documentation-mcp-server@latest")
model_id = st.text_input("BedrockのモデルID", "us.anthropic.claude-3-7-sonnet-20250219-v1:0")
st.text("※一部のモデル(Claude 4など)はクォータが厳しく、応答なしエラーが発生することがあります。")
def create_mcp_client(mcp_args):
"""MCPクライアントを作成"""
return MCPClient(lambda: stdio_client(
StdioServerParameters(command="uvx", args=[mcp_args])
))
def create_agent(client, model_id):
"""エージェントを作成"""
return Agent(
model=BedrockModel(model_id=model_id),
tools=client.list_tools_sync()
)
def extract_tool_info(chunk):
"""チャンクからツール情報を抽出"""
event = chunk.get('event', {})
if 'contentBlockStart' in event:
tool_use = event['contentBlockStart'].get('start', {}).get('toolUse', {})
return tool_use.get('toolUseId'), tool_use.get('name')
return None, None
def extract_text(chunk):
"""チャンクからテキストを抽出"""
if text := chunk.get('data'):
return text
elif delta := chunk.get('delta', {}).get('text'):
return delta
return ""
async def stream_response(agent, question, container):
"""レスポンスをストリーミング表示"""
text_holder = container.empty()
buffer = ""
shown_tools = set()
async for chunk in agent.stream_async(question):
if isinstance(chunk, dict):
# ツール実行を検出して表示
tool_id, tool_name = extract_tool_info(chunk)
if tool_id and tool_name and tool_id not in shown_tools:
shown_tools.add(tool_id)
if buffer:
text_holder.markdown(buffer)
buffer = ""
container.info(f"🔧 **{tool_name}** ツールを実行中...")
text_holder = container.empty()
# テキストを抽出して表示
if text := extract_text(chunk):
buffer += text
text_holder.markdown(buffer + "▌")
# 最終表示
if buffer:
text_holder.markdown(buffer)
# ボタンを押したら生成開始
if st.button("質問する"):
client = create_mcp_client(mcp_args)
with st.spinner("回答を生成中…"):
with client:
agent = create_agent(client, model_id)
container = st.container()
# 非同期実行
loop = asyncio.new_event_loop()
loop.run_until_complete(stream_response(agent, question, container))
loop.close()
実行してみましょう。
# Strands Agentsをインストール
pip install uv streamlit strands-agents strands-agents-tools
# アプリを起動
streamlit run app.py
CloudShellで2つ目のタブ(リージョン名)を起動して、PinggyというトンネリングサービスにSSH接続します。(Web公開されます)
ssh -p 443 -R0:localhost:8501 a.pinggy.io
表示されたURLにアクセスしてみましょう!
好きなローカルMCPサーバーを入力して、AIエージェントにツールとして使わせることが可能です。
Pinggyで公開URLを発行しているので、どこからでもアクセスできてしまいます。セキュリティにはご留意ください。
Pinggyの無料セッション経過(60分)、もしくはCloudShellの自動停止(20〜30分)でアプリは止まってしまいます。
ソースコード
こちらに公開しています。
次のステップ
今回作ったアプリをコンテナにしてWeb公開してみる
GUIで簡単にAIエージェントを作ってみる
LLMOps(監視と評価)に入門してみる
おまけ
Bedrockにちゃんと入門してみたくなったら…
MCPの入門書も出版します! すでにアマゾン等で予約可能。