---
title: AgentsKit Chat
description: One AI chat definition for web, mobile, and terminal — the go-to application framework for cross-surface agent interfaces on AgentsKit.
---

**One agent experience. Every interface.**

Chat is the product surface your users meet on the web, mobile, and terminal. AgentsKit Chat is the
application framework for that surface: define routes, actions, components, and sessions once, then
render natively on React, Vue, Svelte, Solid, Angular, React Native, and Ink.

Controller, tools, memory, RAG, and framework bindings stay upstream in AgentsKit; this product owns
application composition and versioned boundaries.

## Start here

<InstallCommand />

```bash
pnpm dlx @agentskit/chat-cli@0.4.1 init my-chat --renderer react --yes
cd my-chat
pnpm install
pnpm test
```

<Cards>
  <Card title="Install & run" description="Scaffold and start locally." href="/docs/guides/install-and-run" />
  <Card title="Add RAG" description="Wire retrieval and citations." href="/docs/guides/add-rag" />
  <Card title="Connect backend" description="Handlers, Ask, sessions." href="/docs/guides/connect-backend" />
  <Card title="Examples" description="Live shells and component gallery." href="/docs/examples" />
  <Card title="Components" description="Schema-backed interactive UI." href="/docs/components/catalog" />
  <Card title="Style" description="Theme tokens and native slots." href="/docs/guides/style" />
  <Card title="CLI" description="init, add component, completion." href="/docs/cli" />
</Cards>

## Live example

<BasicChatExample />

## Surfaces

<SurfaceGrid />

## Same definition, every shell

```ts
import { defineChat } from '@agentskit/chat'
import type { AdapterFactory } from '@agentskit/core'

export const createSupportChat = (adapter: AdapterFactory) =>
  defineChat({
    id: 'support',
    chat: {
      adapter,
      systemPrompt: 'Help users understand the product.',
    },
  })
```

<FrameworkTabs defaultValue="react">
  <Framework name="react">

```tsx
import { AgentChat } from '@agentskit/chat/react'
import { createSupportChat } from './support-chat'
import { adapter } from './adapter'

export const Support = () => (
  <AgentChat definition={createSupportChat(adapter)} placeholder="Ask about the product" />
)
```

  </Framework>
  <Framework name="vue">

```vue
<script setup lang="ts">
import { AgentChat } from '@agentskit/chat/vue'
import { createSupportChat } from './support-chat'
import { adapter } from './adapter'
const definition = createSupportChat(adapter)
</script>
<template>
  <AgentChat :definition="definition" placeholder="Ask about the product" />
</template>
```

  </Framework>
  <Framework name="ink">

```tsx
import { render } from 'ink'
import { AgentChat } from '@agentskit/chat/ink'
import { createSupportChat } from './support-chat'
import { adapter } from './adapter'

render(<AgentChat definition={createSupportChat(adapter)} />)
```

  </Framework>
</FrameworkTabs>

## Ecosystem

Chat composes <AgentsKitRef /> — adapters, tools, memory, and RAG stay upstream.

<EcosystemStrip />

<AdaptersCallout />

<Cards className="lg:grid-cols-3">
  <Card title="AgentsKit docs" description="Runtime, adapters, tools, RAG." href="https://www.agentskit.io/docs" external />
  <Card title="AgentsKit examples" description="Reference demos on the core site." href="https://www.agentskit.io/docs/reference/examples" external />
  <Card title="Registry" description="Ready-to-adapt agents." href="https://registry.agentskit.io/agents" external />
  <Card title="Playbook" description="Engineering and delivery discipline." href="https://playbook.agentskit.io/docs" external />
  <Card title="Doc Bridge" description="Deterministic documentation handoffs." href="https://doc-bridge.agentskit.io/" external />
  <Card title="Code Review" description="Focused review before merge." href="https://github.com/AgentsKit-io/code-review-cli#readme" external />
  <Card title="AKOS" description="Enterprise operation and governance." href="https://akos.agentskit.io/docs" external />
</Cards>