Add "Draw Charts from an Agent" how-to#115
Merged
Merged
Conversation
An ADP agent that emits a fenced ```chart code block holding a strict-JSON Chart.js v4 config gets that block rendered as an interactive chart in the agent's Inspector and Transcripts views. Nothing documented this, so users had no way to discover the contract or make an agent use it. The page is task-oriented: the fence/JSON contract, the supported chart types, a system-prompt snippet with a worked example, how to test it in the Inspector, how to set options and colors, and a troubleshooting table for the error and streaming-placeholder states. Every claim is checked against the adp-ui chart renderer on origin/main and verified live on ai.redpanda.com. The two screenshots are sanitized and carry no identifiable data. Adds a nav entry under the connect section.
✅ Deploy Preview for redpanda-agentic-data-plane ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Contributor
Author
|
can we merge? |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
A new connect how-to,
modules/connect/pages/draw-charts.adoc, plus a nav entry under the connect section and two screenshots.When an ADP agent emits a fenced code block tagged ```chart whose body is a strict-JSON Chart.js v4 config, the Redpanda Cloud UI renders that block as an interactive chart in the agent Inspector and Transcripts views. The page documents the contract, the supported chart types, how to make an agent emit charts through its system prompt, how to test it, how to set options and colors, and the error and streaming-placeholder states.
Why
The feature shipped to ai.redpanda.com (cloudv2 #27566) with no documentation. Users had no way to discover the fence/JSON contract, which chart types work, or how to get an agent to draw a chart at all.
Implementation details
The page is task-oriented and grounded entirely in the shipped behavior:
chart; the body is strict JSON parsed with JSON.parse (no eval, so no functions, callbacks, or comments); the body is a raw Chart.js config with top-leveltypeanddataplus optionaloptions, with no wrapper envelope.Every claim was checked against the adp-ui chart renderer (
chart-block.tsx,chart-block-renderer.tsx,ai-elements/response.tsx) on origin/main and verified live on ai.redpanda.com. The two screenshots are sanitized and carry no identifiable data.The branch is based on the current default branch; the diff is only these docs changes.
References
cloudv2 #27566
Preview pages