gecx-chatSDK portal
Use with Claude · Codex · Antigravity

Showcase App

The showcase is the SDK's comprehensive demo. It runs every public feature in local mock mode -- no Google credentials required. Each route isolates one capability so you can see it work, read the code, and copy what you need.

Run it

From the repo root:

pnpm install --frozen-lockfile
pnpm build:packages          # builds the SDK from source
pnpm dev                     # starts the showcase at http://localhost:3000

The showcase imports gecx-chat from dist/, so you must build the SDK at least once before starting the app.

Route guide

/ -- Overview

Landing page with architecture diagrams and quickstart snippets. Good orientation, but the real tour starts below.

/wow-tour -- Guided proof path (start here)

A 3-minute walkthrough of the SDK's most important capabilities. It chains streaming, tools, rich content, and diagnostics into a single guided flow. If you only have a few minutes, this is the route to visit.

/support -- Support chat

Streaming responses, client tools, citations, and suggestion chips. Shows what a typical support agent looks like when built on the SDK. Open the inspector panel to see message parts as they arrive.

/commerce -- Commerce assistant

Product carousels rendered from rich-content parts, plus an approval-gated add-to-cart tool. Watch the cart state update after you approve the tool call. Demonstrates how client tools can guard side effects behind user consent.

/rich-content -- Message part rendering lab

Renders every message part type in a single view. Use this as a visual reference when building custom renderers or verifying that your part types serialize correctly.

/generative-ui -- A2UI surfaces

Demonstrates A2UI v0.9 generated UI. The agent returns a UI spec and the SDK renders it client-side. Includes an action log and frame inspector so you can trace what happened.

Browse all 20 vetted A2UI catalog components — eta-promise, appointment-picker, confirmation-receipt, inventory-status, language-picker, and 15 more. Each component renders inside the showcase using real useChatSession + createMockTransport + A2UISurface, with a frame inspector, an action log, a telemetry panel, a manifest panel, and a copy-installable gecx add ui:<name> snippet.

/tools -- Tool behavior

Covers the full tool lifecycle: JSON Schema validation, user approval flow, execution timeout, and error handling. Trigger each case to see how the SDK surfaces tool state to the UI.

/handoff -- Human agent handoff

Simulates handing the conversation from the AI agent to a human agent. Includes a file upload UI for the handoff context.

/agent-graph -- Multi-specialist routing

A reference agent graph with a heuristic intent classifier and three mock specialists (returns, billing, order). The page renders the live graph topology with active-node highlighting and a scrolling event feed so you can watch routing decisions in real time. Pair with the applied-ai-retail /support route for the production-style equivalent.

/sentiment-demo -- Real-time signals

Sentiment meter, intent list, and escalation banner driven by the rule adapter. A scripted angryCustomerScenario proves the full flow end to end — frustration rises, the SignalEscalator fires a requestTransfer, and a handoff banner appears.

/voice -- Voice composer

Voice composer, transcript display, and barge-in indicator against the web-audio mock provider. A live firstAudioMs overlay shows the latency from start() to first audible frame, targeting < 400 ms.

/computer-use -- Sandboxed browsing

The default-off computer_use tool with consent UX, the signed SSE screenshot stream, action log, and an always-available Abort. Demonstrates session-level approval through the tool.awaiting_approval flow plus per-action high-risk approval (submit_form, download, navigate_external).

/dashboards -- Pre-built analytics widgets

The five widgets from gecx-chat/dashboards (DeflectionTrend, CsatDistribution, AhtHistogram, AgentAssistRate, GmvBreakdown) plus the composite <MetricsDashboard> rendered against ~150 deterministic seed events so charts are populated on first load.

/diagnostics -- Debug and trace

Trace timeline, debug bundle export, and simulated error scenarios. Use this route to understand the SDK's observability surface before wiring up your own telemetry.

/analytics -- Journey metrics

Product journey metrics and a live analytics event stream. Shows the events the SDK emits so you can plan your analytics integration.

Export, deletion, forget-me, and the audit log. Toggle consent posture and see analytics emission change.

/identity -- Guest vs authenticated

Guest/auth identity, cross-tab sync, and conversation continuity across sign-in.

/vibe-lab -- Recipes and patterns

Prebuilt surface components and copyable recipes for common chat moments.

/agent-builder -- Integration packet generator

Generates a complete integration packet: token route, proxy route, React component, test file, prompt, and safety checks. Useful for bootstrapping a new project or handing off to another team.

/integration-wizard -- Setup snippets

Copy-paste integration snippets for the intended package shape. Covers common setups so you can get started without reading the full reference docs.

What's next

Source: docs/demos/showcase.md