3. Visual Agent Builder

November 14, 2025 • This blog is part of the ADK Masterclass - Hands-On Series
View Code on GitHub

Introduction

Building AI agents typically involves creating boilerplate code, YAML files, and defining orchestration logic (sequential, parallel, and looping) along with a set of supporting tools. However, if we can build agents through a visual interface instead, we can spend more time on actual features and less time wiring up logic or managing configurations.

Google's Agent Development Kit (ADK) now makes it possible with the ADK Visual Agent Builder (available in ADK v1.18.0+). This powerful, no-code visual interface enables us to build and manage AI agents through a web interface, allowing us to create sophisticated multi-agent systems without writing a single line of code.

In this blog, we'll walk through:

  1. What is ADK Visual Agent Builder?
    1. Features
  2. Getting Started
    1. Prerequisites
    2. Setup
  3. Building a financial agent with ADK Visual Agent Builder
    1. Start the Web Server (adk web)
    2. Create or Edit Agents
    3. Use Gemini Assistant
      1. Generated Folder Structure
    4. Demo: Financial Agent Example
  4. Manual Steps (Optional)
    1. Add Tools
    2. Add Sub-Agents
    3. Add Callbacks
  5. Understanding the tmp Directory Structure
    1. Why This Structure Exists
  6. Conclusion
  7. Resources

1. What is ADK Visual Agent Builder?

ADK Visual Agent Builder is a web-based interface for building and managing AI agents using Google's Agent Development Kit. It provides a complete no-code solution that abstracts away the complexity of writing YAML files and managing agent interactions, allowing us to focus on building features using natural language with Gemini Assistant.

1.1 Features

Key features of the ADK Visual Agent Builder include:

  • Visual Web interface: Build agents through an intuitive web UI
  • No YAML editing required: All configurations are handled visually
  • Real-time testing: Test our agents directly within the web interface
  • Gemini Assistant integration: Use natural language to build agents
  • Multiple agent types: Support for LLM, Sequential, Parallel, Loop, and Workflow agents
  • Built-in tools: Access to google_search, EnterpriseWebSearch, VertexAISearchTool, and more
ADK no-code builder interface (UI preview)

2. Getting Started

2.1 Prerequisites

To get started with the ADK Visual Agent Builder, we'll need:

  • Python 3.13+
  • ADK version 1.18.0 or higher (required for Visual Agent Builder features)
  • Google Cloud project

2.2 Setup

1. First, create and activate a virtual environment:

python3 -m venv .venv
source .venv/bin/activate

2. Install ADK:

pip install google-adk

3. Verify ADK installation and version:

adk --version

We should see output like: adk, version 1.18.0

4. Set our Google Cloud project and authenticate:

export GOOGLE_CLOUD_PROJECT=your-project-id
gcloud auth application-default login

3. Building a financial agent with ADK Visual Agent Builder

3.1 Start the Web Server (adk web)

Launch the ADK Visual Agent Builder web interface:

adk web

This starts a FastAPI server with a web UI for visually building and editing agents. Open our browser and navigate to the URL shown in the terminal (typically http://localhost:8000).

3.2 Create or Edit Agents

Creating New Agents:

  • Click the "+" button next to the agent dropdown to create a new agent in builder mode
  • Use the visual interface to design workflows, configure settings, and test our agent
Creating a new agent in builder mode

Editing Existing Agents:

  • Select the agent from the dropdown menu
  • Click the pencil/edit icon next to the agent dropdown
  • Modify workflows, tools, sub-agents, and callbacks through the visual interface
  • Test changes in real-time with the integrated chat
  • All changes are saved in the tmp directory as drafts — we can publish them when ready
Editing an existing agent in builder mode

3.3 Use Gemini Assistant

The Visual Agent Builder includes a Gemini Assistant panel that helps us build agents using natural language. Simply describe what we want to build, and the assistant will generate the YAML configuration files for us.

Example prompt:

Build a multi-agent financial analysis system in which the user provides a company ticker or symbol and the primary orchestration agent should be a Sequential Agent that runs several agents in parallel, with each agent responsible for one task:
  • Fetch the current share price
  • Generate a 10-line summary of the latest 10-K
  • Extract key financial metrics (EBITDA, EPS, net revenue, etc.)
  • Produce an earnings call summary
  • Retrieve the latest news highlights
After all agents complete their tasks, an Aggregator agent should combine all outputs into a single, clean, well-structured report. Use Gemini 2.5 Flash as the LLM and google_search as the built-in tool for data retrieval.
Gemini Assistant prompt interface in ADK Visual Agent Builder

We never need to manually create or edit YAML files — the Visual Agent Builder handles everything for us!

3.3.1 Generated Folder Structure

After using the Gemini Assistant with the above prompt, the ADK Visual Agent Builder will automatically generate the following folder structure:

financial_agent/
├── company_orchestrator.yaml
├── current_share_price_agent.yaml
├── earnings_call_agent.yaml
├── final_aggregator_agent.yaml
├── financial_data_orchestrator.yaml
├── key_financials_agent.yaml
├── latest_news_agent.yaml
├── parallel_data_gatherer.yaml
├── root_agent.yaml
└── ten_k_summary_agent.yaml

Each YAML file defines an agent's configuration, tools, and behavior. The Visual Agent Builder automatically creates this structure based on the natural language description, handling all the YAML generation, agent relationships, and tool configurations for us.

3.4 Demo: Financial Agent Example

This repository includes a demo implementation of a comprehensive multi-agent system for gathering financial information about companies. The system demonstrates the power of the ADK Visual Agent Builder by creating a complex multi-agent workflow without writing any YAML.

Repository: arjunprabhulal/adk-visual-builder-financial-agent

The Financial Agent system includes:

  • Root Company Orchestrator: Primary orchestrator that validates company tickers and coordinates data gathering
  • Company Orchestrator: Validates and resolves company information
  • Current Share Price Agent: Retrieves real-time stock prices
  • Earnings Call Agent: Fetches earnings call transcripts and summaries
  • Key Financials Agent: Gathers key financial metrics and ratios
  • Latest News Agent: Retrieves recent news about companies
  • 10-K Summary Agent: Extracts and summarizes 10-K filing information
  • Financial Data Orchestrator: Coordinates financial data collection
  • Parallel Data Gatherer: Efficiently gathers multiple data points in parallel
  • Final Aggregator Agent: Aggregates and formats final results

4. Manual Steps (Optional)

Now that we've generated our agents automatically, let's look at how we can configure them manually if needed. Here are additional steps:

4.1 Add Tools

Click the "+" button next to "Tools" to add:

  • Function Tool: Custom Python functions
  • Built-in Tool: Pre-built tools (google_search, EnterpriseWebSearch, VertexAISearchTool, FilesRetrieval, load_memory, url_context, etc.)
  • Agent Tool: Other agents that can be invoked as tools
Adding tools in ADK Visual Agent Builder

4.2 Add Sub-Agents

To create multi-agent systems:

  1. Locate the "Sub Agents" section
  2. Click the "+" button to add a new sub-agent
  3. Choose from the following agent types:
    • LLM Agent: Single LLM-based agent for straightforward tasks
    • Sequential Agent: Executes sub-agents one after another in sequence
    • Parallel Agent: Executes sub-agents simultaneously for improved performance
    • Loop Agent: Iterates over sub-agents with loop control logic
    • Workflow Agent: Complex workflow orchestration with conditional logic

4.3 Add Callbacks

Add callbacks for custom behavior:

  1. Locate the "Callbacks" section
  2. Click the "+" button to add a new callback
  3. Select the callback type (Before/After Agent, Before/After Model, Before/After Tool)
  4. Configure and save

5. Understanding the tmp Directory Structure

When using the ADK Visual Agent Builder web UI, we'll notice a tmp directory structure like:

agent_name/
├── root_agent.yaml          # Published/production version
└── tmp/
    └── agent_name/
        └── root_agent.yaml   # Draft/staging version

5.1 Why This Structure Exists

The ADK Visual Agent Builder uses a draft/staging pattern:

  • tmp/{agent_name}/: Temporary staging area where changes are saved while editing in the web UI
  • {agent_name}/: Production area containing the published/final version

This allows us to:

  • Make changes without immediately affecting the production agent
  • Cancel changes and restore from the published directory
  • Have a clear separation between draft and published versions

Note: The tmp directory is automatically created by the web UI when we edit agents. We can safely ignore it or exclude it from version control if desired.

6. Conclusion

In summary, the ADK Visual Agent Builder allows us to create powerful multi-agent systems visually, eliminate YAML complexity, and focus entirely on building features with Gemini.

Google ADK Visual Agent Builder helps us build AI agents without writing a single line of YAML or code. With natural language assistance through Gemini and comprehensive tool support, we can focus on building features, even when working with custom tools and agents.

Whether we're building a simple single-agent system or a sophisticated multi-agent platform, the Google ADK Visual Agent Builder provides the built-in tools and flexibility we need to start building our own agents.

7. Resources

Comments