Generative UI: structured component system for rich chat responses#210
Draft
esafwan wants to merge 3 commits into
Draft
Generative UI: structured component system for rich chat responses#210esafwan wants to merge 3 commits into
esafwan wants to merge 3 commits into
Conversation
Comprehensive analysis of whether Tambo-style generative UI can be implemented in Huf's chat feature. Key findings: - Huf already has ~80% of the infrastructure via jsx-preview system - react-jsx-parser + 100+ component registry already renders AI-generated React components in chat - Recommends Tier 1 structured tag approach (<ui-component>) for reliable data/presentation separation - No backend changes needed; ~200-300 lines of frontend additions - No separate POC required — integrates directly into existing chat Includes detailed architecture analysis, integration options, challenges, and a concrete minimal implementation example. Co-authored-by: Safwan Erooth <esafwan@users.noreply.github.com>
Add <ui-component> tag parsing and rendering pipeline alongside existing artifact/jsx-preview/web-preview systems. Nine purpose-built renderers for ERP/analytics use cases: - stats-card: Single KPI metric with trend indicator - kpi-grid: Multiple KPIs in responsive grid layout - bar-chart: Vertical/horizontal/stacked bar charts via Recharts - line-chart: Trend lines with multi-series support - pie-chart: Pie/donut charts with labels - area-chart: Stacked/layered area charts - data-table: Sortable tables with badge-formatted status columns - progress-card: Single or multi-bar progress tracking - info-card: Key-value detail cards with status badges Architecture: - Parser (uiComponentParser.ts): Extracts <ui-component> self-closing tags - Registry (registry.ts): Maps type strings to renderer components - Dispatcher (UIComponentRenderer.tsx): Renders or shows graceful fallback - Integration: Wired into MessageContentWithArtifacts parsing pipeline No backend changes required. AI agents emit structured tags in their text responses; the frontend handles rendering with typed, validated data. Co-authored-by: Safwan Erooth <esafwan@users.noreply.github.com>
Detailed step-by-step documentation covering: - 10 ERP/analytics test examples with exact agent prompts, expected response formats, and rendered output descriptions - Agent instruction templates (minimal and full versions) - Quick-test methods without an AI agent (browser console, Frappe API message injection, parser unit tests) - Complete component reference with all properties and types - Troubleshooting guide for common issues Examples cover realistic ERP scenarios: - Revenue KPIs and financial dashboards - Regional sales comparison charts - Monthly revenue trends with target overlays - Expense breakdowns (pie/donut charts) - Cash flow area charts - Outstanding invoice tables with status badges - Quarterly target progress bars - Sales order detail cards - Full multi-component sales reports Co-authored-by: Safwan Erooth <esafwan@users.noreply.github.com>
cursor
Bot
changed the title
Collaborator
|
Inject the system prompt with a checkbox "Use generative UI" |
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
3 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.
Summary
Implements a structured UI component system (
<ui-component>tags) that enables AI agents to render rich, interactive React components inline in chat messages. No backend changes required.What This Adds
Structured Tag System
AI agents can now emit
<ui-component>tags in their text responses to render purpose-built components:The tag is parsed, the type is looked up in a registry, and the appropriate React renderer displays a polished component inline. Surrounding text renders normally as markdown.
9 ERP/Analytics-Focused Renderers
stats-cardkpi-gridbar-chartline-chartpie-chartarea-chartdata-tableprogress-cardinfo-cardArchitecture
Follows the exact same pattern as existing
<artifact>,<jsx-preview>, and<web-preview>parsers.Graceful Fallback
/>is fully receivedFiles Changed
New Files
frontend/src/utils/uiComponentParser.ts— tag parserfrontend/src/components/chat/ui-components/registry.ts— type → renderer mapfrontend/src/components/chat/ui-components/UIComponentRenderer.tsx— dispatcherfrontend/src/components/chat/ui-components/renderers/— 9 renderer componentsdocs/evaluations/generative-ui-feasibility.md— feasibility analysis reportdocs/evaluations/generative-ui-testing-guide.md— testing guide with 10 ERP examplesModified Files
frontend/src/types/artifact.types.ts— addedParsedUIComponenttypesfrontend/src/components/chat/MessageContentWithArtifacts.tsx— wired in UI component parsingHow to Test
See
docs/evaluations/generative-ui-testing-guide.mdfor detailed instructions. Quick summary:<ui-component>tags that render as interactive charts, tables, and cardsAlternatively, inject test messages directly via Frappe API (documented in the testing guide).
Verification
npx tsc --noEmitpasses with 0 errors