feat: add interactive notebook app for OpenGenerativeUI demos#81
Open
GeneralJerel wants to merge 6 commits intomainfrom
Open
feat: add interactive notebook app for OpenGenerativeUI demos#81GeneralJerel wants to merge 6 commits intomainfrom
GeneralJerel wants to merge 6 commits intomainfrom
Conversation
Adds a standalone Next.js app (apps/notebook) that explains OpenGenerativeUI concepts in a Jupyter notebook-like format with markdown cells, syntax- highlighted code cells (Shiki), and interactive playground cells (Sandpack). 6 chapters: Introduction, Agent State, Generative UI, CopilotKit Hooks, Frontend Tools, and Widget Renderer — each with live editable examples. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Rewrites all 6 chapters to cover the 4 key areas: - Widget Renderer (iframe assembly, streaming, Idiomorph, bridge JS) - CopilotKit (hooks, runtime, useAgent, useComponent, provider) - Deep Agent (create_deep_agent, tools, system prompt, BoundedMemorySaver) - MCP Skills (skill server, playbooks, design system, assemble_document) - Full end-to-end flow tracing a user message through all layers Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
All playground cells now produce real output instead of just describing what would happen: - Widget Renderer: real streaming HTML into an iframe with progress bar + live bridge demo (sendPrompt/auto-resize via postMessage) - CopilotKit: working chat stream that renders actual charts (Recharts) + bidirectional state sync with a live todo app - Deep Agent: full pipeline that renders a real animated widget in an iframe at the end (not just JSON labels) - MCP Skills: live design system token explorer rendering real HTML in iframes + interactive SVG diagram builder following skill rules - Full Flow: chat-like demo where you pick a prompt and get a fully rendered visualization (dashboard/chart/architecture diagram) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Drops the MCP Skills chapter and removes MCP references from the introduction and full flow chapters. Notebook now covers 3 core systems: Widget Renderer, CopilotKit, and Deep Agent. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…kills - Add fullscreen button (expand icon) to all playground cells with Escape key to exit; body scroll locked while fullscreen - Rewrite MCP Skills chapter as "Agent Skills" — focuses on how skill documents (SKILL.md) teach the agent to write code: decision tree, response format selection, design system tokens - Reorder chapters: Introduction → Deep Agent → Agent Skills → CopilotKit → Widget Renderer → Putting It Together Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…ee diagrams - New MermaidCell type and mermaid-cell.tsx component (lazy-loaded, client-only, dark mode reactive via MutationObserver) - Architecture diagram in Introduction chapter showing User → CopilotKit → Deep Agent → Tools → Widget Renderer flow - Decision tree diagram in Agent Skills chapter showing question type → output format mapping from the master playbook skill - Both diagrams use the existing pastel color palette with style directives for consistent theming Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
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
apps/notebook) that explains OpenGenerativeUI concepts in a Jupyter notebook-like formatpnpm dev:notebookTest plan
pnpm dev:notebookand verify it starts on port 3001pnpm build --filter='@repo/notebook'to verify production build🤖 Generated with Claude Code