From d6200f717b27549fe1602051d1ffed0787fcc57f Mon Sep 17 00:00:00 2001 From: Kristopher Overholt Date: Tue, 12 May 2026 14:39:51 -0500 Subject: [PATCH 1/7] Move adk web Visual Builder page content into Runtime > adk web page --- docs/runtime/web-interface.md | 156 ++++++++++++++++++++++++++++++---- docs/visual-builder/index.md | 127 --------------------------- mkdocs.yml | 3 +- 3 files changed, 141 insertions(+), 145 deletions(-) delete mode 100644 docs/visual-builder/index.md diff --git a/docs/runtime/web-interface.md b/docs/runtime/web-interface.md index 0c7c36c90a..571e2fd5bb 100644 --- a/docs/runtime/web-interface.md +++ b/docs/runtime/web-interface.md @@ -11,12 +11,22 @@ tool provides a simple way to interactively develop and debug your agents. !!! warning "Caution: ADK Web for development only" - ADK Web is ***not meant for use in production deployments***. You should - use ADK Web for development and debugging purposes only. + ADK Web is ***not meant for use in production deployments***. You should use + ADK Web for development and debugging purposes only. + +Key features of the ADK web interface include: + +- **Chat interface**: Send messages to your agents and view responses in + real-time +- **Session management**: Create and switch between sessions +- **State inspection**: View and modify session state during development +- **Event history**: Inspect all events generated during agent execution +- **Visual Builder**: Design agents visually with a drag-and-drop workflow + editor and an AI-powered assistant ## Start the web interface -Use the following command to run your agent in the ADK web interface: +Use the following command to start the ADK web interface: === "Python" @@ -43,7 +53,7 @@ Use the following command to run your agent in the ADK web interface: With Maven, compile and run the ADK web server: ```console mvn compile exec:java \ - -Dexec.args="--adk.agents.source-dir=src/main/java/agents --server.port=8080" + -Dexec.args="--adk.agents.source-dir=src/main/java/agents --server.port=8000" ``` === "Gradle" With Gradle, the `build.gradle` or `build.gradle.kts` build file should have the following Java plugin in its plugins section: @@ -61,7 +71,7 @@ Use the following command to run your agent in the ADK web interface: dependsOn classes classpath = sourceSets.main.runtimeClasspath mainClass = 'com.google.adk.web.AdkWebServer' - args '--adk.agents.source-dir=src/main/java/agents', '--server.port=8080' + args '--adk.agents.source-dir=src/main/java/agents', '--server.port=8000' } ``` @@ -73,7 +83,8 @@ Use the following command to run your agent in the ADK web interface: In Java, the Web Interface and the API server are bundled together. -The server starts on `http://localhost:8000` by default: +Once started, the server prints the access URL to the console. Open it in your +browser to use the web interface: ```shell +-----------------------------------------------------------------------------+ @@ -83,17 +94,11 @@ The server starts on `http://localhost:8000` by default: +-----------------------------------------------------------------------------+ ``` -## Features - -Key features of the ADK web interface include: - -- **Chat interface**: Send messages to your agents and view responses in real-time -- **Session management**: Create and switch between sessions -- **State inspection**: View and modify session state during development -- **Event history**: Inspect all events generated during agent execution - ## Common options +Here are some commonly used options for the `adk web` command. Run `adk web +--help` to see all available options. + | Option | Description | Default | |--------|-------------|---------| | `--port` | Port to run the server on | `8000` | @@ -102,8 +107,127 @@ Key features of the ADK web interface include: | `--artifact_service_uri` | Custom artifact storage URI | Local `.adk/artifacts` | | `--reload/--no-reload` | Enable auto-reload on code changes | `true` | -### Example with options +For example: ```shell adk web --port 3000 --session_service_uri "sqlite:///sessions.db" ``` + +## Visual Builder + +
+ Supported in ADKPython v1.18.0Experimental +
+ +The ADK Visual Builder is a web-based tool that provides a visual workflow +design environment for creating and managing ADK agents. It allows you to +design, build, and test your agents in a beginner-friendly graphical interface, +and includes an AI-powered assistant to help you build agents. + +![Visual Agent Builder](../assets/visual-builder.png) + +!!! example "Experimental" + The Visual Builder feature is an experimental release. We welcome your + [feedback](https://github.com/google/adk-python/issues/new?template=feature_request.md)! + +### Create an agent + +The Visual Builder interface is part of the ADK Web tool user interface. [Start +the web interface](#start-the-web-interface), then follow the steps below to +create an agent. + +??? tip "Tip: Run from a code development directory" + + The Visual Builder tool writes project files to new subdirectories located + in the directory where you run the ADK Web tool. Make sure you run this + command from a developer directory location where you have write access. + +![Visual Agent Builder start](../assets/visual-builder-start.png) +**Figure 1:** ADK Web controls to start the Visual Builder tool. + +To create an agent with Visual Builder: + +1. In top left of the page, select the **+** (plus sign), as shown in *Figure 1*, to start creating an agent. +1. Type a name for your agent application and select **Create**. +1. Edit your agent by doing any of the following: + * In the left panel, edit agent component values. + * In the central panel, add new agent components. + * In the right panel, use prompts to modify the agent or get help. +1. In bottom left corner, select **Save** to save your agent. +1. Interact with your new agent to test it. +1. In top left of the page, select the pencil icon, as shown in *Figure 1*, to continue editing your agent. + +Here are a few things to note when using Visual Builder: + +* **Create agent and save:** When creating an agent, make sure you select + **Save** before exiting the editing interface, otherwise your new agent may + not be editable. +* **Agent editing:** Edit (pencil icon) for agents is *only* available for + agents created with Visual Builder +* **Add tools:** When adding existing custom Tools to a Visual Builder + agent, specify a fully-qualified Python function name. + +??? tip "Try this prompt with the Visual Builder assistant" + + ```none + Help me add a dice roll tool to my current agent. + Use the default model if you need to configure that. + ``` + +### Supported components + +The Visual Builder tool provides a drag-and-drop user interface for constructing +agents, as well as an AI-powered development Assistant that can answer questions +and edit your agent workflow. The tool supports all the essential components for +building an ADK agent workflow, including: + +* **Agents** + * **Root Agent**: The primary controlling agent for a workflow. All other agents in + an ADK agent workflow are considered Sub Agents. + * [**LLM Agent:**](/agents/llm-agents/) + An agent powered by a generative AI model. + * [**Sequential Agent:**](/agents/workflow-agents/sequential-agents/) + A workflow agent that executes a series of sub-agents in a sequence. + * [**Loop Agent:**](/agents/workflow-agents/loop-agents/) + A workflow agent that repeatedly executes a sub-agent until a certain condition is met. + * [**Parallel Agent:**](/agents/workflow-agents/parallel-agents/) + A workflow agent that executes multiple sub-agents concurrently. +* **Tools** + * [**Prebuilt tools:**](/integrations/) + A limited set of ADK-provided tools can be added to agents. + * [**Custom tools:**](/tools-custom/) + You can build and add custom tools to your workflow. +* **Components** + * [**Callbacks**](/callbacks/) + A flow control component that lets you modify the behavior of agents at the start + and end of agent workflow events. + +Some advanced ADK features are not supported by Visual Builder due to +limitations of the Agent Config feature. For more information, see the Agent +Config [Known limitations](/agents/config/#known-limitations). + +### Generated project structure + +The Visual Builder tool generates code in the [Agent Config](/agents/config/) +format, using `.yaml` configuration files for agents and Python code for custom +tools. These files are generated in a subfolder of the directory where you ran +the ADK Web interface. The following listing shows an example layout for a +DiceAgent project: + +```none +DiceAgent/ + root_agent.yaml # main agent code + sub_agent_1.yaml # sub agents (if any) + tools/ # tools directory + __init__.py + dice_tool.py # tool code +``` + +!!! note "Editing generated agents" + + You can edit the generated files in your development environment. However, + some changes may not be compatible with Visual Builder. + +For more information on the Agent Config code format used by Visual Builder, see +[Agent Config](/agents/config/) and [Agent Config YAML +schema](/api-reference/agentconfig/). diff --git a/docs/visual-builder/index.md b/docs/visual-builder/index.md deleted file mode 100644 index b8ea8ea77e..0000000000 --- a/docs/visual-builder/index.md +++ /dev/null @@ -1,127 +0,0 @@ -# Visual Builder for agents - -
- Supported in ADKPython v1.18.0Experimental -
- -The ADK Visual Builder is a web-based tool that provides a visual workflow -design environment for creating and managing ADK agents. It allows you to -design, build, and test your agents in a beginner-friendly graphical interface, -and includes an AI-powered assistant to help you build agents. - -![Visual Agent Builder](../assets/visual-builder.png) - -!!! example "Experimental" - The Visual Builder feature is an experimental release. We welcome your - [feedback](https://github.com/google/adk-python/issues/new?template=feature_request.md)! - -## Get started - -The Visual Builder interface is part of the ADK Web tool user interface. -Make sure you have ADK library -[installed](/get-started/installation/#python) -and then run the ADK Web user interface. - -```console -adk web --port 8000 -``` - -??? tip "Tip: Run from a code development directory" - - The Visual Builder tool writes project files to new subdirectories located - in the directory where you run the ADK Web tool. Make sure you run this - command from a developer directory location where you have write access. - -![Visual Agent Builder start](../assets/visual-builder-start.png) -**Figure 1:** ADK Web controls to start the Visual Builder tool. - -To create an agent with Visual Builder: - -1. In top left of the page, select the **+** (plus sign), as shown in *Figure 1*, to start creating an agent. -1. Type a name for your agent application and select **Create**. -1. Edit your agent by doing any of the following: - * In the left panel, edit agent component values. - * In the central panel, add new agent components . - * In the right panel, use prompts to modify the agent or get help. -1. In bottom left corner, select **Save** to save your agent. -1. Interact with your new agent to test it. -1. In top left of the page, select the pencil icon, as shown in *Figure 1*, to continue editing your agent. - -Here are few things to note when using Visual Builder: - -* **Create agent and save:** When creating an agent, make sure you select - **Save** before exiting the editing interface, otherwise your new agent may - not be editable. -* **Agent editing:** Edit (pencil icon) for agents is *only* available for - agents created with Visual Builder -* **Add tools:** When adding existing custom Tools to a Visual Builder - agent, specify a fully-qualified Python function name. - -## Workflow component support - -The Visual Builder tool provides a drag-and-drop user interface for constructing agents, as -well as an AI-powered development Assistant that can answer questions and edit your agent workflow. -The tool supports all the essential components for building an ADK agent workflow, including: - -* **Agents** - * **Root Agent**: The primary controlling agent for a workflow. All other agents in - an ADK agent workflow are considered Sub Agents. - * [**LLM Agent:**](/agents/llm-agents/) - An agent powered by a generative AI model. - * [**Sequential Agent:**](/agents/workflow-agents/sequential-agents/) - A workflow agent that executes a series of sub-agents in a sequence. - * [**Loop Agent:**](/agents/workflow-agents/loop-agents/) - A workflow agent that repeatedly executes a sub-agent until a certain condition is met. - * [**Parallel Agent:**](/agents/workflow-agents/parallel-agents/) - A workflow agent that executes multiple sub-agents concurrently. -* **Tools** - * [**Prebuilt tools:**](/integrations/) - A limited set of ADK-provided tools can be added to agents. - * [**Custom tools:**](/tools-custom/) - You can build and add custom tools to your workflow. -* **Components** - * [**Callbacks**](/callbacks/) - A flow control component that lets you modify the behavior of agents at the start - and end of agent workflow events. - -Some advanced ADK features are not supported by Visual Builder due to -limitations of the Agent Config feature. For more information, see the -Agent Config [Known limitations](/agents/config/#known-limitations). - -## Project code output - -The Visual Builder tool generates code in the [Agent Config](/agents/config/) -format, using `.yaml` configuration files for agents and Python code for custom -tools. These files are generated in a subfolder of the directory where you ran -the ADK Web interface. The following listing shows an example layout for a -DiceAgent project: - -```none -DiceAgent/ - root_agent.yaml # main agent code - sub_agent_1.yaml # sub agents (if any) - tools/ # tools directory - __init__.py - dice_tool.py # tool code -``` - -!!! note "Editing generated agents" - - You can edit the generated files in your development environment. However, - some changes may not be compatible with Visual Builder. - -## Next steps - -Using the Visual Builder development Assistant, try building a new agent using -this prompt: - -```none -Help me add a dice roll tool to my current agent. -Use the default model if you need to configure that. -``` - -Check out more information on the Agent Config code format used by Visual Builder -and the available options: - -* [Agent Config](/agents/config/) -* [Agent Config YAML schema](/api-reference/agentconfig/) diff --git a/mkdocs.yml b/mkdocs.yml index 85d69fc8f1..dd2a84a925 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -227,6 +227,7 @@ plugins: 'observability/agentops.md': 'integrations/agentops.md' 'observability/arize-ax.md': 'integrations/arize-ax.md' 'contributing-guide.md': 'community/contributing-guide.md' + 'visual-builder/index.md': 'runtime/web-interface.md' 'get-started/quickstart.md': get-started/index.md - llmstxt: @@ -236,7 +237,6 @@ plugins: Build Agents: - get-started/*.md - tutorials/*.md - - visual-builder/*.md - agents/*.md - workflows/*.md - integrations/*.md @@ -285,7 +285,6 @@ nav: - get-started/streaming/index.md - Python: get-started/streaming/quickstart-streaming.md - Java: get-started/streaming/quickstart-streaming-java.md - - Visual Builder: visual-builder/index.md - Coding with AI: tutorials/coding-with-ai.md - Advanced setup: get-started/installation.md - Agents: From 286e646b3105d20b73d26bd7bce373453e0a93ed Mon Sep 17 00:00:00 2001 From: Kristopher Overholt Date: Tue, 12 May 2026 14:45:38 -0500 Subject: [PATCH 2/7] Clarify Visual Builder in intro --- docs/runtime/web-interface.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/docs/runtime/web-interface.md b/docs/runtime/web-interface.md index 571e2fd5bb..8f0f7e3a53 100644 --- a/docs/runtime/web-interface.md +++ b/docs/runtime/web-interface.md @@ -119,10 +119,11 @@ adk web --port 3000 --session_service_uri "sqlite:///sessions.db" Supported in ADKPython v1.18.0Experimental -The ADK Visual Builder is a web-based tool that provides a visual workflow -design environment for creating and managing ADK agents. It allows you to -design, build, and test your agents in a beginner-friendly graphical interface, -and includes an AI-powered assistant to help you build agents. +The ADK Visual Builder is a feature of the ADK Web interface that provides a +visual workflow design environment for creating and managing agents. The Visual +Builder allows you to design, build, and test agents in a beginner-friendly +graphical interface, and includes an AI-powered assistant to help you build +agents. ![Visual Agent Builder](../assets/visual-builder.png) @@ -132,9 +133,8 @@ and includes an AI-powered assistant to help you build agents. ### Create an agent -The Visual Builder interface is part of the ADK Web tool user interface. [Start -the web interface](#start-the-web-interface), then follow the steps below to -create an agent. +To use the Visual Builder, [start the web interface](#start-the-web-interface), +then follow the steps below to create an agent. ??? tip "Tip: Run from a code development directory" From 5f595883c01113a9487a8dae5640a12140976329 Mon Sep 17 00:00:00 2001 From: Kristopher Overholt Date: Tue, 12 May 2026 14:52:21 -0500 Subject: [PATCH 3/7] Fix casing for consistency --- docs/runtime/web-interface.md | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/docs/runtime/web-interface.md b/docs/runtime/web-interface.md index 8f0f7e3a53..6003215f7d 100644 --- a/docs/runtime/web-interface.md +++ b/docs/runtime/web-interface.md @@ -81,7 +81,7 @@ Use the following command to start the ADK web interface: ``` - In Java, the Web Interface and the API server are bundled together. + In Java, the web interface and the API server are bundled together. Once started, the server prints the access URL to the console. Open it in your browser to use the web interface: @@ -119,7 +119,7 @@ adk web --port 3000 --session_service_uri "sqlite:///sessions.db" Supported in ADKPython v1.18.0Experimental -The ADK Visual Builder is a feature of the ADK Web interface that provides a +The ADK Visual Builder is a feature of the ADK web interface that provides a visual workflow design environment for creating and managing agents. The Visual Builder allows you to design, build, and test agents in a beginner-friendly graphical interface, and includes an AI-powered assistant to help you build @@ -133,17 +133,18 @@ agents. ### Create an agent -To use the Visual Builder, [start the web interface](#start-the-web-interface), -then follow the steps below to create an agent. +To use the Visual Builder, [start the ADK web +interface](#start-the-web-interface), then follow the steps below to create an +agent. ??? tip "Tip: Run from a code development directory" The Visual Builder tool writes project files to new subdirectories located - in the directory where you run the ADK Web tool. Make sure you run this + in the directory where you run the ADK web tool. Make sure you run this command from a developer directory location where you have write access. ![Visual Agent Builder start](../assets/visual-builder-start.png) -**Figure 1:** ADK Web controls to start the Visual Builder tool. +**Figure 1:** ADK web controls to start the Visual Builder tool. To create an agent with Visual Builder: @@ -211,7 +212,7 @@ Config [Known limitations](/agents/config/#known-limitations). The Visual Builder tool generates code in the [Agent Config](/agents/config/) format, using `.yaml` configuration files for agents and Python code for custom tools. These files are generated in a subfolder of the directory where you ran -the ADK Web interface. The following listing shows an example layout for a +the ADK web interface. The following listing shows an example layout for a DiceAgent project: ```none From 9d726799ac61c96aeee60363043fb6e39230de93 Mon Sep 17 00:00:00 2001 From: Kristopher Overholt Date: Tue, 12 May 2026 14:56:50 -0500 Subject: [PATCH 4/7] More casing fixes --- docs/runtime/web-interface.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/runtime/web-interface.md b/docs/runtime/web-interface.md index 6003215f7d..85ecd2e2b9 100644 --- a/docs/runtime/web-interface.md +++ b/docs/runtime/web-interface.md @@ -140,11 +140,11 @@ agent. ??? tip "Tip: Run from a code development directory" The Visual Builder tool writes project files to new subdirectories located - in the directory where you run the ADK web tool. Make sure you run this + in the directory where you run ADK Web. Make sure you run this command from a developer directory location where you have write access. ![Visual Agent Builder start](../assets/visual-builder-start.png) -**Figure 1:** ADK web controls to start the Visual Builder tool. +**Figure 1:** ADK Web controls to start the Visual Builder tool. To create an agent with Visual Builder: From a61e25f64eb737d615c4b0d0a7c3fcd959e0a2c0 Mon Sep 17 00:00:00 2001 From: Kristopher Overholt Date: Thu, 14 May 2026 12:50:05 -0500 Subject: [PATCH 5/7] Move Visual Builder page under Web Interface --- docs/runtime/web-interface/index.md | 114 +++++++++++++++ .../visual-builder.md} | 138 ++---------------- mkdocs.yml | 6 +- 3 files changed, 132 insertions(+), 126 deletions(-) create mode 100644 docs/runtime/web-interface/index.md rename docs/runtime/{web-interface.md => web-interface/visual-builder.md} (54%) diff --git a/docs/runtime/web-interface/index.md b/docs/runtime/web-interface/index.md new file mode 100644 index 0000000000..1de058d192 --- /dev/null +++ b/docs/runtime/web-interface/index.md @@ -0,0 +1,114 @@ +# Use the Web Interface + +
+ Supported in ADKPython v0.1.0TypeScript v0.2.0Go v0.1.0Java v0.1.0 +
+ +The ADK web interface lets you test your agents directly in the browser. This +tool provides a simple way to interactively develop and debug your agents. + +![ADK Web Interface](../../assets/adk-web-dev-ui-chat.png) + +!!! warning "Caution: ADK Web for development only" + + ADK Web is ***not meant for use in production deployments***. You should use + ADK Web for development and debugging purposes only. + +Key features of the ADK web interface include: + +- **Chat interface**: Send messages to your agents and view responses in + real-time +- **Session management**: Create and switch between sessions +- **State inspection**: View and modify session state during development +- **Event history**: Inspect all events generated during agent execution +- **Visual Builder**: Design agents visually with a drag-and-drop workflow + editor and an AI-powered assistant (Python only, [learn more](visual-builder.md)) + +## Start the web interface + +Use the following command to start the ADK web interface: + +=== "Python" + + ```shell + adk web + ``` + +=== "TypeScript" + + ```shell + npx adk web + ``` + +=== "Go" + + ```shell + go run agent.go web api webui + ``` + +=== "Java" + + Make sure to update the port number. + === "Maven" + With Maven, compile and run the ADK web server: + ```console + mvn compile exec:java \ + -Dexec.args="--adk.agents.source-dir=src/main/java/agents --server.port=8000" + ``` + === "Gradle" + With Gradle, the `build.gradle` or `build.gradle.kts` build file should have the following Java plugin in its plugins section: + + ```groovy + plugins { + id('java') + // other plugins + } + ``` + Then, elsewhere in the build file, at the top-level, create a new task: + + ```groovy + tasks.register('runADKWebServer', JavaExec) { + dependsOn classes + classpath = sourceSets.main.runtimeClasspath + mainClass = 'com.google.adk.web.AdkWebServer' + args '--adk.agents.source-dir=src/main/java/agents', '--server.port=8000' + } + ``` + + Finally, on the command-line, run the following command: + ```console + gradle runADKWebServer + ``` + + + In Java, the web interface and the API server are bundled together. + +Once started, the server prints the access URL to the console. Open it in your +browser to use the web interface: + +```shell ++-----------------------------------------------------------------------------+ +| ADK Web Server started | +| | +| For local testing, access at http://localhost:8000. | ++-----------------------------------------------------------------------------+ +``` + +## Common options + +Here are some commonly used options for the `adk web` command. Run `adk web +--help` to see all available options. + +| Option | Description | Default | +|--------|-------------|---------| +| `--port` | Port to run the server on | `8000` | +| `--host` | Host binding address | `127.0.0.1` | +| `--session_service_uri` | Custom session storage URI | In-memory | +| `--artifact_service_uri` | Custom artifact storage URI | Local `.adk/artifacts` | +| `--reload/--no-reload` | Enable auto-reload on code changes | `true` | + +For example: + +```shell +adk web --port 3000 --session_service_uri "sqlite:///sessions.db" +``` diff --git a/docs/runtime/web-interface.md b/docs/runtime/web-interface/visual-builder.md similarity index 54% rename from docs/runtime/web-interface.md rename to docs/runtime/web-interface/visual-builder.md index 85ecd2e2b9..5d0d2083a7 100644 --- a/docs/runtime/web-interface.md +++ b/docs/runtime/web-interface/visual-builder.md @@ -1,119 +1,4 @@ -# Use the Web Interface - -
- Supported in ADKPython v0.1.0TypeScript v0.2.0Go v0.1.0Java v0.1.0 -
- -The ADK web interface lets you test your agents directly in the browser. This -tool provides a simple way to interactively develop and debug your agents. - -![ADK Web Interface](../assets/adk-web-dev-ui-chat.png) - -!!! warning "Caution: ADK Web for development only" - - ADK Web is ***not meant for use in production deployments***. You should use - ADK Web for development and debugging purposes only. - -Key features of the ADK web interface include: - -- **Chat interface**: Send messages to your agents and view responses in - real-time -- **Session management**: Create and switch between sessions -- **State inspection**: View and modify session state during development -- **Event history**: Inspect all events generated during agent execution -- **Visual Builder**: Design agents visually with a drag-and-drop workflow - editor and an AI-powered assistant - -## Start the web interface - -Use the following command to start the ADK web interface: - -=== "Python" - - ```shell - adk web - ``` - -=== "TypeScript" - - ```shell - npx adk web - ``` - -=== "Go" - - ```shell - go run agent.go web api webui - ``` - -=== "Java" - - Make sure to update the port number. - === "Maven" - With Maven, compile and run the ADK web server: - ```console - mvn compile exec:java \ - -Dexec.args="--adk.agents.source-dir=src/main/java/agents --server.port=8000" - ``` - === "Gradle" - With Gradle, the `build.gradle` or `build.gradle.kts` build file should have the following Java plugin in its plugins section: - - ```groovy - plugins { - id('java') - // other plugins - } - ``` - Then, elsewhere in the build file, at the top-level, create a new task: - - ```groovy - tasks.register('runADKWebServer', JavaExec) { - dependsOn classes - classpath = sourceSets.main.runtimeClasspath - mainClass = 'com.google.adk.web.AdkWebServer' - args '--adk.agents.source-dir=src/main/java/agents', '--server.port=8000' - } - ``` - - Finally, on the command-line, run the following command: - ```console - gradle runADKWebServer - ``` - - - In Java, the web interface and the API server are bundled together. - -Once started, the server prints the access URL to the console. Open it in your -browser to use the web interface: - -```shell -+-----------------------------------------------------------------------------+ -| ADK Web Server started | -| | -| For local testing, access at http://localhost:8000. | -+-----------------------------------------------------------------------------+ -``` - -## Common options - -Here are some commonly used options for the `adk web` command. Run `adk web ---help` to see all available options. - -| Option | Description | Default | -|--------|-------------|---------| -| `--port` | Port to run the server on | `8000` | -| `--host` | Host binding address | `127.0.0.1` | -| `--session_service_uri` | Custom session storage URI | In-memory | -| `--artifact_service_uri` | Custom artifact storage URI | Local `.adk/artifacts` | -| `--reload/--no-reload` | Enable auto-reload on code changes | `true` | - -For example: - -```shell -adk web --port 3000 --session_service_uri "sqlite:///sessions.db" -``` - -## Visual Builder +# Use the Visual Builder
Supported in ADKPython v1.18.0Experimental @@ -125,17 +10,22 @@ Builder allows you to design, build, and test agents in a beginner-friendly graphical interface, and includes an AI-powered assistant to help you build agents. -![Visual Agent Builder](../assets/visual-builder.png) +![Visual Agent Builder](../../assets/visual-builder.png) !!! example "Experimental" + The Visual Builder feature is an experimental release. We welcome your [feedback](https://github.com/google/adk-python/issues/new?template=feature_request.md)! -### Create an agent +## Create an agent + +To use the Visual Builder, start the ADK web interface: + +```console +adk web +``` -To use the Visual Builder, [start the ADK web -interface](#start-the-web-interface), then follow the steps below to create an -agent. +Then follow the steps below to create an agent. ??? tip "Tip: Run from a code development directory" @@ -143,7 +33,7 @@ agent. in the directory where you run ADK Web. Make sure you run this command from a developer directory location where you have write access. -![Visual Agent Builder start](../assets/visual-builder-start.png) +![Visual Agent Builder start](../../assets/visual-builder-start.png) **Figure 1:** ADK Web controls to start the Visual Builder tool. To create an agent with Visual Builder: @@ -175,7 +65,7 @@ Here are a few things to note when using Visual Builder: Use the default model if you need to configure that. ``` -### Supported components +## Supported components The Visual Builder tool provides a drag-and-drop user interface for constructing agents, as well as an AI-powered development Assistant that can answer questions @@ -207,7 +97,7 @@ Some advanced ADK features are not supported by Visual Builder due to limitations of the Agent Config feature. For more information, see the Agent Config [Known limitations](/agents/config/#known-limitations). -### Generated project structure +## Generated project structure The Visual Builder tool generates code in the [Agent Config](/agents/config/) format, using `.yaml` configuration files for agents and Python code for custom diff --git a/mkdocs.yml b/mkdocs.yml index dd2a84a925..b367b9b42c 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -227,7 +227,7 @@ plugins: 'observability/agentops.md': 'integrations/agentops.md' 'observability/arize-ax.md': 'integrations/arize-ax.md' 'contributing-guide.md': 'community/contributing-guide.md' - 'visual-builder/index.md': 'runtime/web-interface.md' + 'visual-builder/index.md': 'runtime/web-interface/visual-builder.md' 'get-started/quickstart.md': get-started/index.md - llmstxt: @@ -328,7 +328,9 @@ nav: - Run Agents: - Agent Runtime: - Agent Runtime: runtime/index.md - - Web Interface: runtime/web-interface.md + - Web Interface: + - runtime/web-interface/index.md + - Visual Builder: runtime/web-interface/visual-builder.md - Command Line: runtime/command-line.md - API Server: runtime/api-server.md - Ambient Agents: runtime/ambient-agents.md From 27d2a8eb62e31dea9b8688f4c15e8777846d588a Mon Sep 17 00:00:00 2001 From: Kristopher Overholt Date: Thu, 14 May 2026 12:52:38 -0500 Subject: [PATCH 6/7] Fix link from runtime index page --- docs/runtime/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/runtime/index.md b/docs/runtime/index.md index aa0a7bcabe..463e0934bc 100644 --- a/docs/runtime/index.md +++ b/docs/runtime/index.md @@ -18,7 +18,7 @@ the method that best fits your development workflow. Use `adk web` to launch a browser-based interface for interacting with your agents. - [:octicons-arrow-right-24: Use the Web Interface](web-interface.md) + [:octicons-arrow-right-24: Use the Web Interface](web-interface/index.md) - :material-console:{ .lg .middle } **Command Line** From 3b58c276d4411dec3fe29bae538570580d7004d6 Mon Sep 17 00:00:00 2001 From: Kristopher Overholt Date: Mon, 18 May 2026 12:08:40 -0500 Subject: [PATCH 7/7] Keep Visual Builder file at original path, nest under Web Interface in nav --- docs/runtime/web-interface/index.md | 3 ++- .../visual-builder.md => visual-builder/index.md} | 4 ++-- mkdocs.yml | 4 ++-- 3 files changed, 6 insertions(+), 5 deletions(-) rename docs/{runtime/web-interface/visual-builder.md => visual-builder/index.md} (97%) diff --git a/docs/runtime/web-interface/index.md b/docs/runtime/web-interface/index.md index 1de058d192..b1c424c6cb 100644 --- a/docs/runtime/web-interface/index.md +++ b/docs/runtime/web-interface/index.md @@ -22,7 +22,8 @@ Key features of the ADK web interface include: - **State inspection**: View and modify session state during development - **Event history**: Inspect all events generated during agent execution - **Visual Builder**: Design agents visually with a drag-and-drop workflow - editor and an AI-powered assistant (Python only, [learn more](visual-builder.md)) + editor and an AI-powered assistant (Python only, [learn + more](/visual-builder/)) ## Start the web interface diff --git a/docs/runtime/web-interface/visual-builder.md b/docs/visual-builder/index.md similarity index 97% rename from docs/runtime/web-interface/visual-builder.md rename to docs/visual-builder/index.md index 5d0d2083a7..7156d41cde 100644 --- a/docs/runtime/web-interface/visual-builder.md +++ b/docs/visual-builder/index.md @@ -10,7 +10,7 @@ Builder allows you to design, build, and test agents in a beginner-friendly graphical interface, and includes an AI-powered assistant to help you build agents. -![Visual Agent Builder](../../assets/visual-builder.png) +![Visual Agent Builder](../assets/visual-builder.png) !!! example "Experimental" @@ -33,7 +33,7 @@ Then follow the steps below to create an agent. in the directory where you run ADK Web. Make sure you run this command from a developer directory location where you have write access. -![Visual Agent Builder start](../../assets/visual-builder-start.png) +![Visual Agent Builder start](../assets/visual-builder-start.png) **Figure 1:** ADK Web controls to start the Visual Builder tool. To create an agent with Visual Builder: diff --git a/mkdocs.yml b/mkdocs.yml index b367b9b42c..81aa0f451a 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -227,7 +227,6 @@ plugins: 'observability/agentops.md': 'integrations/agentops.md' 'observability/arize-ax.md': 'integrations/arize-ax.md' 'contributing-guide.md': 'community/contributing-guide.md' - 'visual-builder/index.md': 'runtime/web-interface/visual-builder.md' 'get-started/quickstart.md': get-started/index.md - llmstxt: @@ -245,6 +244,7 @@ plugins: - skills/*.md Run Agents: - runtime/*.md + - visual-builder/*.md - deploy/*.md - observability/*.md - evaluate/*.md @@ -330,7 +330,7 @@ nav: - Agent Runtime: runtime/index.md - Web Interface: - runtime/web-interface/index.md - - Visual Builder: runtime/web-interface/visual-builder.md + - Visual Builder: visual-builder/index.md - Command Line: runtime/command-line.md - API Server: runtime/api-server.md - Ambient Agents: runtime/ambient-agents.md