AI/UI

https://ui.kitn.ai/guides/introduction/
Admin
AI/UI is a set of Shadow-DOM web components for building AI chat and agent interfaces in any...
Tokens:2,038
Snippets:18
Trust Score:2.1
Update:1 week ago
Show doc for...
Tokens:
Raw
### Use AI/UI in React

Source: https://ui.kitn.ai/guides/introduction

Using the React wrapper provided by @kitn.ai/ui/react to handle messages and submission events.

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

--------------------------------

### Use kai-chat with messages and kai-submit event

Source: https://ui.kitn.ai/guides/introduction.md

Basic usage of the kai-chat element: place it in HTML, wait for it to be defined, set the messages property in JavaScript (arrays can't be HTML attributes), and listen for the kai-submit CustomEvent to handle user input.

```html
<kai-chat style="display: block; height: 100vh;"></kai-chat>

<script type="module">

  await customElements.whenDefined('kai-chat');

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

  // Arrays can't be HTML attributes, so set messages in JavaScript.
  chat.messages = [
    { id: '1', role: 'assistant', parts: [{ type: 'text', text: 'Hello! How can I help?' }] },
  ];

  chat.addEventListener('kai-submit', (e) => {
    console.log('user sent:', e.detail.value);
  });
</script>
```

--------------------------------

### Use kai-chat in Svelte with prop and event

Source: https://ui.kitn.ai/guides/introduction.md

Svelte usage of the kai-chat component. Pass the messages prop with shorthand {messages} and listen for the kai-submit event with on:kai-submit.

```html
<script>

</script>

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

--------------------------------

### Use kai-chat in plain HTML

Source: https://ui.kitn.ai/guides/introduction.md

Plain HTML usage of the kai-chat component. Wait for the custom element to be defined, set the messages property, and add an event listener for kai-submit.

```html
<script type="module">

  await customElements.whenDefined('kai-chat');

  const chat = document.querySelector('kai-chat');
  chat.messages = messages;
  chat.addEventListener('kai-submit', handleSubmit);
</script>
<kai-chat></kai-chat>
```

--------------------------------

### Use kai-chat in React with typed wrapper

Source: https://ui.kitn.ai/guides/introduction.md

React usage of the kai-chat component via the typed wrapper from @kitn.ai/ui/react. Events become onEventName props, so onSubmit receives the event and you access e.detail.value.

```tsx

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

--------------------------------

### Use kai-chat in Vue with .prop and @kai-submit

Source: https://ui.kitn.ai/guides/introduction.md

Vue usage of the kai-chat component. Use the .prop modifier to bind the messages property and @kai-submit to listen for the submit event.

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

--------------------------------

### Use kai-chat in Angular with property and event binding

Source: https://ui.kitn.ai/guides/introduction.md

Angular usage of the kai-chat component. Bind the messages property with [messages] and handle the kai-submit event with (kai-submit).

```html
<kai-chat
  [messages]="messages"
  (kai-submit)="handleSubmit($event)"
></kai-chat>
```
Tokens:
Raw