Introduction

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:

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

Then it’s just HTML:

<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 HTML 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>

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

Built with SolidJS — but you don't have to care

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 Working with primitives.

Use it in your framework

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

React

import { Chat } from '@kitn.ai/ui/react';

<Chat
  messages={messages}
  onSubmit={(e) => handleSubmit(e.detail.value)}
/>

Vue

<kai-chat
  :messages.prop="messages"
  @kai-submit="handleSubmit"
/>

Angular

<kai-chat
  [messages]="messages"
  (kai-submit)="handleSubmit($event)"
></kai-chat>

Svelte

<script>
  import '@kitn.ai/ui/elements';
</script>

<kai-chat
  {messages}
  on:kai-submit={handleSubmit}
></kai-chat>

HTML

<script type="module">
  import '@kitn.ai/ui/elements';
  const chat = document.querySelector('kai-chat');
  chat.messages = messages;
  chat.addEventListener('kai-submit', handleSubmit);
</script>
<kai-chat></kai-chat>

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

Bundle size

A markdown-only <kai-chat> is one ~110 KB gzip file. Syntax highlighting (Shiki) loads on demand, per language, with no WASM — and never loads at all if you don’t render code blocks.

Next

• Installation — add the package and register the elements
• Getting started — a working chat in a few lines