The chat experience on this site is built with the gecx-chat SDK. The Lab is where you extend it. Open Claude Code at the repo root, load the headless-chat-vibe-coding skill, then copy one of the prompts below to drop in an extension or tweak.
Each prompt is scoped to a single, observable change. Copy it into Claude Code at the repo root, then run pnpm exec gecx verify to typecheck, test, and doctor the result.
Add a sustainability badge part type
Teaches: extending the message part schema and adding a renderer. The agent updates ChatMessagePart, adds a builder, registers a default renderer, and writes a mock scenario that emits one.
In packages/gecx-chat, add a new part type `sustainability-badge` that carries `{ label: string, carbonOffsetCents: number }`. Update the types union, the predicates, the builders, and the JSON schema. Add a default renderer in MessagePart.tsx that shows a leaf glyph and the offset cost. Wire it into apps/applied-ai-retail/src/lib/retailTransport.ts so it streams when the user asks "is this sustainable?". Verify with `pnpm exec gecx verify`.
Teaches: defining a tool with approval, JSON-Schema input validation, fail-closed behavior, and a mock scenario that exercises it.
Add a `gift_wrap` client tool in apps/applied-ai-retail/src/lib/appliedTools.ts. It takes `{ orderId: string, note?: string }`, requires user approval, has a 5s timeout, and returns `{ giftWrapId, addedCharge }`. Add a route branch in apps/applied-ai-retail/src/lib/retailTransport.ts triggered by /gift wrap|wrap.+gift/i that calls the tool. Add a Playwright spec asserting the approval surface renders. Verify with `pnpm exec gecx verify`.
Swap the product carousel renderer for a 2-column grid on wider chats
Teaches: overriding a renderer in the host app without forking the SDK. The agent edits the RendererMap in components/chat/renderers and runs Playwright.
Update apps/applied-ai-retail/src/components/chat/renderers/index.tsx so the product-carousel renderer breaks into 2 columns on the chat panel (it currently uses 2 columns already — change the breakpoint to 1 column under 320px and 2 above; add a container query if helpful). Add a Playwright assertion that the carousel renders at least one card with role=link. Verify with `pnpm exec gecx verify`.
Add a typing indicator while the assistant streams
Teaches: using `chat.isStreaming` from useChatSession and inserting a transient UI part. The agent edits ChatSurfaceApplied.tsx.
In apps/applied-ai-retail/src/components/chat/ChatSurfaceApplied.tsx, when `chat.isStreaming` is true and the last message is from the assistant, render a small three-dot animation right after the message list. Use only CSS, no external libs. Add a Playwright assertion that the indicator appears mid-stream and disappears after `response.completed`. Verify with `pnpm exec gecx verify`.
Add a toast that links to the error-code doc when the inspector catches one
Teaches: subscribing to chat error events and using ChatSdkError codes. The agent reads docs/reference/error-codes.md and wires a one-shot toast.
In apps/applied-ai-retail, add a small toast component that appears for 6s whenever `chat.error` transitions from null to an Error. The toast should extract the error code (if present) and link to the matching anchor in docs/reference/error-codes.md. Triggered by the "broken" mock scenario already in place. Verify with `pnpm exec gecx verify`.
Pulled live from recipes/registry.json at build time. Drop one in with pnpm exec gecx add <id> — files are copied into your app, agent-owned and editable.
ux
Streaming indicators
Typing, progress, and stop affordances for streaming chat.
pnpm exec gecx add streaming-indicatorsux
Tool call cards
Inline status cards for tool execution and approval states.
pnpm exec gecx add tool-call-cardsrich-content
Citation previews
Accessible citation preview renderer.
pnpm exec gecx add citation-previewsrich-content
Product carousel
Swipe-friendly product carousel renderer for commerce chats.
pnpm exec gecx add product-carouselux
Suggestion chips
Tappable follow-up suggestion chips.
pnpm exec gecx add suggestion-chipsbehavior
Accessibility controls
Focus return, reduced-motion, and keyboard control helpers.
Branching diagnostic tree: agent walks the user through yes/no questions to isolate the issue. v1 caps tree depth at 3.
pnpm exec gecx add ui:troubleshooter
How this demo works
A quick architectural read so you know where to point the agent.
Chat client:src/lib/chatClient.ts picks createMockChatClient or a real proxy transport based on whether you've connected GECX in the UI. No env vars.
Mock transport:src/lib/retailTransport.ts — route branches covering the full retail journey (browse → recommend → cart → checkout → track → return) plus the deliberate tool-error path.
Tools:src/lib/appliedTools.ts — five client tools, mutations require user approval and fail closed when denied.
Inspector:src/components/chat/SdkInspector.tsx wraps the SDK's DebugDrawer and renders createDebugBundle() live, so the SDK internals are visible alongside the storefront.
Auth:src/app/api/gecx-chat/* + src/lib/gecxSession.ts — credentials live in an httpOnly cookie scoped to the session. Disconnect scrubs them with Clear-Site-Data.