Agent Development Kit Web UI (ADK WEB)

   ![](https://raw.githubusercontent.com/google/adk-python/main/assets/agent-development-kit.png) 




  Agent Development Kit Web is the built-in developer UI that integrated with Google Agent Development Kit for easier agent development and debug.




  Important Links:
  [Docs](https://google.github.io/adk-docs/) &
  [Samples](https://github.com/google/adk-samples).

Agent Development Kit (ADK) is a flexible and modular framework for developing and deploying AI agents. While optimized for Gemini and the Google ecosystem, ADK is model-agnostic, deployment-agnostic, and is built for compatibility with other frameworks. ADK was designed to make agent development feel more like software development, to make it easier for developers to create, deploy, and orchestrate agentic architectures that range from simple tasks to complex workflows.

ADK web is the built-in dev UI that comes along with adk for easier development and debug.

✨ Prerequisites

• Install npm

• Install Node.js

• Install Angular CLI

• Install google-adk (Python)

• Install google-adk (Java)

• Clone adk-web (this repo)

🚀 Running adk web

To be able to run adk web, follow the steps from the root of your local adk-web folder:

Install dependencies

npm install

Run adk web

npm run serve

Run adk api web server

In another terminal run:

adk web

The dev server proxies API calls through to the backend, so from the browser's point of view everything is same-origin. --allow_origins and --host=0.0.0.0 are no longer needed.

Custom frontend and backend ports

Each side picks its own port. Tell the dev server where the backend is with ADK_BACKEND, and pass --port through to ng serve for the frontend:

adk web --port 9000                                              # backend
ADK_BACKEND=http://127.0.0.1:9000 npm run serve -- --port 5555   # frontend

The backend never needs to know the frontend's port. ADK_BACKEND accepts any URL, including a remote host (ADK_BACKEND=http://my-workstation:8000); a backend reachable from another machine still needs --host 0.0.0.0. Restart npm run serve after changing ADK_BACKEND, since the proxy configuration is read once at startup.

Do not pass --url_prefix in this two-process setup — the prefix would not match the dev server's proxy routes. Reverse-proxy prefixes are exercised by the backend's own tests instead.

If you see adk command not found, then be sure to install google-adk (or remember to activate your virtual environment if you are using one)

Happy development

Go to localhost:4200 and start developing!

Screenshots

Events

Tracing

Artifacts

Evaluations

Agent builder & assistant

And more!

🤝 Contributing

We welcome contributions from the community! Whether it's bug reports, feature requests, documentation improvements, or code contributions, please see our

• General contribution guideline and flow.

Testing quirks

The tests in this repo also run in Google's internal test environment, so testing code must follow a few rules:

• initTestBed() from ./src/app/testing/utils.ts must be called before TestBed.configureTestingModule()

📄 License

This project is licensed under the Apache 2.0 License - see the LICENSE file for details.

Preview

This feature is subject to the "Pre-GA Offerings Terms" in the General Service Terms section of the Service Specific Terms. Pre-GA features are available "as is" and might have limited support. For more information, see the launch stage descriptions.

Happy Agent Building!