The web UI for AI agents

Framework-agnostic web components

Build AI-native apps that run anywhere.

The web UI layer for AI agents. Bring your model, SDK, or your own agent loop — drop in framework-agnostic components for streaming, tool calls, reasoning, and artifacts, in any app.

Get started Browse components

$ npm i @kitn.ai/ui

One component model — every framework

React
Vue
Svelte
Angular
Solid
HTML

You bring the model.
AI/UI brings the interface.

Streaming, tool calls, reasoning, generative-UI cards, artifacts, and voice — the agent UI, already built and battle-tested. Wire up your model or harness and ship.

AI/UI

Built for
AI-native apps

AI/UI is the web UI layer for AI agents and harnesses — streaming, tool calls, reasoning, generative-UI cards, and artifacts. The hard parts, already built as framework-agnostic web components you wire to your model or agent loop and drop into any app.

Browse components

Conversation

Token-by-token streaming, rich markdown, code highlighting, and message actions. The chat surface, done right.

Agentic UI

Tool calls and reasoning render inline — show the work as your agent thinks, calls tools, and acts.

Generative UI

Confirmations, choices, tasks, and forms render as typed, interactive cards the model can drive.

Artifacts & files

Preview live code, docs, and sites in a sandboxed panel — plus drag-and-drop files and image input.

For harnesses

Your harness has a backend.
This is the front-end.

Most agent harnesses are CLI or headless — the loop, the tools, and the model wiring are already done, but there's no web UI. AI/UI is that layer: framework-agnostic web components you point at your harness's stream. Bring your own loop; we render the chat, tool calls, reasoning, and artifacts.

Wire it to your agent

Pi

Open-source agent harness + coding CLI
OpenClaw

Headless coding agent (ACP)
Bring your own. Any agent loop, SDK, or model — AI/UI just needs a stream to render.

What you can build

Ship any AI surface — not just a chatbox.

Build a real AI workspace

A collapsible conversation sidebar, resizable panes, and a file tree — the shell for a coding agent or an internal copilot.

See the example

Quickstart

Up and running — no build step.

The fastest path is a single <script> tag from a CDN — paste it in and the custom elements register themselves. Prefer a bundler? Install from npm. Either way, set messages in JavaScript to wire up your model.

Add the script

<script type="module"
  src="https://cdn.jsdelivr.net/npm/@kitn.ai/ui/dist/kitn-chat.es.js"
></script>

02
Drop one in
```
<kai-chat></kai-chat>
```

Using a framework? Drop-in setup for:

Read the full guide

Make it yours

Match your brand — without forking anything.

Every color, font, radius, and shadow is a CSS custom property. Override a handful of --kai-* tokens and the whole UI reskins, light and dark. Or design it live: 40+ presets, font and shape controls, and export-ready CSS you can paste straight into your app.

Open the theme editor

Start building your AI interface.

Open source, MIT-licensed, and ready for production. Install it, drop in a component, and wire up your model.

Get started Star on GitHub

$ npm i @kitn.ai/ui

The web UI for AI agents

Build AI-native apps that run anywhere.

You bring the model.
AI/UI brings the interface.