ADK Studio

ドラッグ＆ドロップでAIエージェントを構築するためのビジュアル開発環境。

概要

ADK Studioは、adk-rustで構築されたAIエージェントの設計、テスト、デプロイのためのローコードインターフェースを提供します。複雑なマルチエージェントワークフローを視覚的に作成し、本番環境向けのRustコードにコンパイルします。

インストール

# Install from crates.io (self-contained binary)
cargo install adk-studio

# Or build from source
cargo build --release -p adk-studio

クイックスタート

# Start the studio server
adk-studio

# Open in browser
open http://localhost:3000

CLIオプション

# Bind to all interfaces for remote access
adk-studio --host 0.0.0.0 --port 8080

# Custom projects directory
adk-studio --dir ./my-projects

---

ステップバイステップチュートリアル

このウォークスルーに従って、ADK Studioで最初のAIエージェントを構築しましょう。

ステップ1: 新しいプロジェクトの作成

右上隅にある + New Project ボタンをクリックします。

プロジェクト名（例：「Demo Project」）を入力し、Create をクリックします。

ステップ2: エージェントをキャンバスに追加する

左側のサイドバーには、利用可能なエージェントタイプを含む Agent Palette があります。

• LLM Agent - 言語モデルを搭載した単一のAIエージェント
• Sequential - サブエージェントを順番に実行
• Parallel - サブエージェントを並行して実行
• Loop - 終了条件が満たされるまで繰り返し
• Router - 入力に基づいてサブエージェントにルーティング

LLM Agent をクリックしてキャンバスに追加します。

ステップ3: エージェントの設定

エージェントを選択すると、右側に Properties Panel が表示されます。ここで設定できます。

• Name - エージェントの識別子
• Model - LLMプロバイダーとモデル（Gemini、OpenAIなど）
• Instructions - エージェントのシステムプロンプト

ステップ4: エージェントにツールを追加する

左側のサイドバーを下にスクロールして、Tool Palette を見つけます。

• Function - コードエディター付きのカスタムRust関数
• MCP - Model Context Protocolサーバー
• Browser - 46のWebDriver自動化アクション
• Google Search - 地に足の着いたウェブ検索
• Load Artifact - ファイルをコンテキストにロード

ツールをクリックしてエージェントに追加します。

ステップ5: ビルドとテスト

Build Project をクリックしてエージェントをコンパイルします。ビルドが完了したら、下部にある Chat Panel を使用して、実際に対話しながらエージェントをテストします。

チャットは以下をサポートしています。

• ライブSSEストリーミング応答
• Agent実行アニメーション
• デバッグ用のイベントトレースパネル

ステップ6: 生成されたコードの表示

View Code をクリックして、ビジュアルデザインから生成された本番環境対応のRustコードを表示します。

このコードをコピーするか、Compile を使用して完全なRustプロジェクトを生成できます。

---

機能

エージェントの種類

ツールの種類

リアルタイムチャット

スタジオでエージェントを直接テストできます:

• ライブ SSE ストリーミング応答
• エージェント実行アニメーション
• デバッグ用イベントトレースパネル
• セッションメモリの永続化

コード生成

視覚的なデザインを本番コードに変換します:

1. View Code - 構文ハイライト付きで生成された Rust をプレビュー
2. Compile - 完全な Rust プロジェクトを生成
3. Build - リアルタイム出力で実行可能ファイルにコンパイル
4. Run - ビルドされたエージェントを実行

アーキテクチャ

┌─────────────────────────────────────────────────────────────┐
│                     ADK Studio UI                           │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────────────┐ │
│  │   Palette   │  │   Canvas    │  │   Properties        │ │
│  │  - Agents   │  │  ReactFlow  │  │  - Name             │ │
│  │  - Tools    │  │  Workflow   │  │  - Model            │ │
│  │             │  │  Designer   │  │  - Instructions     │ │
│  └─────────────┘  └─────────────┘  └─────────────────────┘ │
└─────────────────────────────────────────────────────────────┘
                              │
                              ▼ HTTP/SSE
┌─────────────────────────────────────────────────────────────┐
│                    ADK Studio Server                        │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────────────┐ │
│  │   Routes    │  │   Codegen   │  │   Storage           │ │
│  │  /api/*     │  │  Rust code  │  │  Projects           │ │
│  │  /chat      │  │  generation │  │  File-based         │ │
│  └─────────────┘  └─────────────┘  └─────────────────────┘ │
└─────────────────────────────────────────────────────────────┘
                              │
                              ▼ Build
┌─────────────────────────────────────────────────────────────┐
│                   Generated Rust Project                    │
│  ┌─────────────────────────────────────────────────────┐   │
│  │  Cargo.toml + src/main.rs                           │   │
│  │  Uses: adk-rust, adk-agent, adk-model, etc.        │   │
│  └─────────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────────┘

APIエンドポイント

プロジェクト

コード生成

チャット

環境変数

生成されるコード構造

my-project/
├── Cargo.toml
└── src/
    └── main.rs

main.rsの生成例：

use adk_rust::prelude::*;
use adk_rust::Launcher;

#[tokio::main]
async fn main() -> Result<(), Box<dyn std::error::Error>> {
    dotenvy::dotenv().ok();
    let api_key = std::env::var("GOOGLE_API_KEY")?;
    let model = GeminiModel::new(&api_key, "gemini-2.0-flash")?;

    let agent = LlmAgentBuilder::new("assistant")
        .description("Helpful AI assistant")
        .instruction("You are a helpful assistant.")
        .model(Arc::new(model))
        .build()?;

    Launcher::new(Arc::new(agent)).run().await?;
    Ok(())
}

テンプレート

Studioには、事前に構築されたテンプレートが含まれています。

• Basic Assistant - シンプルなLLMエージェント
• Research Agent - Google検索機能を持つエージェント
• Support Router - マルチエージェントルーティング
• Code Assistant - コードツールを持つエージェント

ベストプラクティス

---

前へ: ← Memory | 次へ: Development Guidelines →