ADK Agent Code Visualizer

This application helps you visualize the structure of your ADK (Agent Development Kit) agent code using ReactFlow. You can paste your Java or Python ADK code into the editor, and the application will generate a graph that shows the relationships between the different components of your agent. This is useful for understanding the overall architecture of your agent and for debugging.

Note

This tool works best for single-file ADK agent definitions. It may not work well for multi-file agent definitions, with externalized prompts, or with all possible types of agents.

This application was vibe-coded with the help of Google AI Studio and the Gemini CLI.

Run Locally

Prerequisites: Node.js

1. Install dependencies: npm install
2. Set the GEMINI_API_KEY in .env.local to your Gemini API key
3. Run the backend server: npm start
4. In a separate terminal, run the frontend development server: npm run dev

Build and Deploy to Google Cloud Run

Prerequisites:

• A Google Cloud account and a Google Cloud project.
• The Google Cloud SDK installed and configured.

You can build and deploy this application to Google Cloud Run using Google Cloud Build.

1. Run the following command to submit a build to Google Cloud Build, which will then deploy the application to Cloud Run:

   gcloud builds submit

License

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

Disclaimer

This is not an official Google product. It is a proof of concept and not a final product.