# Introduction

AI/UI is a set of Shadow-DOM web components for building AI chat and agent interfaces in any framework.

**AI/UI** (`@kitn.ai/ui`) is a set of web components for AI chat and agent UIs — message threads, prompt input, streaming responses, markdown and code rendering, reasoning and tool-call panels, attachments, a conversation sidebar, and more. Around 50 elements, all named `kai-*`, all droppable into the app you already have.

## What you're working with

The `kai-*` elements are real custom elements. You register them once, then use `<kai-chat>` (and the rest) like any built-in HTML tag — in React, Vue, Svelte, Angular, or a plain `.html` file. There's no per-framework package to install and no wrapper to learn.

Each element renders inside its own **Shadow DOM**. Your page's CSS can't leak in and break the kit; the kit's styles can't leak out and break your page. You get a clean, isolated component you can drop anywhere.

Register everything with one import:

```js

```

Then it's just HTML:

```html
<kai-chat style="display: block; height: 100vh;"></kai-chat>

<script type="module">

  await customElements.whenDefined('kai-chat');

  const chat = document.querySelector('kai-chat');

  // Arrays can't be HTML attributes, so set messages in JavaScript.
  chat.messages = [
    { id: '1', role: 'assistant', parts: [{ type: 'text', text: 'Hello! How can I help?' }] },
  ];

  chat.addEventListener('kai-submit', (e) => {
    console.log('user sent:', e.detail.value);
  });
</script>
```

Two things carry across every element: rich data (`messages`, `models`, `context`, `items`) goes on a JavaScript property, and the element talks back through `CustomEvent`s named `kai-*`. Scalars like `placeholder`, `loading`, and `theme` work as plain attributes.

> **note:** 
The elements are authored in SolidJS, which is why they're small and fast. That's an implementation detail: nothing about using `<kai-chat>` requires knowing Solid. If you do write Solid, you can import the underlying components directly for deeper composition — see the [Solid guide](/guides/frameworks/solid/). Developing the primitives themselves lives in the kit's Storybook (the contributor surface).

## Use it in your framework

Same element everywhere. Only the syntax for passing a property and binding an event changes.

<Tabs>
<TabItem label="React">
```tsx

<Chat
  messages={messages}
  onSubmit={(e) => handleSubmit(e.detail.value)}
/>
```
</TabItem>
<TabItem label="Vue">
```html
<kai-chat
  :messages.prop="messages"
  @kai-submit="handleSubmit"
/>
```
</TabItem>
<TabItem label="Angular">
```html
<kai-chat
  [messages]="messages"
  (kai-submit)="handleSubmit($event)"
></kai-chat>
```
</TabItem>
<TabItem label="Svelte">
```html
<script>

</script>

<kai-chat
  {messages}
  on:kai-submit={handleSubmit}
></kai-chat>
```
</TabItem>
<TabItem label="HTML">
```html
<script type="module">

  await customElements.whenDefined('kai-chat');

  const chat = document.querySelector('kai-chat');
  chat.messages = messages;
  chat.addEventListener('kai-submit', handleSubmit);
</script>
<kai-chat></kai-chat>
```
</TabItem>
</Tabs>

React is the one framework that gets a thin extra layer: `@kitn.ai/ui/react` ships typed wrappers that turn events into `onEventName` props, so you skip the `.prop` and `addEventListener` ceremony. Everywhere else, you use the elements straight.

## What's in the box

About 50 elements, from a full `<kai-chat>` down to single building blocks like a markdown renderer or a tool-call panel. Reach for the high-level ones to ship fast, the small ones to compose your own layout.

| Component | What it does |
|---|---|
| `kai-chat` | Full chat panel — messages plus prompt input in one element |
| `kai-workspace` | Chat plus a conversation sidebar |
| `kai-message` | A single message row with actions |
| `kai-prompt-input` | Composer with voice, slash commands, and a toolbar |
| `kai-markdown` | Markdown renderer with optional syntax highlighting |
| `kai-reasoning` | Expandable reasoning / chain-of-thought panel |
| `kai-tool` | Tool-call display (name, input, output) |
| `kai-attachments` | File attachment tiles, chips, or rows |
| `kai-conversations` | Conversation sidebar with grouping |
| `kai-artifact` | Multi-file artifact viewer with tabs and maximize |

## Next

- [Installation](/guides/installation/) — add the package and register the elements
- [Getting started](/guides/getting-started/) — a working chat in a few lines