[AgentCore CLI] agentcore dev コマンド実行時に Agent Inspector Web UI が追加されました！

はじめに

こんにちは、ラーメンも大好きなコンサル部の神野（じんの）です。

AgentCore CLI v0.9.0 がリリースされ、agentcore dev コマンド実行時に起動する Agent Inspector Web UI が追加されました！

https://github.com/aws/agentcore-cli/releases/tag/v0.9.0

これまでは agentcore dev を実行するとサーバーが立ち上がってコマンドベースでテストはできたのですが、画面があるといいな・・・と思っていたところだったので嬉しいですね。

今回のアップデートで Web ブラウザ上のリッチな UI で下記のようなことができるようになりました。

• エージェントとのチャット（セッション単位で管理）
• Resources（登録されているエージェント・Memory）の確認
• Traces のタイムライン表示（OpenTelemetry ベース）
• 抽出された長期記憶の確認

本記事ではプロジェクト作成から Web UI を起動するところまでの流れをご紹介していきます！

AgentCore CLI自体については下記ブログで紹介しております。

https://dev.classmethod.jp/articles/agentcore-cli-deploy/

ただアップデートのスピードが著しいですね。どんどん機能が追加されて便利になっています。

前提

今回使用した環境は下記です。

AgentCore CLI は npm でグローバルインストールしておきます。

npm install -g @aws/agentcore@0.9.0

何が追加されたか

PR #871 のディスクリプションを見てみると、大きく下記の機能が追加されていました。

https://github.com/aws/agentcore-cli/pull/871

Launch agent inspector when user runs agentcore dev, a web UI that allows users to test their agents locally
To enable collection of traces for local agents, this PR adds a local OTLP/HTTP collector that receives OpenTelemetry traces/logs from the agent runtime, persists them to disk, and serves them to the agent inspector frontend

要するに下記のような構成になっています。

• Web UI サーバー: Agent Inspector の静的フロントエンドを配信する Node.js の HTTP サーバー
• OTEL コレクタ: エージェントランタイムから OTLP/HTTP でトレース・ログを受信し、JSONL として永続化するローカルコレクタ

エージェントを動かしたときのテレメトリをローカルに溜めて、それを Web UI から確認できるようになった、というイメージですね。これはありがたい。

次のセクションから、実際にプロジェクトを作るところから順番に試していきます！

プロジェクトとエージェントを作成する

それでは agentcore create でプロジェクトとエージェントを作っていきます！

agentcore create

ウィザードが立ち上がるので、対話形式で下記の内容を選択していきました。Memory は今回せっかくなので Long-term and short-term を選択して、セッションをまたいで記憶を保持する構成にします。

選択内容を確定すると、プロジェクトディレクトリ・Python 環境・agentcore/ ディレクトリの初期化まで行われます。

Created:
  sampleMyProject/
    app/MyAgent_test_ui/  Python agent (Strands Agents SDK)
    agentcore/            Config and CDK project

Model: us.anthropic.claude-sonnet-4-5-20250514-v1:0 via Bedrock

Next: Run agentcore dev to run agent locally, or agentcore deploy to deploy to aws

無事プロジェクトとエージェントが作成されました！早速試していきます。

agentcore deploy でデプロイする

agentcore devで試すぞ！としたいところですが、今回は Memory まで含めて Agent Inspector で動作確認したいので、先に agentcore deploy を実行してクラウドにデプロイしておきます。

プロジェクトのディレクトリに移動してデプロイします。

cd sampleMyProject
agentcore deploy

実行結果はこんな感じです。

AgentCore Deploy

Project: sampleMyProject
Target: ap-northeast-1:xxxxxxxxxxxx

[done]    Validate project
[done]    Check dependencies
[done]    Build CDK project
[done]    Synthesize CloudFormation
[done]    Check stack status
[done]    Publish assets

╭────────────────────────────────────────────────╮
│ ✓ Deploy to AWS Complete                       │
│                                                │
│ [████████████████████] 7/7                     │
╰────────────────────────────────────────────────╯

Runtime や Memory などのリソースが AWS 側に作成され、Agent Inspector から Memory も参照できるようになりました。

agentcore dev で Agent Inspector を起動する

続いてデプロイ済みのプロジェクトに対して agentcore dev を実行します！

agentcore dev

コマンドを実行するとブラウザが自動的に立ち上がり、Agent Inspector の画面が表示されます。

良い感じの画面が表示されました！Mastraみたいです。

画面左側がチャット領域、右側が Resources / Traces / Memories の切り替えができる領域、という構成になっています。

右側の Resources タブには、現在扱っているエージェントが表示されます。今回は先にデプロイしているので、デプロイされたエージェントとしてエージェント名が表示されます。ローカル開発中にデプロイ状態もわかるのは良いですね。

チャットしてみる

下部の入力欄にメッセージを入力して送信してみます。今回は簡単な計算をお願いしてみました。

12312 + 313313 を計算して。

エージェントから計算結果が返ってきましたね！

12312 + 313313 = 325625 です！

さらに画面を覗くと、エージェントが add_numbers というツールを呼び出していること、Input / Output までまとめて確認できます。

{
  "a": 12312,
  "b": 313313
}

[
  {
    "text": "325625"
  }
]

ツールが何を受け取って何を返したのかまでチャット欄で可視化されるのは嬉しいですね。ある程度の動作確認はここでできそうです。

Timeline view でトレースを確認する

画面下部の Timeline view を確認すると、エージェントの処理の流れがガントチャートのように表示されます。AgentCore Observability みたいですね。今回の実行では下記のようなスパンが並んでいました。

エージェントの内部動作を細かく追えるのは助かりますね！また左側のセッション一覧からは過去のセッションも選択できるため、別のセッションの動きと見比べやすいのも嬉しいポイントです。

右側の「Traces」タブでも同じように詳細に確認できます。

Traces タブでは、収集された span / log が時系列で一覧表示されて、各エントリで「Hide raw」を展開すると OpenTelemetry の生データ（traceId / spanId / parentSpanId / attributes など）がそのまま見られます。

せっかく Memory を付けたので、エージェントが会話内容を覚えているかを確認していきます！

記憶が保持されているか確認する

同じセッション内の記憶（短期記憶）

これまでの流れでやり取りしていたセッションで、そのまま「記憶ある？」と聞いてみました。

ここは短期記憶の範囲なので、同一セッション内の直近のやり取りがちゃんと記憶されていることを確認できました。

セッションを破棄しても残る記憶（長期記憶）

次に、チャット右上のゴミ箱アイコンからセッションを破棄し、新しいセッションを立ち上げて「今までの記憶ある？」と聞いてみました。

しっかりと長期記憶も機能していますね。Timeline view 側でも裏で Memory から取得している様子まで追えるのは嬉しいですね。

Memories タブで保存されたメモリーを確認する

最後に右側の「Memories」タブを開いてみます。ここではデプロイされた Memory に対して Strategy を指定しながら、保存されているメモリーレコードを直接覗くことができます。

画面上部で下記を指定して「List」を押すとレコードが並びます。

今回は USER_PREFERENCE を選んでみたところ、下記のようなレコードが保存されていました。

{
  "context": "ユーザーが「ラーメンが大好きです」と明確に述べている。",
  "preference": "ラーメンが大好き",
  "categories": ["食べ物", "料理", "日本料理"]
}

「Search」を選べばクエリを入力して検索もできました。関連度のスコアも表示されてわかりやすいです。

今までは CLI やスクリプトでどういった長期記憶が取得されているか確認していたので、この画面上で合わせて確認できるのは助かりますね。

Timeline view には今までのやり取りが残っていて便利なのですが、チャット自体を復元する方法は今のところなさそうです。今後やりとりを再開する機能もあると嬉しいですね。

おわりに

ブラウザ上で手軽に動作確認できるのは助かりますね。AgentCore Observability がローカルに存在する感覚で、Timeline でツール呼び出しまで追えるのが便利だなと感じました。今後さらに機能が拡充されていくと嬉しいですね！

本記事が少しでも参考になりましたら幸いです。最後までご覧いただきありがとうございました！

補足

バグ報告も画面から送れる

Agent Inspector の画面右上には Report an issue のバグアイコンが用意されています。

動かしていてこれおかしいかも？と気になったときに、画面を離れずそのまま報告できるのはありがたいですね！Enter キーで変換確定時に送信される問題は Issue 送ってみようと思いました！