fix(shell-docs): wire generative-ui pages with framework-aware demo content

The four pages all had the same shape problem: prose followed by
<IntegrationGrid>, which hides on framework-scoped routes via
useFramework() -> null. On /<framework>/<slug> URLs the picker
disappears and the page truncates to a content-less heading.

Add InlineDemo + Snippet + FeatureIntegrations blocks above the picker
so framework-scoped routes still render demo content:

- interactive.mdx: cell gen-ui-interrupt, regions
  frontend-useinterrupt-render and backend-interrupt-tool.
- state-rendering.mdx: cell shared-state-streaming, regions
  frontend-use-coagent-state and state-streaming-middleware.
- display.mdx: cell gen-ui-tool-based, region bar-chart-renderer.
  Drop the hardcoded '## Choose your Integration' heading
  (IntegrationGrid renders its own '<h2>Choose your AI backend</h2>').
- your-components/display-only.mdx: same fix as display.mdx.

Mirrors the wiring pattern in frontend-tools.mdx and the slot-2 fix
for shared-state.mdx.

Author: samjulien

showcase/shell-docs/src/content/docs/generative-ui/display.mdx

@@ -3,12 +3,15 @@ title: Display components
 icon: "lucide/Eye"
 description: Register React components that your agent can render in the chat.
 hideTOC: true
+snippet_cell: gen-ui-tool-based
 ---
 
 ## What is this?
 
 Render-only generative UI lets you register React components as tools your agent can invoke. When the agent calls the tool, CopilotKit renders your component directly in the chat with the tool's arguments as props; no handler logic or user interaction required.
 
+<InlineDemo demo="gen-ui-tool-based" />
+
 <Tabs items={['page.tsx', 'chart.tsx']}>
   <Tab value="page.tsx">
   ```tsx
@@ -57,6 +60,14 @@ Use render-only generative UI when you want to:
 - Render previews, status indicators, or visual feedback
 - Let the agent present information beyond plain text
 
-## Choose your Integration
+## How it works in code
+
+The renderer component receives the tool's arguments as typed props and
+mounts inline in the chat. Below is the chart renderer wired up in the
+canonical demo — the agent emits the data, the component draws it.
+
+<Snippet region="bar-chart-renderer" title="frontend/src/app/page.tsx — bar chart renderer" />
+
+<FeatureIntegrations feature="gen-ui-tool-based" />
 
 <IntegrationGrid path="render-only" />

showcase/shell-docs/src/content/docs/generative-ui/interactive.mdx

@@ -3,12 +3,15 @@ title: Interactive components
 icon: "lucide/CirclePause"
 description: Create approval flows where the agent pauses and waits for human input.
 hideTOC: true
+snippet_cell: gen-ui-interrupt
 ---
 
 ## What is this?
 
 Interactive generative UI creates flows where the agent pauses execution and waits for user input before continuing. This enables approval workflows, confirmation dialogs, and any scenario where human judgment is needed mid-execution.
 
+<InlineDemo demo="gen-ui-interrupt" />
+
 ## When should I use this?
 
 Use interactive generative UI when you need:
@@ -18,4 +21,19 @@ Use interactive generative UI when you need:
 - Confirmation dialogs with structured responses
 - Any flow where the agent pauses for human judgment
 
+## How it works in code
+
+On the frontend, register an interrupt renderer with `useInterrupt`. When the
+agent pauses, your component mounts inline in the chat, captures the user's
+choice, and resumes the run with that input.
+
+<Snippet region="frontend-useinterrupt-render" title="frontend/src/app/page.tsx — useInterrupt" />
+
+On the backend, the agent calls into the interrupt primitive and waits for
+the resumed response before continuing the graph.
+
+<Snippet region="backend-interrupt-tool" title="backend — interrupt tool" />
+
+<FeatureIntegrations feature="gen-ui-interrupt" />
+
 <IntegrationGrid path="human-in-the-loop" />

showcase/shell-docs/src/content/docs/generative-ui/state-rendering.mdx

@@ -3,6 +3,7 @@ title: State Rendering
 icon: "lucide/Bot"
 description: Render your agent's state with custom UI components in real-time.
 hideTOC: true
+snippet_cell: shared-state-streaming
 ---
 
 ## What is this?
@@ -13,6 +14,8 @@ State rendering lets you build UI that reflects your agent's state in real-time.
   **Free course:** See this pattern built end-to-end in [Build Interactive Agents with Generative UI](https://www.deeplearning.ai/short-courses/build-interactive-agents-with-generative-ui/) — a free DeepLearning.AI short course taught by CopilotKit's CEO covering the full Generative UI spectrum (Controlled, Declarative, and Open-Ended).
 </Callout>
 
+<InlineDemo demo="shared-state-streaming" />
+
 ## When should I use this?
 
 Use state rendering when you want to:
@@ -22,6 +25,23 @@ Use state rendering when you want to:
 - Build dashboards that reflect agent state
 - Render structured output outside of the chat
 
+## How it works in code
+
+On the frontend, subscribe to the agent's state. Each time the backend
+forwards a fresh value, your component re-renders with the latest partial
+output.
+
+<Snippet region="frontend-use-coagent-state" title="frontend/src/app/page.tsx — agent state subscription" />
+
+On the backend, a state-streaming middleware forwards a specific tool
+argument straight into a state key *as it's being generated*, so the UI can
+watch the answer assemble token-by-token rather than appearing in one burst
+between node transitions.
+
+<Snippet region="state-streaming-middleware" title="backend — StateStreamingMiddleware" />
+
+<FeatureIntegrations feature="shared-state-streaming" />
+
 <IntegrationGrid
   path="generative-ui/state-rendering"
   exclude={["agno", "agent-spec"]}

showcase/shell-docs/src/content/docs/generative-ui/your-components/display-only.mdx

@@ -3,6 +3,7 @@ title: Display Components
 icon: "lucide/Eye"
 description: Register React components that your agent can render in the chat.
 hideTOC: true
+snippet_cell: gen-ui-tool-based
 ---
 
 ## What is this?
@@ -13,6 +14,8 @@ Display-only generative UI lets you register React components as tools your agen
   **Free course:** See this pattern built end-to-end in [Build Interactive Agents with Generative UI](https://www.deeplearning.ai/short-courses/build-interactive-agents-with-generative-ui/) — a free DeepLearning.AI short course taught by CopilotKit's CEO covering the full Generative UI spectrum (Controlled, Declarative, and Open-Ended).
 </Callout>
 
+<InlineDemo demo="gen-ui-tool-based" />
+
 <Tabs items={['page.tsx', 'chart.tsx']}>
   <Tab value="page.tsx">
   ```tsx
@@ -61,4 +64,14 @@ Use display-only generative UI when you want to:
 - Render previews, status indicators, or visual feedback
 - Let the agent present information beyond plain text
 
+## How it works in code
+
+The renderer component receives the tool's arguments as typed props and
+mounts inline in the chat. Below is the chart renderer wired up in the
+canonical demo — the agent emits the data, the component draws it.
+
+<Snippet region="bar-chart-renderer" title="frontend/src/app/page.tsx — bar chart renderer" />
+
+<FeatureIntegrations feature="gen-ui-tool-based" />
+
 <IntegrationGrid path="generative-ui/your-components/display-only" />