Port shadcn /create customizer into shadify with CopilotKit App mode#6
Draft
GeneralJerel wants to merge 5 commits intomainfrom
Draft
Port shadcn /create customizer into shadify with CopilotKit App mode#6GeneralJerel wants to merge 5 commits intomainfrom
GeneralJerel wants to merge 5 commits intomainfrom
Conversation
… mode Adds a /create route backed by the shadcn design-system customizer: 33 pickers driving URL-synced design params and an inline preview of the selected registry item. Integrates the CopilotKit agent via App mode so users can drive the pickers conversationally (e.g. "make it pink with a serif body font"). Chat at / remains unchanged. - Router: adds react-router-dom v7 with BrowserRouter wrapping / (chat) and /create - URL state: nuqs via its react-router v7 adapter; useDesignSystemSearchParams ported 1:1 with full preset encode/decode round-trip (?preset=b0) - Inline preview: replaces shadcn's iframe/postMessage flow with a scoped DesignSystemProvider that injects CSS vars under [data-design-system-root] so theme tokens do not leak to the chat chrome - Registry: bases/__index__ + all base/radix trees bulk-copied; api.ts ported without server-only; React.lazy chain preserved - Next.js shims: 7 runtime shims (image, link, script, form, navigation, dynamic, font/google) wired via Vite and tsconfig aliases so ~50 ported files do not need hand edits - Keyboard shortcuts preserved: R (randomize), Shift+R (reset), O (open preset), D (preview dark mode), Cmd+P (action menu), Cmd+Z / Cmd+Shift+Z (history) - Agent: AgentState extended with design_params; system prompt updated with full param vocabulary; useDesignSystemCoAgent hook exposes current params via useCopilotReadable and registers updateDesignSystem action that writes URL state; CopilotSidebar mounted on /create for inline chat Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- Import registry style-*.css and register style-* custom variants so the .cn-* component classes carrying all card/button visuals actually load. - Map --font-sans/--font-heading into @theme inline and scope the global h1-h6 display-font rule so it no longer leaks into the preview. - Work around @copilotkit/react-ui's broken bare ".dark" selector in input.css that was clobbering text color in the customizer Card. - Replace the toggleable CopilotSidebar on /create with a permanent right-side CopilotChat panel using the same chatTheme as /. - Bump @copilotkit/{react-core,react-ui,runtime} to 1.56.2 and @ag-ui/core to ^0.0.52 to satisfy the new peer dep. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Expose locks, history, randomize, reset, theme, preset, and preview controls to the chat agent, and render every tool call as an animated status card. Also swap chat/customizer column order on /create and use a create-specific chat theme that allows default tool-call rendering. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
…ize loop - Inject Google Fonts stylesheets on demand in the next/font/google shim so selected body/heading fonts actually load (previously only Fredoka and JetBrains Mono were in index.html, others fell back silently). - Add the missing .cn-font-heading CSS rule so heading-styled text in cards picks up --font-heading instead of inheriting the body font. - Wrap both base and radix preview blocks in TooltipProvider. codespaces-card uses Tooltip without a provider, which crashed the lazy subtree and left the "02" panel blank with no ErrorBoundary to catch it. - Tighten the randomize CopilotKit tool: report which params actually changed and which were preserved by locks, and instruct the agent not to re-call the tool to "try to change" a locked param. - Add prose styling (lists, headings, code, tables, links) to the /create assistant message via messageView.assistantMessage.className. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- Add a new "03" preview panel that renders a custom component built by the agent via a new `createCustomComponent` CopilotKit tool. Spec is a structured, allowlisted node tree (card/column/row/grid/heading/text/ badge/icon/stat/progress/separator/image) that inherits the current theme via `tone` values. Persist the last spec in sessionStorage so it survives reloads on /create. - Wire a CustomComponentProvider around /create, a PreviewSwitcher tab for panel 03, and an InlinePreview branch that renders the custom tree when `item=custom`. Add a tool-call card icon for the new tool. - Make the chat panel mobile-friendly: slide-in Sheet on <lg, persistent sidebar on ≥lg, with a shared header. - Replace the 2s time-window guard in `useRandomizeCoAgent` with a turn-scoped flag that resets when the chat run ends (isLoading false). The old window missed loops when per-call latency exceeded 2s. Also wrap the handler in try/catch so unexpected errors still return a tool result. - Bump the agent model to gpt-5.4 and expand the system prompt with strict "call exactly once per request" rules for randomize and createCustomComponent, plus the allowed component-spec grammar. Co-Authored-By: Claude Opus 4.7 (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
/createtheme customizer into shadify's UI, adapted for Vite/React Router via Next.js shims (dynamic, font/google, image, link, navigation, script, form).Commits
5387bdbfeat: port shadcn /create customizer into shadify with CopilotKit App modef551629fix: render /create customizer correctly and make chat a permanent panel6f3f7cafeat: add CopilotKit chat tools for /create customizer36011f6fix: harden /create customizer — fonts, preview tooltip crash, randomize loop6936b94feat: panel 03 custom component + randomize turn-scoped guardTest plan
apps/uidev server and open/create; verify customizer renders with preview, fonts, and tooltips.pnpm -w test/ typecheck forapps/ui.🤖 Generated with Claude Code