fix(showcase-docs): fix display-only generative UI snippets and add LangGraph backend setup by Abubakar-01 · Pull Request #4862 · CopilotKit/CopilotKit

Abubakar-01 · 2026-05-15T18:08:07Z

Summary

Improved the Display Components generative UI docs in the showcase to be accurate, copy-paste ready, and properly structured per integration.

Changes

Routing

Added generative-ui/your-components/display-only to INTEGRATION_OVERRIDE_SLUGS in the framework-scoped router so LangGraph users are served their own integration-specific file instead of the generic root

LangGraph integration file (`integrations/langgraph/generative-ui/your-components/display-only.mdx`)

Restructured page flow to match the root: code example at top → Backend Setup steps in the middle → "When should I use this?" at the bottom
Inlined all SDK install and run-and-connect content directly (avoids broken InstallPythonSDKSnippet nested partial chain)
Fixed create_react_agent → create_agent in the "Agent calls the component" step
Updated prompt wording across backend setup steps

Root file (`generative-ui/your-components/display-only.mdx`)

Fixed broken code fences (4-backtick closing fence → 3) so code blocks render correctly
Added missing import { Chart, ChartProps } from "./chart" to the page.tsx snippet so it compiles on copy-paste
Fixed missing imports (z from zod, recharts components) in the chart.tsx snippet
Removed WhenFrameworkHas gating — LangGraph now has its own dedicated route

Type of Change

Bug fix (docs)
New feature
Breaking change

Affected Files

showcase/shell-docs/src/content/docs/generative-ui/your-components/display-only.mdx
showcase/shell-docs/src/content/docs/integrations/langgraph/generative-ui/your-components/display-only.mdx
showcase/shell-docs/src/app/[framework]/[[...slug]]/page.tsx

Testing

Verified /langgraph-python/generative-ui/your-components/display-only serves the LangGraph-specific file
Verified other frameworks (mastra, pydantic-ai) still serve the root file
Verified code blocks render correctly in the docs dev server
Verified copy-pasted snippets compile without errors in a fresh Next.js project

…nerative UI snippet

…l backend setup - Route langgraph to its own integration file via INTEGRATION_OVERRIDE_SLUGS - Restructure page flow: code example → backend steps → when to use - Fix broken code fences and missing imports in root snippet

…prompt wording

claude

Claude Code Review

This pull request is from a fork — automated review is disabled. A repository maintainer can comment @claude review to run a one-time review.

vercel · 2026-05-15T18:08:20Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
docs	Ready	Preview, Comment	May 15, 2026 6:10pm

vercel · 2026-05-15T18:08:21Z

@Abubakar-01 is attempting to deploy a commit to the CopilotKit Team on Vercel.

A member of the Team first needs to authorize it.

samjulien · 2026-05-15T22:58:02Z

Hi @Abubakar-01 — thanks for catching the broken Tabs structure in display-only.mdx, and for the detailed PR description.

A few notes:

The display-only page was rewired in fix(shell-docs): wire IntegrationGrid pages with framework-aware demos + backfill region markers #4846 to follow the same shape as frontend-tools.mdx — <InlineDemo demo="gen-ui-tool-based" /> + <Snippet region="bar-chart-renderer" cell="gen-ui-tool-based" /> + <FeatureIntegrations>. On framework-scoped routes like /{framework}/generative-ui/your-components/display-only, the page now renders a real, framework-specific demo plus a code snippet pulled from the actual gen-ui-tool-based demo cell. The "missing imports" complaint is resolved because the regions in those cells include imports (per fix(shell-docs): restore code snippet imports + load empty MDX partials #4829).
The 4-backtick closing fence bug you caught (lines 30 and 53 of display-only.mdx) is a real issue — landing as part of fix(shell-docs): copy-dedent in fence-in-JSX bodies + framework-route render parity + content cleanups #4877, a consolidated rendering-parity PR alongside a couple of related fixes. Credited in the PR body.
The framework router change (INTEGRATION_OVERRIDE_SLUGS.add("generative-ui/your-components/display-only")) is the part we can't take. The shell-docs IA is built around "one root page per feature, framework-aware via demos/snippets" — quickstart is the only documented exception, and we want to avoid adding more per-feature overrides because they reintroduce per-integration MDX trees we've been moving away from.
The expanded integrations/langgraph/.../display-only.mdx lives in a tree the framework router doesn't currently serve. The router change above would change that, but per (3) we want to keep the root page as the canonical home.

Closing this — thanks for the thorough work.

@Abubakar-01

… render parity + content cleanups (#4877) ## Summary Four small rendering-pipeline fixes from a post-cutover QA pass that diagnosed copy-malformation reports on specific code blocks. Single PR because the fixes are each tiny and form a coherent "render/copy parity" group. ## Fixes ### 1. `MdxCodeBlock` now dedents fence-in-JSX bodies **Problem**: When a `python` / `tsx` etc. fence sits inside JSX (e.g. `<Tab><Step>...</Step></Tab>`), MDX preserves the JSX nesting's leading whitespace on every body line. `extractText` recovers it faithfully, but the copy payload comes out with 16-24 leading spaces per line — user pastes invalid Python with top-level statements indented. **Fix**: Added a private `dedent()` helper in `src/components/mdx-code-block.tsx` that measures min leading-whitespace across non-blank lines and strips it. Both the visible `<pre>` body and the `<CopyButton>` payload use the dedented text, so rendered == copied. Column-0 fences (the common case) keep full syntax highlighting unchanged; JSX-nested fences fall back to plain `<code>` after dedent. Fixes the reports against AG-UI middleware, A2A middleware section 3, MS-Py Quickstart `main.py` and `route.ts`. ### 2. Framework route renders post-features content with parity **Problem**: PR #4830 wired `rehypeCodeMeta` + `pre: MdxCodeBlock` into `docs-page-view.tsx` and the AG-UI route, but the `FrameworkRootPage` (line 451 of `[framework]/[[...slug]]/page.tsx`) renders its after-features MDX with bare `rehypeHighlight` and no `pre` override. So features-page MDX on framework-scoped routes loses the file-path caption, copy button on bare fences, and dedent behavior. **Fix**: Imported `MdxCodeBlock` + `rehypeCodeMeta` into that route and added them to the `MDXRemote` config — symmetric with `docs-page-view.tsx`. ### 3. `display-only.mdx` fence closers fixed **Problem**: Lines 30 and 53 closed `tsx` fences with **four** backticks instead of three. CommonMark requires matching counts — fences never closed, copy payload grabbed subsequent JSX tags + adjacent prose. **Fix**: Two single-character edits, fences now balance. Note: this specific bug was also caught by @Abubakar-01 in #4862 — including it here so the closing of #4862 doesn't leave the bug behind. ### 4. Deduplicate `<Callout>` on `tool-rendering.mdx` **Problem**: Identical `<Callout type="info">` blocks at lines 17-19 and 23-25 (verified byte-identical). Copy-paste artifact making the page look messy and probably contributing to the QA verdict of "Missing imports, Unclear how to integrate". **Fix**: Removed the duplicate at lines 23-25; kept the first occurrence (before `<InlineDemo>` — natural callout-then-demo order). The other 2 `<Callout>` matches in the file are different blocks (free-course, name-must-match). ## Files changed ``` src/app/[framework]/[[...slug]]/page.tsx | 21 ++++++++- src/components/mdx-code-block.tsx | 51 +++++++++++++++++++++- src/content/docs/generative-ui/tool-rendering.mdx | 4 -- src/content/docs/generative-ui/your-components/display-only.mdx | 4 +- 4 files changed, 70 insertions(+), 10 deletions(-) ``` ## Test plan - [ ] Visit `/{framework}/agentic-protocols/a2a` — copy the middleware code block in section 3, paste into an editor: should be column-0 valid TypeScript (no leading 4-sp indent) - [ ] Visit `/{framework}/integrations/microsoft-agent-framework/quickstart` — copy `main.py`, paste: valid Python with no 24-sp leak - [ ] Visit `/{framework}/integrations/microsoft-agent-framework/quickstart` — copy `route.ts`, paste: clean - [ ] Visit `/{framework}/agentic-protocols/ag-ui-middleware` — copy button + file path caption present (parity with unscoped route) - [ ] Visit `/generative-ui/your-components/display-only` — Tabs render correctly, copy works on both `page.tsx` and `chart.tsx` tabs - [ ] Visit `/generative-ui/tool-rendering` — single Callout at the top, not duplicated around the InlineDemo - [ ] No regression on column-0 fences (e.g. `/auth`, `/react-native`): syntax highlighting still works, copy/caption unchanged - [ ] Bundler clean: `npx tsx showcase/scripts/bundle-demo-content.ts` (697 demos) - [ ] Typecheck: `npx tsc --noEmit` in `showcase/shell-docs/` (was clean against current main) ## Verification done - Typecheck: pass - Bundler: pass (697 demos, no MDX errors) - Sample dedent input/output on a 24-sp body: column-0 output as expected ## Hook bypass Pre-commit `test-and-check-packages` and `commitlint` bypassed via `LEFTHOOK_EXCLUDE` (pre-existing web-inspector test failure on main + commitlint binary not installed in worktrees). Lint-fix, lockfile-sync, check-binaries all ran and passed.

Abubakar-01 added 3 commits May 15, 2026 17:35

fix(docs): add missing imports and fix code fences in display-only ge…

a42a67f

…nerative UI snippet

fix(showcase-docs): fix create_react_agent → create_agent and update …

d98837d

…prompt wording

Abubakar-01 requested review from jpr5, marthakelly, mme, ranst91 and tylerslaton as code owners May 15, 2026 18:08

claude Bot reviewed May 15, 2026

View reviewed changes

vercel Bot deployed to Preview – docs May 15, 2026 18:10 View deployment

samjulien mentioned this pull request May 15, 2026

fix(shell-docs): copy-dedent in fence-in-JSX bodies + framework-route render parity + content cleanups #4877

Merged

9 tasks

samjulien closed this May 15, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(showcase-docs): fix display-only generative UI snippets and add LangGraph backend setup#4862

fix(showcase-docs): fix display-only generative UI snippets and add LangGraph backend setup#4862
Abubakar-01 wants to merge 3 commits into
CopilotKit:mainfrom
Abubakar-01:docs/showcase-fix-display-only-generative-ui-snippet

Abubakar-01 commented May 15, 2026 •

edited

Loading

Uh oh!

claude Bot left a comment

Uh oh!

vercel Bot commented May 15, 2026 •

edited

Loading

Uh oh!

vercel Bot commented May 15, 2026

Uh oh!

samjulien commented May 15, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

Abubakar-01 commented May 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

Routing

LangGraph integration file (integrations/langgraph/generative-ui/your-components/display-only.mdx)

Root file (generative-ui/your-components/display-only.mdx)

Type of Change

Affected Files

Testing

Uh oh!

claude Bot left a comment

Choose a reason for hiding this comment

Claude Code Review

Uh oh!

vercel Bot commented May 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vercel Bot commented May 15, 2026

Uh oh!

samjulien commented May 15, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Abubakar-01 commented May 15, 2026 •

edited

Loading

LangGraph integration file (`integrations/langgraph/generative-ui/your-components/display-only.mdx`)

Root file (`generative-ui/your-components/display-only.mdx`)

vercel Bot commented May 15, 2026 •

edited

Loading