Hybrid native-brand review surface

Design System Overview

Review KnearMe surfaces through three layers at once: product-native primitives, host behavior from the Apps SDK, and external structural references. The goal is not to copy ChatGPT or Claude. The goal is to make our own system easier to use, easier to review, and clearer about what is production guidance versus inspiration. Start with Widgets & Registry when you need the source-backed inventory of Apps SDK and ChatKit patterns before choosing a surface.

Coverage snapshot

15 showcase buckets tracked through the registry.

stable

rolling out

candidate

Source Layers

These are the three inputs this site should make visible before anyone starts copying patterns.

What it is for

Anchor every review in KnearMe terms first, host rules second, and references third.

Use when

You are deciding whether a pattern belongs in production, in a demo only, or in a future parity pass.

Do not use when

You only want a raw component inventory. This route is opinionated by design.

Related patterns

App Surfaces · Navigation & Shells · Foundations

Escalation path

If a pattern conflicts with host behavior, the Apps SDK rule wins. If not, the KnearMe product language wins.

KnearMe primitives

Work Forward tokens, existing chat primitives, and production surfaces remain the brand source of truth.

Reference layer

Apps SDK host rules

OpenAI host behavior defines what an inline app, fullscreen escalation, and widget metadata contract should do.

Reference layer

External references

ChatKit provides structural guidance for density, media balance, and CTA restraint.

Reference layer

Start Here

Enter by job, not just by taxonomy.

Preview chat app surfaces

Open the demo-only `/demo/chat-shell-preview` handoff for inline, carousel, PiP, and fullscreen review.

Path 1

Build an inline app surface

Use the host-friendly card, rail, and fullscreen rules.

Path 2

Review widget inventory

Compare Apps SDK and ChatKit references, then inspect installable KnearMe surfaces.

Path 3

Review artifact cards

Compare reference, decision, and generated artifact patterns.

Path 4

Design a shell

Start with bounded chat shells, context rails, and panel states.

Path 5

Compare mobile

Review mode changes, device framing, and recipe-level examples.

Path 6

Inspect tokens

Check foundation rules before composing new surfaces.

Path 7

Font Pairing Demo

Use host-native or system stacks for inline/chat surfaces first. Treat the brand pair as a fullscreen or public-surface option, not the default embedded recommendation.

Inter + Manrope

Best for a calm, enterprise-friendly baseline across chat, forms, and dashboards.

Heading

A clean, modern production default.

Use this when you want a polished workspace tone with strong accessibility and predictable rhythm at small sizes.

Manrope + Space Grotesk

Good when hierarchy needs to feel friendlier without feeling toy-like.

Heading

Friendly contrast for practical interfaces.

Choose this if you want a slightly editorial headline while keeping body copy readable in long threads.

Sora + Inter

Great for dashboard-style surfaces and product-forward sections.

Heading

A sharper, technical UI voice.

Use if you want a premium but legible tone for status cards, plans, and decision summaries.

Space Grotesk + Nunito Sans

This pairing keeps headings distinctive while preserving relaxed reading comfort.

Heading

Editorial energy without losing clarity.

Ideal for showcase pages, onboarding narratives, and sections that need a bit more warmth.

Red Hat Display + IBM Plex Sans

Feels premium without sacrificing technical readability in body lines.

Heading

A confident, editorial brand signal.

Brand-forward option

Works well for trust-focused surfaces and feature-forward pages with clear action pathways.

Poppins + Nunito Sans

A good consumer-facing default if you want higher emotional warmth.

Heading

Soft geometry with a welcoming tone.

Use where you want to de-emphasize rigor and make utility content feel less rigid.

MCP Client Interface Demo

UI-only adapter pattern for ChatGPT/Claude-style MCP app surfaces: inline card, inline carousel, PiP, and fullscreen detail.

What it is for

Keep existing tools/contracts intact while improving how tool results are surfaced in chat.

Use when

You need to design interaction flow for browse -> detail -> action without introducing protocol forks.

Do not use when

You are changing tool schemas or moving business logic into UI state.

Related patterns

App Surfaces · Artifacts · Navigation & Shells

Escalation path

Inline card -> inline carousel -> PiP or fullscreen detail -> return to transcript state.

Developer details

Start from these files when you need to trace the live implementation.

src/app/demo/design-system/_components/McpClientInterfaceDemo.tsx · src/app/demo/design-system/app-surfaces/page.tsx

Scenarios

Playback

Panel

New chat

Shared shell preview

New chat

Welcome to KnearMe! I'd love to help you build a portfolio piece for that stone veneer project. It sounds like a great showcase of your craftsmanship. Let's start by gathering some details.