Frameworks

The kai-* web components drop into React, Vue, Angular, Svelte, or plain HTML with a single import — no per-framework package, no wrappers. React adds a typed adapter; in a Solid app you can import the native components directly.

Pick an entry point

Entry	Use it for
@kitn.ai/ui/elements	Any framework — registers every kai-* element
@kitn.ai/ui/react	React — typed wrappers with camelCase props and event handlers
@kitn.ai/ui	SolidJS — native Solid components for full compositional control

Any framework: the web components

Import @kitn.ai/ui/elements once for its side effect. It registers every kai-* element; after that they work like built-in HTML.

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

Then use them in your templates:

HTML

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

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

  const chat = document.querySelector('kai-chat');
  chat.messages = [{ id: '1', role: 'assistant', content: 'Hello!' }];
  chat.addEventListener('kai-submit', (e) => console.log(e.detail));
</script>

Vue

<script setup>
import '@kitn.ai/ui/elements';
const messages = ref([{ id: '1', role: 'assistant', content: 'Hello!' }]);
</script>

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

Svelte

<script>
import '@kitn.ai/ui/elements';
let messages = [{ id: '1', role: 'assistant', content: 'Hello!' }];
</script>

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

Angular

app.module.ts

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

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

Properties vs. attributes

The one thing to get right: Arrays and objects must be set in JavaScript, not as HTML attributes — an attribute is always a string, so writing messages or models as an attribute silently does nothing.

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

// Right: set the array in JavaScript.
chat.messages = [{ id: '1', role: 'assistant', content: 'Hello!' }];

// Wrong: an attribute is a string, so the element never gets the array.
// <kai-chat messages="[...]"></kai-chat>

Scalars — placeholder, loading, theme, prose-size — work fine as attributes. Each framework’s binding picks the right path for you: Vue uses :prop.prop, Angular uses [prop], Svelte binds objects directly.

Events

Every kai-* element dispatches CustomEvents with a detail payload, named with a kai- prefix (kai-submit, kai-model-change, kai-remove, …).

chat.addEventListener('kai-submit', (e) => {
  const { value } = e.detail;
  // send value to your model API
});

The events don’t bubble — listen on the element itself.

React adapter

@kitn.ai/ui/react exports a typed component for every element. Props take arrays and objects directly (no .prop modifier), and events arrive as camelCase handler props that receive the CustomEvent.

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

export function MyChatApp() {
  return (
    <Chat
      messages={messages}
      onSubmit={(e) => console.log(e.detail.value)}
      onModelChange={(e) => console.log(e.detail)}
    />
  );
}

TypeScript

The React adapter ships full types for every prop and event, including the ChatMessage shape for messages and the detail type on each event.

SolidJS native components

Writing Solid? Skip the element wrapper and compose the kit’s native components from @kitn.ai/ui. They tree-shake to exactly what you import and mix freely with your own primitives.

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

export function App() {
  const [input, setInput] = createSignal('');

  return (
    <ChatConfig>
      <ChatContainer style={{ height: '100dvh' }}>
        <ChatContainerContent>
          <Message>
            <MessageContent markdown>Hello! How can I help?</MessageContent>
          </Message>
        </ChatContainerContent>
      </ChatContainer>
      <PromptInput
        value={input()}
        onValueChange={setInput}
        onSubmit={() => {
          handleSubmit(input());
          setInput('');
        }}
      >
        <PromptInputTextarea placeholder="Ask anything…" />
        <PromptInputActions />
      </PromptInput>
    </ChatConfig>
  );
}

Solid usage also needs solid-js as a peer dependency:

npm install solid-js

Per-framework guides

Full setup, binding patterns, and examples for each environment:

• HTML
• React
• Vue
• Svelte
• Angular
• SolidJS