# HTML Use AI/UI web components in plain HTML and vanilla JavaScript — no framework, no build tool required. Drop `` web components into any HTML page with a single import. No framework, no build configuration — the elements register themselves globally and work in every modern browser. ## Install ```bash npm install @kitn.ai/ui ``` Register all web components once with a side-effect import near your app entry: ```js ``` Every `` tag is then available globally — drop them anywhere in your HTML. > **tip:** Skip npm entirely and load from a CDN. For quick prototypes this works immediately; for production, pin a specific version to avoid breaking changes (the package is pre-1.0). ```html ``` ## The property / event contract Every `kai-*` web component follows the same two rules: - **Rich data (arrays, objects) → JS properties.** Set them in a ` ``` ## Compose individual elements `` is one option, not the only one. Every element can be placed independently. Here's a sidebar + thread layout using `` and ``: ```html
``` ### Add a resizable divider Wrap panels in `` with one `` each — drag handles are inserted automatically. Each item accepts a `size` (px or `%`) and optional `min`/`max`. Listen for `kai-change` to persist the layout. ```html
``` ## Standalone display elements You can drop any single element into an existing page without adopting the full chat shell. ``, ``, and `` are common standalone picks for rendering AI-generated content: ```html ``` Each element fills its container and is controlled entirely through properties and events. ## Key events reference | Element | Event | `detail` | |---|---|---| | `kai-chat` | `kai-submit` | `{ value: string }` | | `kai-chat` | `kai-model-change` | `{ model: string }` | | `kai-conversations` | `kai-conversation-select` | `{ id: string }` | | `kai-conversations` | `kai-new-chat` | — | | `kai-conversations` | `kai-toggle-sidebar` | — | | `kai-resizable` | `kai-change` | `{ sizes: string[] }` | For the full API of any element — all properties, events, and their types — see the individual component page in the [Components](/components/attachments/) reference. ## Theming By default each element is styled inside its own Shadow DOM and needs no external CSS. To override design tokens (colors, radii, spacing), load `theme.css`: ```html ``` Then override any `--color-*` or `--radius-*` custom properties on `:root` or a scoping selector.