Examples
Multi-surface
One ChatDefinition rendered on React, Vue, and Ink — copy-paste for each shell.
Multi-surface
One definition. Three shells. Zero forks.
Shared definition
code
// chat.ts — framework-neutral
import { defineChat } from '@agentskit/chat'
import type { AdapterFactory } from '@agentskit/core'
export const createAppChat = (adapter: AdapterFactory) =>
defineChat({
id: 'app',
chat: {
adapter,
systemPrompt: 'Help the user ship faster.',
},
})React
code
import { AgentChat } from '@agentskit/chat/react'
import { createAppChat } from './chat'
import { adapter } from './adapter'
import '@agentskit/react/theme'
export const Web = () => (
<AgentChat definition={createAppChat(adapter)} placeholder="Ask…" />
)Vue
code
<script setup lang="ts">
import { AgentChat } from '@agentskit/chat/vue'
import { createAppChat } from './chat'
import { adapter } from './adapter'
const definition = createAppChat(adapter)
</script>
<template>
<AgentChat :definition="definition" placeholder="Ask…" />
</template>Ink (terminal)
code
import { render } from 'ink'
import { AgentChat } from '@agentskit/chat/ink'
import { createAppChat } from './chat'
import { adapter } from './adapter'
render(<AgentChat definition={createAppChat(adapter)} />)Scaffold
code
pnpm dlx @agentskit/chat-cli@0.4.0 init my-web --renderer react --yes
pnpm dlx @agentskit/chat-cli@0.4.0 init my-cli --renderer ink --yesShare chat.ts across projects or monorepo packages — the signature is the product API.