Installation

Add @kitn.ai/ui, register the kai-* elements once, and use them in any framework. SolidJS is bundled in, so the host app needs nothing else.

Install the package

npm

npm install @kitn.ai/ui

pnpm

pnpm add @kitn.ai/ui

yarn

yarn add @kitn.ai/ui

Register the elements

Import the bundle once for its side effect. This registers every kai-* element globally — put it near your app’s entry point:

import '@kitn.ai/ui/elements';

The bundle is ESM-only and works with any modern bundler (vite, webpack, esbuild) or directly in a <script type="module">. SolidJS is bundled in, so there is no extra peer dependency.

Once registered, the elements behave like any other HTML tag:

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

<script type="module">
  import '@kitn.ai/ui/elements';

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

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

  // Arrays can't be 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>

Set arrays and objects in JavaScript

messages, models, context, and other array/object data must be assigned in JavaScript — HTML attributes are strings and can’t carry them. Scalars like placeholder, loading, and theme work fine as attributes.

Theme it

Each element injects its own scoped CSS into its Shadow DOM, so the components look right with zero stylesheets. To rebrand, set the namespaced --kai-color-* tokens on :root — no import needed, and the --kai- prefix keeps them from clashing with your app’s own CSS variables:

:root {
  --kai-color-background: #0f0f0f;
  --kai-color-primary: #7c3aed;
  --kai-color-muted: #1e1e1e;
}

Inherited custom properties cross the Shadow DOM boundary, so these reach every kai-* element automatically. The --kai- form is the one that gets there: each element’s own shadow CSS declares the unprefixed --color-* names on :host, which beats anything inherited from your :root. Import @kitn.ai/ui/theme.css when you want those --color-* tokens for your own markup or the light-DOM SolidJS components — see Theming for the full token list, dark mode, and typography.

Tailwind v4: theme.css can override your own tokens

The components need no CSS import - they are shadow-isolated. Importing theme.css is opt-in. In a Tailwind v4 app its generic --color-* names merge into your @theme and can override your own bg-primary, bg-card, and friends (last import wins). Use the namespaced --kai-color-* tokens above to retheme the elements (no import); if you do import theme.css, import it before your own token overrides.

Via CDN (no build step)

Load the bundle as a self-contained ES module — no install, no bundler:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@kitn.ai/ui/theme.css">

<script type="module">
  import 'https://cdn.jsdelivr.net/npm/@kitn.ai/ui/dist/kai.es.js';
</script>

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

Pin versions in production

An unpinned CDN URL tracks the latest release — fine for prototyping, risky for production. The package is pre-1.0, so a minor release can break things. Pin an exact version: https://cdn.jsdelivr.net/npm/@kitn.ai/ui@0.20.1/dist/kai.es.js.

SolidJS projects

Writing Solid? You can skip the web components and import the native components for full compositional control. Add the peer dependency:

npm install solid-js

Then import from the Solid entry (@kitn.ai/ui/solid), which ships compiled and tree-shakes to what you use:

import {
  ChatContainer,
  ChatContainerContent,
  Message,
  MessageContent,
  PromptInput,
  PromptInputTextarea,
  PromptInputActions,
} from '@kitn.ai/ui/solid';
import '@kitn.ai/ui/theme.css';

@kitn.ai/ui/solid is the whole Solid catalog, compiled as its own bundle. It is a superset of the root @kitn.ai/ui entry, so one import covers the chat components, the UI primitives, and the shared types and helpers. See the SolidJS guide.

Entry points

Import path	What it provides
@kitn.ai/ui/elements	All the web components — registers every kai-* element; use in any framework. The simple default.
@kitn.ai/ui/elements/<module>	A single element module, tree-shaken. The path is the module’s basename, which is usually but not always the tag minus kai-. See Loading.
@kitn.ai/ui/autoloader	CDN / static auto-loader — loads each kai-* on demand, no build. See Loading.
@kitn.ai/ui/react	Generated React wrappers with typed props
@kitn.ai/ui/solid	The complete SolidJS catalog — compiled, tree-shakeable; Solid projects only
@kitn.ai/ui	The shared layer every framework resolves: types, state and card helpers, and the chat components ./solid builds on
@kitn.ai/ui/state	Pure folds over ChatMessage[] — createAssistantStream, appendTextPart, … See State & hooks
@kitn.ai/ui/wire	The model-stream adapter — readOpenAIStream, readAnthropicStream, toOpenAIMessages, … See the wire adapter recipe
@kitn.ai/ui/theme.css	Design tokens for your own markup and the Solid components (to retheme the elements, set --kai-color-* with no import — see Theming)
@kitn.ai/ui/provider	Remote provider bundle for embedding the kit across origins

Next steps

With the elements registered, head to the framework guide for your stack, or render your first chat in Getting started. Want a different way to load — per-element or a CDN autoloader? See Loading.