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';

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

  // Arrays can't be attributes, so set messages in JavaScript.
  chat.messages = [
    { id: '1', role: 'assistant', content: '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 CSS into its Shadow DOM, so the components look right with zero stylesheets. Import theme.css only when you want to override the design tokens:

import '@kitn.ai/ui/theme.css';

Set the --color-* tokens on :root to rebrand:

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

Inherited CSS custom properties cross the Shadow DOM boundary, so these overrides reach every kai-* element automatically.

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/kitn-chat.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.13.0/dist/kitn-chat.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 root entry (@kitn.ai/ui), which ships as source and tree-shakes to what you use:

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

Entry points

Import path	What it provides
@kitn.ai/ui/elements	The web components — registers every kai-* element; use in any framework
@kitn.ai/ui/react	Generated React wrappers with typed props
@kitn.ai/ui	Native SolidJS components — tree-shaken source; Solid projects only
@kitn.ai/ui/theme.css	Design tokens (--color-*) for overriding the theme
@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.