Skip to content

Add experimental built-in visualization tools#18785

Draft
LyalinDotCom wants to merge 2 commits intomainfrom
gemini-cli-visualizers
Draft

Add experimental built-in visualization tools#18785
LyalinDotCom wants to merge 2 commits intomainfrom
gemini-cli-visualizers

Conversation

@LyalinDotCom
Copy link
Copy Markdown
Collaborator

Summary

This PR introduces an experimental built-in visualization capability for Gemini CLI.

It consolidates visual output into render_visualization and adds terminal-native rendering for:

  • bar
  • line
  • pie
  • table
  • diagram

It also improves first-shot tool-call reliability by accepting canonical payloads and common shorthand aliases.

Closes #18784

What changed

  • Added built-in render_visualization tool and wiring in core tool registry.
  • Added normalization paths for canonical + shorthand payload shapes.
  • Added directional diagram rendering with box-and-arrow canvas output in CLI.
  • Added automatic colorized visual output styling.
  • Updated prompt snippets/tool guidance so models are steered toward correct visualization payloads.
  • Added/updated focused tests for core normalization and CLI rendering paths.
  • Added plan/visualer.md with the original exploration plan used for this experiment.

Notes

  • This is intentionally scoped as an experimental feature for team evaluation and iteration.
  • Backward compatibility with previous visualization tool surfaces is not targeted in this iteration.

Validation

  • npm run typecheck --workspace @google/gemini-cli-core
  • npm run typecheck --workspace @google/gemini-cli
  • npm run test --workspace @google/gemini-cli-core -- src/tools/render-visualization.test.ts src/prompts/core/prompts.test.ts src/prompts/core/prompts-substitution.test.ts
  • npm run test --workspace @google/gemini-cli -- src/ui/components/messages/VisualizationDisplay.test.tsx src/ui/components/messages/ToolResultDisplay.test.tsx
  • Targeted lint passes for touched core + cli files.

@gemini-code-assist
Copy link
Copy Markdown
Contributor

Summary of Changes

Hello @LyalinDotCom, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request integrates a new experimental feature into the Gemini CLI, enabling the display of various data visualizations directly within the terminal. This enhancement aims to improve the user experience by providing rich, structured visual feedback for complex data, such as charts, tables, and diagrams. It also streamlines the process for models to generate these visualizations by supporting flexible data input formats, making the CLI more powerful for data analysis and presentation.

Highlights

  • Experimental Built-in Visualization Tools: Introduced an experimental built-in visualization capability for the Gemini CLI, consolidating visual output into a new render_visualization tool.
  • Terminal-Native Rendering: Added terminal-native rendering support for various visualization types: bar, line, pie, table, and diagram.
  • Improved Tool-Call Reliability: Enhanced first-shot tool-call reliability by accepting canonical payloads and common shorthand aliases for visualization data.
  • Prompt Guidance Updates: Updated prompt snippets and tool guidance to steer models towards generating correct visualization payloads.
  • New Tool and UI Components: Added the RenderVisualizationTool to the core tool registry and implemented new UI components (VisualizationResultDisplay) for rendering these visualizations in the CLI.
Changelog
  • packages/cli/src/ui/components/DebugProfiler.tsx
    • Removed logic that automatically opened the debug console when the app was idle.
  • packages/cli/src/ui/components/messages/ToolResultDisplay.test.tsx
    • Imported VisualizationResult type.
    • Added tests for rendering bar and diagram visualization results within the ToolResultDisplay component.
  • packages/cli/src/ui/components/messages/ToolResultDisplay.tsx
    • Imported VisualizationResultDisplay component and VisualizationResult type.
    • Implemented conditional rendering to display VisualizationResultDisplay for tool results of type 'visualization'.
  • packages/cli/src/ui/components/messages/VisualizationDisplay.test.tsx
    • Added a new test file for VisualizationResultDisplay.
    • Included tests for rendering bar, line, pie, table, and diagram visualizations, verifying content and structure.
  • packages/cli/src/ui/components/messages/VisualizationDisplay.tsx
    • Added a new file implementing the VisualizationResultDisplay component.
    • Provided React components and utility functions for rendering various visualization types (bar, line, pie, table, diagram) in the terminal, including styling, truncation, and data formatting.
  • packages/core/src/config/config.ts
    • Imported RenderVisualizationTool.
    • Registered RenderVisualizationTool in the tool registry, making it available for use.
  • packages/core/src/index.ts
    • Exported the new render-visualization.js module.
  • packages/core/src/prompts/promptProvider.ts
    • Imported RENDER_VISUALIZATION_TOOL_NAME.
    • Added enableVisualizationTool to the prompt options, allowing conditional inclusion of visualization guidance.
  • packages/core/src/prompts/snippets.legacy.ts
    • Imported RENDER_VISUALIZATION_TOOL_NAME.
    • Added enableVisualizationTool to the OperationalGuidelinesOptions interface.
    • Integrated toolUsageVisualization into the operational guidelines snippet.
    • Added the toolUsageVisualization function to provide specific guidance for using the visualization tool.
  • packages/core/src/prompts/snippets.ts
    • Imported RENDER_VISUALIZATION_TOOL_NAME.
    • Added enableVisualizationTool to the OperationalGuidelinesOptions interface.
    • Integrated toolUsageVisualization into the operational guidelines snippet.
    • Added the toolUsageVisualization function to provide specific guidance for using the visualization tool.
  • packages/core/src/tools/definitions/coreTools.ts
    • Defined RENDER_VISUALIZATION_TOOL_NAME as a new constant.
  • packages/core/src/tools/render-visualization.test.ts
    • Added a new test file for RenderVisualizationTool.
    • Included tests for rendering bar, line, pie, table, and diagram visualizations, covering canonical and shorthand payloads, legacy dashboard conversions, and invalid input handling.
  • packages/core/src/tools/render-visualization.ts
    • Added a new file implementing the RenderVisualizationTool class.
    • Provided logic for validating, normalizing, and processing data for various visualization kinds (bar, line, pie, table, diagram), including support for shorthand inputs and truncation.
  • packages/core/src/tools/tool-names.ts
    • Imported and re-exported RENDER_VISUALIZATION_TOOL_NAME.
    • Added RENDER_VISUALIZATION_TOOL_NAME to the ALL_BUILTIN_TOOL_NAMES array.
  • packages/core/src/tools/tools.ts
    • Defined new types for VisualizationKind, DiagramKind, DiagramNode, DiagramEdge, VisualizationPoint, VisualizationSeries, VisualizationPieSlice, VisualizationTableData, VisualizationDiagramData, and VisualizationData.
    • Extended ToolResultDisplay to include the new VisualizationDisplay type, allowing visualization results to be displayed.
  • plan/visualer.md
    • Added a new markdown file detailing the plan for the built-in visualization tool.
    • Outlined the summary, goals, product decisions, API changes, architecture, rendering behavior, data parsing strategy, dynamic volume handling, testing plan, rollout plan, risks, and assumptions for the visualization feature.
Activity
  • The pull request introduces a new experimental feature for built-in visualization tools, consolidating visual output and adding terminal-native rendering for various chart types.
  • It also improves tool-call reliability by accepting canonical and shorthand payloads.
  • Prompt snippets and tool guidance have been updated to direct models towards correct visualization payloads.
  • New files for the RenderVisualizationTool and its UI components have been added, along with comprehensive tests.
  • The feature is initially scoped as experimental for team evaluation and iteration, with no backward compatibility targeted for previous visualization tool surfaces.
Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature Command Description
Code Review /gemini review Performs a code review for the current pull request in its current state.
Pull Request Summary /gemini summary Provides a summary of the current pull request in its current state.
Comment @gemini-code-assist Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help /gemini help Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

  1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution.

@gemini-cli gemini-cli Bot added the area/agent Issues related to Core Agent, Tools, Memory, Sub-Agents, Hooks, Agent Quality label Feb 11, 2026
Comment on lines +869 to +872
value
.toLowerCase()
.replace(/[^a-z0-9]+/g, '-')
.replace(/^-+|-+$/g, '') || 'node';

Check failure

Code scanning / CodeQL

Polynomial regular expression used on uncontrolled data High

This
regular expression
that depends on
library input
may run slow on strings with many repetitions of '-'.
This
regular expression
that depends on
library input
may run slow on strings with many repetitions of '-'.
@github-actions
Copy link
Copy Markdown

github-actions Bot commented Feb 11, 2026

Size Change: +63.9 kB (+0.26%)

Total Size: 24.4 MB

Filename Size Change
./bundle/gemini.js 24.3 MB +63.9 kB (+0.26%)
ℹ️ View Unchanged
Filename Size
./bundle/sandbox-macos-permissive-closed.sb 1.03 kB
./bundle/sandbox-macos-permissive-open.sb 890 B
./bundle/sandbox-macos-permissive-proxied.sb 1.31 kB
./bundle/sandbox-macos-restrictive-closed.sb 3.29 kB
./bundle/sandbox-macos-restrictive-open.sb 3.36 kB
./bundle/sandbox-macos-restrictive-proxied.sb 3.56 kB

compressed-size-action

Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request introduces an experimental but powerful built-in visualization capability to the CLI. The implementation is comprehensive, covering various chart types and including robust data normalization to handle different payload shapes from the LLM. The terminal-native rendering for diagrams is particularly impressive.

My review focuses on two main areas for improvement:

  1. Architecture: There's significant code duplication between the core tool logic and the UI rendering component. The UI component re-implements data parsing instead of consuming the strongly-typed data structure provided by the core tool. This should be refactored to improve maintainability and reduce the chance of inconsistencies.
  2. Correctness: A bug in the diagram node ID generation could cause the tool to fail unexpectedly when node labels slugify to the same ID.

Addressing these points will make this new feature more robust and maintainable. Overall, this is a great addition to the Gemini CLI's capabilities.

Comment on lines +978 to +989
case 'bar': {
const series = asSeries(visualization.data);
if (series.length === 0) {
return noDataLine(colors);
}
return renderBarLines(series[0], width, visualization.unit).map(
(text, index) => ({
text,
color: colorAtPalette(colors.palette, index, colors.primary),
}),
);
}
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

critical

This component seems to be re-implementing data normalization and parsing logic (e.g., asSeries, asSlices, asTable, asDiagram) that is already handled by the RenderVisualizationTool in the @google/gemini-cli-core package. The core tool is designed to produce a strongly-typed VisualizationData object, but this component's VisualizationResult type defines data as Record<string, unknown> and then re-parses it.

This duplication can lead to inconsistencies between the core tool's output and the UI's interpretation, and increases maintenance overhead. The UI component should trust the data structure it receives from the core package.

I recommend refactoring this component to:

  1. Update the VisualizationResult interface to use the VisualizationData type from @google/gemini-cli-core.
  2. Remove the asSeries, asSlices, asTable, and asDiagram helper functions.
  3. Update buildKindLines to directly use the properties of the strongly-typed visualization.data object.

For example, the bar case could be simplified to directly access visualization.data.series:

    case 'bar': {
      if (!('series' in visualization.data) || visualization.data.series.length === 0) {
        return noDataLine(colors);
      }
      return renderBarLines(visualization.data.series[0], width, visualization.unit).map(
        (text, index) => ({
          text,
          color: colorAtPalette(colors.palette, index, colors.primary),
        }),
      );
    }

Comment on lines +957 to +960
if (ids.has(id)) {
throw new Error(`Duplicate node id detected: "${id}".`);
}
ids.add(id);
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

high

There's a potential bug in the diagram node ID generation. If two different node labels slugify to the same ID (e.g., "Web UI" and "Web-UI" could both become "web-ui"), and no explicit id is provided, this code will throw a Duplicate node id detected error.

This should be handled more gracefully, similar to how string-only nodes are de-duplicated by appending a suffix. I suggest adding logic to de-duplicate derived IDs to prevent the tool from failing unexpectedly.

Suggested change
if (ids.has(id)) {
throw new Error(`Duplicate node id detected: "${id}".`);
}
ids.add(id);
if (ids.has(id)) {
// If an explicit ID is provided and it's a duplicate, throw.
if (typeof node['id'] === 'string' && node['id'].trim() === id) {
throw new Error(`Duplicate node id detected: "${id}".`);
}
// Otherwise, it was derived, so de-duplicate.
const baseId = id;
let suffix = 2;
while (ids.has(id)) {
id = `${baseId}-${suffix++}`;
}
}
ids.add(id);

@gemini-cli gemini-cli Bot added the 🔒 maintainer only ⛔ Do not contribute. Internal roadmap item. label Feb 11, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area/agent Issues related to Core Agent, Tools, Memory, Sub-Agents, Hooks, Agent Quality 🔒 maintainer only ⛔ Do not contribute. Internal roadmap item.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Experimental: Add experimental built-in visualization tools to Gemini CLI

2 participants