docs(shell-docs): add intro sentences before code examples that directly follow headings

Author: samjulien

showcase/shell-docs/src/content/docs/generative-ui/mcp-apps.mdx

@@ -53,6 +53,8 @@ The middleware supports two transport types:
 
 ### HTTP
 
+Use this format to connect to an MCP server that accepts standard HTTP requests:
+
 ```typescript
 {
   type: "http",
@@ -63,6 +65,8 @@ The middleware supports two transport types:
 
 ### SSE
 
+Use this format to connect to an MCP server that streams events over a persistent connection:
+
 ```typescript
 {
   type: "sse",

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

@@ -30,6 +30,8 @@ auto-registered by `CopilotKitProvider`, so no extra wiring is needed.
 
 ### Enable it in the runtime
 
+Add `OpenGenerativeUIMiddleware` to your runtime configuration:
+
 <Snippet region="minimal-runtime-flag" />
 
 The `OpenGenerativeUIMiddleware` then converts the agent's streamed
@@ -39,6 +41,8 @@ sandboxed iframe.
 
 ### Drop `<CopilotChat />` into the page
 
+Wrap your app in `CopilotKitProvider` and render `<CopilotChat>` — no extra props needed:
+
 <Snippet region="minimal-provider-setup" />
 
 That's it. Ask the agent "build me a simple greeting card" to see HTML

showcase/shell-docs/src/content/docs/prebuilt-components/chat.mdx

@@ -46,6 +46,8 @@ choosing:
 
 ## Code example
 
+The minimal component needed to render an in-page chat:
+
 ```tsx title="page.tsx"
 // [!code word:CopilotChat]
 import { CopilotChat } from "@copilotkit/react-core/v2";

showcase/shell-docs/src/content/docs/unselected/coding-agents.mdx

@@ -37,6 +37,8 @@ Point your editor's MCP configuration at that URL — that's the whole setup.
 <Step>
 ### Add the server
 
+Paste the following into your `mcp.json` to register the CopilotKit MCP server:
+
 ```json
 {
   "mcpServers": {
@@ -59,6 +61,8 @@ Save the file — Cursor picks up the new server automatically.
 <Step>
 ### Register the server
 
+Run the following command to add the CopilotKit MCP server over HTTP:
+
 ```bash
 claude mcp add --transport http copilotkit-mcp https://mcp.copilotkit.ai/mcp
 ```
@@ -67,6 +71,8 @@ claude mcp add --transport http copilotkit-mcp https://mcp.copilotkit.ai/mcp
 <Step>
 ### Verify
 
+Confirm the server registered successfully:
+
 ```bash
 claude mcp list
 ```

showcase/shell-docs/src/content/docs/unselected/generative-ui/a2ui.mdx

@@ -104,6 +104,8 @@ That tree lives in `backend/schemas/flight_schema.json`. Components without data
 
 ### Building the catalog
 
+Define the React components for each primitive type and assemble them into a catalog. The A2UI binder uses this catalog to resolve schema nodes to components at render time:
+
 <Snippet region="definitions-types" cell="a2ui-fixed-schema" />
 
 <Snippet region="renderers-tsx" cell="a2ui-fixed-schema" />
@@ -112,6 +114,8 @@ That tree lives in `backend/schemas/flight_schema.json`. Components without data
 
 ### Wiring the schema + tool
 
+Load the schema file and register the tool that emits render operations. The agent calls this tool with structured data; A2UI resolves each field against the schema and passes typed props to your components:
+
 <Snippet region="backend-schema-json-load" cell="a2ui-fixed-schema" />
 
 <Snippet region="backend-render-operations" cell="a2ui-fixed-schema" />

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

@@ -40,6 +40,8 @@ The `name` you pass to `useComponent` is what the agent sees as the tool name. M
 
 ## Minimal example
 
+The following registers a display tool and wires it to a React component. When the agent emits that tool call, CopilotKit resolves the arguments against the Zod schema and passes them as typed props:
+
 ```tsx title="page.tsx"
 import { z } from "zod";
 import { useComponent } from "@copilotkit/react-core/v2";

showcase/shell-docs/src/content/docs/unselected/prebuilt-components/chat.mdx

@@ -47,6 +47,8 @@ choosing:
 
 ## Code example
 
+The minimal component needed to render an in-page chat:
+
 ```tsx title="page.tsx"
 // [!code word:CopilotChat]
 import { CopilotChat } from "@copilotkit/react-core/v2";

showcase/shell-docs/src/content/docs/unselected/premium/headless-ui.mdx

@@ -27,6 +27,8 @@ Fully Headless UI is an **Early Access** Premium feature. Grab a free `publicLic
 <Step>
 ### Create a new application
 
+Scaffold a new CopilotKit project using the CLI:
+
 ```bash
 npx copilotkit@latest create
 ```
@@ -35,6 +37,8 @@ npx copilotkit@latest create
 <Step>
 ### Wire your CopilotKit provider with a license key
 
+Wrap your root layout with `CopilotKitProvider` and pass in your public license key:
+
 ```tsx title="src/app/layout.tsx"
 <CopilotKitProvider publicLicenseKey="your-free-public-license-key">
   {children}
@@ -45,6 +49,8 @@ npx copilotkit@latest create
 <Step>
 ### Build a headless chat component
 
+Use `useCopilotChatHeadless_c` to access messages, a send function, and loading state, then wire them to your own UI:
+
 ```tsx title="src/app/page.tsx"
 "use client";
 import { useState } from "react";
@@ -103,6 +109,8 @@ You can render generative UI either via `useFrontendTool` / `useComponent`, or b
 
 ### With `useFrontendTool`
 
+Register a frontend tool and attach a render function. CopilotKit inserts your component wherever that tool call appears in the message stream:
+
 ```tsx title="src/app/components/chat.tsx"
 import { useFrontendTool } from "@copilotkit/react-core/v2";
 
@@ -173,6 +181,8 @@ CopilotKit's suggestions give users a list of generated or static prompts. The h
 
 ### Generating suggestions
 
+Use `useCopilotChatSuggestions` to generate and display prompt suggestions in your headless UI:
+
 ```tsx title="src/app/components/chat.tsx"
 import {
   useCopilotChatHeadless_c,

showcase/shell-docs/src/content/docs/unselected/premium/observability.mdx

@@ -135,6 +135,8 @@ interface CopilotErrorEvent {
 
 ### Sentry
 
+Forward error events to Sentry using its `captureException` API:
+
 ```tsx
 import * as Sentry from "@sentry/react";
 
@@ -161,6 +163,8 @@ import * as Sentry from "@sentry/react";
 
 ### Custom analytics
 
+Route all CopilotKit events to your analytics pipeline via the `onError` callback:
+
 ```tsx
 <CopilotKitProvider
   publicLicenseKey={process.env.NEXT_PUBLIC_COPILOTKIT_LICENSE_KEY}
@@ -183,6 +187,8 @@ import * as Sentry from "@sentry/react";
 
 ### Development
 
+Enable the dev console and attach lightweight logging hooks for local iteration:
+
 ```tsx
 <CopilotKitProvider
   runtimeUrl="http://localhost:3000/api/copilotkit"
@@ -201,6 +207,8 @@ import * as Sentry from "@sentry/react";
 
 ### Production
 
+Disable the dev console and route errors to your logging and monitoring services:
+
 ```tsx
 <CopilotKitProvider
   runtimeUrl="https://your-app.com/api/copilotkit"

showcase/shell-docs/src/content/docs/unselected/premium/overview.mdx

@@ -60,6 +60,8 @@ From the left nav in the Copilot Cloud dashboard.
 <Step>
 ### Use it in your provider
 
+Pass your public license key to `CopilotKitProvider`:
+
 ```tsx title="app/layout.tsx"
 <CopilotKitProvider publicLicenseKey="your-public-license-key">
   {children}