Integrate Shadify for AI-generated UI components

Start with apps/app/src/components/generative-ui/ to understand the existing widgets, then study the referenced Shadify files: chat-kit.tsx, middleware.py, and tree-to-jsx.ts. Done means Shadify components coexist with the current widgets, structured output renders in the chat, and code export and the proposed web-search tooling are integrated.

Summary

Integrate Shadify into OpenGenerativeUI to enable the agent to generate rich, interactive UI components from natural language — beyond the current hardcoded generative UI examples (charts, meeting time picker).

Motivation

Currently, OpenGenerativeUI has a fixed set of generative UI components in apps/app/src/components/generative-ui/ (bar chart, pie chart, meeting time picker, widget renderer). Adding new component types requires writing custom React components and wiring them up manually.

Shadify solves this by letting the agent dynamically generate shadcn/ui components from natural language descriptions. Instead of a closed set of predefined widgets, the agent could produce any combination of cards, forms, tables, charts, calendars, menus, and more — all accessible, production-ready shadcn/ui components.

What Shadify Provides

• Component exposure system: Uses exposeComponent() to register available UI components (cards, buttons, inputs, charts, dropdowns, code blocks, etc.) with typed schemas the agent understands
• Structured output: Agent generates JSON component trees validated against the exposed schemas
• Live rendering: Frontend parses streaming JSON and renders components in real-time via kit.render()
• Code export: Converts component trees to clean, exportable React/JSX code
• Web search tools: Agent can research design patterns via Tavily API before generating UI

Proposed Integration

Phase 1: Add Shadify's component library to the frontend

• Install @hashbrownai/react (Shadify's component rendering library)
• Port the useChatKit() / useUiKit() pattern to expose shadcn/ui components to the agent
• Add the component rendering pipeline (JSON parser → kit.render()) alongside existing generative UI

Phase 2: Extend the agent with structured output

• Add Shadify's apply_structured_output_schema middleware to the LangGraph agent
• Expose the component schema so the agent knows what it can build
• Allow the agent to generate UI components as tool responses in the chat

Phase 3: Code export & polish

• Add an export panel so users can copy generated component code
• Integrate the treeToJsx converter for clean React code output
• Add Shadify's web search tools (Tavily) so the agent can research before building UI

Key Architecture Considerations

• Coexistence with todo list: The todo list uses CopilotKit v2 agent state (agent.state.todos). Shadify's generated components would live in the chat/message stream, not in agent state — these patterns complement each other.
• Shared infrastructure: Both projects use CopilotKit + LangGraph + pnpm monorepo, so the integration surface is natural.
• Incremental adoption: Shadify components can be added alongside existing generative UI widgets without replacing them.

References

• Shadify repo: https://github.com/CopilotKit/shadify
• Key files to study: apps/ui/src/components/chat/chat-kit.tsx (component exposure), apps/agent/src/middleware.py (structured output), apps/ui/src/lib/tree-to-jsx.ts (code export)