feat(cockpit): ag-ui/json-render — AG-UI shared-state generative UI#608
Merged
Conversation
PR-B of the generative-UI effort: two cockpit examples demonstrating backend-sent UI specs over AG-UI — ag-ui/json-render (agent emits a json-render spec) and ag-ui/a2ui (agent emits an A2UI envelope). Faithful ports of the chat/generative-ui and chat/a2ui LangGraph examples onto the ag-ui-langgraph runtime, same airline domains. Purely example work: the content classifier is adapter-agnostic and the AG-UI reducer preserves raw content, so no chat-lib or adapter changes. One spec, two PRs (json-render first). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…livery Research found json-render's dashboard data (custom get_stream_writer events) does not survive ag-ui-langgraph. Revise PR-B1 to deliver data as AG-UI agent shared state (STATE_SNAPSHOT/STATE_DELTA): backend stores data in graph state (output-schema-visible); add one small runtime-neutral chat-lib effect syncing agent.state() into the render store. Makes ag-ui/json-render the cockpit's first AG-UI shared-state demo. a2ui (PR-B2) unaffected (data rides in the envelope content). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Vertical-slice-first plan: chat-lib state-sync effect, a minimal end-to-end slice proving the STATE_SNAPSHOT data path, then the full generative-ui graph port (data in graph state), 6 dashboard views, full e2e fixtures, and registry/manifest wiring. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…roof) Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…n state) Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
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
1 participant
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.
Summary
Adds the
ag-ui/json-rendercockpit example (PR-B1 of the AG-UI backend-spec effort): a port of thechat/generative-uiairline-KPI dashboard onto the AG-UI runtime, demonstrating AG-UI shared-state → generative UI — the cockpit's first example exercisingSTATE_SNAPSHOT/STATE_DELTA.The render spec is emitted in AI message content (the content classifier mounts
<chat-generative-ui>, unchanged). The dashboard data is delivered the idiomatic AG-UI way: stored in LangGraph graph state (soag-ui-langgraphauto-emitsSTATE_SNAPSHOT), reduced into the agentstatesignal, and synced into the render store by one small new chat-lib effect — where the spec's$statebindings resolve it.Why a chat-lib change (not pure example work)
Research found the LangGraph example's data channel (
get_stream_writer()) is silently dropped byag-ui-langgraph(it consumesastream_events, where stream-writer payloads never surface). The idiomatic AG-UI fix is shared state — but the<chat>composition didn't feedagent.state()into the render store (onlyevents$custom events). This PR closes that latent gap.Changes
libs/chat—ChatComponentgains a small, runtime-neutral effect syncing the agentstatesignal into the render store (top-level keys mapped to/keyJSON pointers;messagesexcluded). Unit-tested (chat-state-sync.spec.ts). Benefits both adapters; coexists with the existingevents$state_updatepath.cockpit/ag-ui/json-render/python— fullchat/generative-uigraph port (render_spec + 4 data tools +wrap_spec_into_ailoop with_MAX_TOOL_ITERATIONScap +finalize/respond/generate_title), withemit_statereturning dashboard data into typedDashboardStatefields (output-schema-visible) instead of stream-writer.MemorySavercheckpointer for the ag-ui-langgraph runtime.cockpit/ag-ui/json-render/angular—provideAgent({url:'/agent'})+ the six dashboard view components (verbatim from the chat sibling) + theviewsregistry.app-stat-cardshows a non-empty state-bound KPI value (proves the full STATE_SNAPSHOT data path).PR-B2 (
ag-ui/a2ui) is a separate future PR (its data rides in the message-content envelope, needing no lib change).Test Plan
nx test chatgreen (incl. newchat-state-synceffect test)nx test cockpit --run cockpit-e2e-wiring route-resolution+nx test cockpit-registrygreennx e2e cockpit-ag-ui-json-render-angular— dashboard renders with a non-empty STATE_SNAPSHOT-bound KPI valuenx smoke(python + angular) +nx buildgreen🤖 Generated with Claude Code