@kitn.ai/chat/src/stories/docs/Introduction.mdx

Framework-agnostic, Shadow-DOM web components for building AI chat interfaces — works in React, Vue, Angular, Svelte, or plain HTML. Authored in SolidJS.

import { Meta, Canvas } from '@storybook/addon-docs/blocks';
import * as ChatPanel from '../chat-panel-layout.stories';

<Meta title="Docs/Introduction" />

# @kitn.ai/chat

**Framework-agnostic, Shadow-DOM web components for building AI chat interfaces.**

Message threads, prompt inputs, streaming responses, markdown + code rendering, reasoning & tool-call panels, attachments, and a conversation sidebar — composable building blocks you can drop into any app.

<Canvas of={ChatPanel.ChatGPTStyle} />

## Why @kitn.ai/chat

- **Works in any framework** — drop in the framework-agnostic **web components** (`<kc-chat>`) and they just work in React, Vue, Angular, Svelte, or plain HTML. Authored in SolidJS, so SolidJS apps can also import the components natively for full compositional control.
- **Zero style conflicts** — the web components render in **Shadow DOM**, so the host page's CSS can't leak in and the kit's Tailwind can't leak out.
- **Lightweight** — a markdown-only `<kc-chat>` is **~110 KB gzip**, a single file. Syntax highlighting loads **on demand, per language, with no WASM** — and never loads at all if you don't render code.
- **~50 composable components** across three layers: headless primitives → accessible UI primitives (built in-house, WCAG 2.1 AA — no third-party UI dependency) → AI feature components.
- **Themeable** — restyle everything by overriding a handful of `--color-*` design tokens.

## Browsing the sidebar — which group do I copy from?

The kit ships at two layers, and the sidebar reflects that. **Use the right one for your stack:**

- **Components** — the framework-agnostic `<kc-*>` custom elements. **This is what to copy into a React, Vue, Angular, Svelte, or plain-HTML app.** Data goes on JS properties, interactions come back as events.
- **Solid (Advanced)** — under it, **Elements** (the native SolidJS feature components) and **Primitives** (Button, Dropdown, HoverCard, …) that the web components are *built from*. Their snippets are SolidJS JSX, so **only copy these into a SolidJS app**.

In other words: the `<kc-chat>` web component is a thin facade over the SolidJS `ChatContainer`/`Message`/… components — same UI, different consumption model. When in doubt, reach for **Components**.

## Components, Patterns & Recipes

Three sidebar groups answer different questions:

- **Components** — one reusable building block with one job and a documented prop/event API (`kc-message`, `kc-prompt-input`). Answers _"what is this control and how do I configure it?"_
- **Patterns** — a prescriptive, framework-agnostic solution to a recurring chat-UX problem. Answers _"how do I solve this scenario?"_ A Pattern **stands alone if you delete every code block** — the guidance is the value, not the snippet.
- **Recipes / Examples** — concrete, copy-paste assemblies tied to specific components, frameworks, or services. **Worthless without their code** — that's what makes them Recipes, not Patterns.

> **The delete-the-code test:** remove every code block. If the page is gutted, it's a Recipe. If the guidance stands alone, it's a Pattern.

Browse **Patterns** for recurring chat-UX solutions (streaming, empty state, message actions) and **Examples** for full assembled apps and task-specific snippets. The **[Choosing Components](?path=/docs/docs-choosing-components--docs)** guide explains which tier of building block to reach for first.

## Where to next

- **[Installation](?path=/docs/docs-installation--docs)** — add it to your project
- **[Getting Started](?path=/docs/docs-getting-started--docs)** — your first chat in a few lines, plus a full example
- **[Theming](?path=/docs/theming-overview--docs)** — make it match your brand
- **[Frameworks & Integrations](?path=/docs/docs-frameworks-overview--docs)** — wire up React, Vue, Svelte, Angular, or plain HTML; stream responses from OpenRouter and add text-to-speech

Or browse every component in isolation from the sidebar.