Skip to content
kitn AI/UI

Overview

AI/UI is one component set pointed in three directions: connect it to any model, drive it from any agent or harness, and drop it anywhere a browser runs. This section is the map.

Any model

Section titled “Any model”

One endpoint, every provider. Connect any model shows how a gateway or a direct provider lets the same chat reach OpenAI, Anthropic, Grok, GLM, DeepSeek, Llama, or a model running on your own machine with Ollama — switchable from a dropdown in the header. The contract underneath is identical for all of them.

Any agent

Section titled “Any agent”

A bare model is the simple case. When the backend is a full agent — a loop with tools, memory, and reasoning — AI/UI renders the whole thing: tool calls, reasoning traces, generative-UI cards, artifacts. Bring it from the Vercel AI SDK, LangGraph, or a harness like Mastra, Pi, or OpenClaw. The component doesn’t care where the stream comes from — it only needs a stream.

Anywhere it runs

Section titled “Anywhere it runs”

Because these are standard web components, they run anywhere there’s a DOM — no framework required:

  • In a web app — React, Vue, Svelte, Angular, or Solid. Import once and use the elements; see Frameworks.
  • In a website — a marketing page, a CMS, a docs site: one <script> tag and a <kai-chat> element.
  • In a desktop app — Electron and Tauri render a system webview, so the same elements ship inside a native window.
  • As an embedded widget — drop a support assistant onto any page you control.

Same component every time. That’s the island model: a self-contained interactive piece you place into otherwise-static or server-rendered pages, and it wakes up on its own. For the App Router and TanStack Start specifics, see Next.js & TanStack Start.

Start here

Section titled “Start here”