import { Meta } from '@storybook/addon-docs/blocks';

<Meta title="Docs/Frameworks/Overview" />

# Frameworks

`@kitn.ai/chat` is **transport-agnostic**: every element renders a `messages` array and emits a
`submit` event. You bring the model; the kit owns the UI. It works in any framework — pick yours:
[HTML](?path=/docs/docs-frameworks-html--docs) · [React](?path=/docs/docs-frameworks-react--docs) · [Solid](?path=/docs/docs-frameworks-solid--docs) · [Vue](?path=/docs/docs-frameworks-vue--docs) · [Svelte](?path=/docs/docs-frameworks-svelte--docs) · [Angular](?path=/docs/docs-frameworks-angular--docs).
Recipes for streaming, text-to-speech, and speech-to-text live under **Docs/Recipes**.

## Two ways to build

You can adopt the kit at whatever level you need — and mix the two freely:

1. **`<kc-chat>` — the all-in-one shell.** One tag gives you a whole chat experience (message
   thread, prompt input, model switcher, …). The fastest way to ship.
2. **Compose the individual elements.** Assemble `<kc-conversations>`, `<kc-message>`,
   `<kc-prompt-input>`, `<kc-markdown>`, `<kc-artifact>`, … into your own layout for full control —
   or drop a single display element into an app you already have.

`<kc-chat>` is the quick start, **not** the only way in. Every framework page shows both paths,
and each element's **API** tab (under **Components**) lists its full props, events, and copy-paste
usage for every framework.

## The #1 rule: properties vs. attributes

Arrays and objects **must** be set as JavaScript **properties** on the element — never as HTML
attributes. An HTML attribute is always a string, so passing `messages`, `models`, `context`,
`suggestions`, or `slashCommands` as an attribute silently fails.

```js
const chat = document.querySelector('kc-chat');

// ✅ correct — set as a JS property
chat.messages = [{ id: '1', role: 'assistant', content: 'Hello!' }];

// ❌ wrong — an HTML attribute is always a string, never works
// <kc-chat messages="[...]"></kc-chat>
```

Scalar values (strings, numbers, booleans) work fine as attributes: `placeholder`, `loading`,
`theme`, `prose-size`, and so on. Each framework's binding syntax (React props, Vue's `.prop`
modifier, Angular's `[prop]`, Svelte's `{prop}`) handles this for you — see your framework's page.

The kit ships **40+ elements**. SolidJS apps can also import the **native components** directly for
full compositional control — see the [Solid](?path=/docs/docs-frameworks-solid--docs) page and the **Solid (Advanced)** section.