Skip to content

Comprehensive Visual and Customization Improvements #2859

@rtejada-g

Description

@rtejada-g

Is your feature request related to a problem? Please describe.
When using the ADK for demos, proofs-of-concept, or custom implementations, the current developer experience can use customizability and aesthetic improvements: the web UI lacks easy customization options for rebranding/white-labeling, and the UI's readability can be enhanced with more descriptive graph labels and clearer visual distinctions between event types. For example, graph nodes show raw function names which can be cryptic, tool call events are not visually distinct from tool responses, the event JSON underneath the rendered graph could be shown with a "show details" button

Describe the solution you'd like
A set of features that address these limitations by improving the visual presentation, customization, and overall developer experience for both adk-python and adk-web.

adk-python Improvements

  • ADK_WEB_DIR Environment Variable: The CLI should support an ADK_WEB_DIR environment variable to allow developers to serve a local adk-web build from a specified file path.
  • displayName for FunctionTool: The FunctionTool class should accept a displayName parameter to allow the graph visualization to use a more human-readable label for tool nodes.
  • Artifact Filename from displayName: Artifact handling logic should use the tool's displayName when generating filenames for saved artifacts.

adk-web Improvements

  • Configurable Custom Logo: The top bar logo should be loaded dynamically from a customLogoUrl property in src/assets/config.json.
  • Graph displayName Rendering: The graph visualization component should render the displayName provided by the backend for tool nodes.
  • PDF Artifact Rendering: The frontend should identify artifacts with the application/pdf mimetype and render them as a downloadable link with a distinct icon.
  • Color-Coded Tool Pellets: The CSS for the chat interface should apply distinct background colors to tool call and tool response "pellets." This makes the velocity of the agent's working process actually visible for stakeholders.
  • Event JSON Toggle: An optional "Show/Hide" toggle should be added to the event details panel, with the JSON hidden by default.
  • Graph Resizing Fix: The graph visualization should not resize when the user paginates through events.

Describe alternatives you've considered
The only real alternative to having these improvements is to continuously maintain it in a private fork. However, contributing them to the upstream repositories allows the entire community to benefit from the improved developer experience and makes long-term maintenance more sustainable. For the custom logo, an environment variable was considered, but a frontend configuration file (config.json) is more idiomatic for web applications and offers more flexibility for future UI-related settings.

Additional context
These features have been implemented across the adk-python and adk-web repositories. Corresponding pull requests that resolve this issue will be linked. Some screenshots of the implemented features are below:

Image Image Image

Metadata

Metadata

Assignees

Labels

bot triaged[Bot] This issue is triaged by ADK botweb[Component] This issue will be transferred to adk-web

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions