Recipes
Vue / Svelte / Solid / React Native / Angular
One package per framework. Same ChatReturn contract as @agentskit/react — pick the binding that matches your stack.
Every framework binding ships as its own package and mirrors the
@agentskit/react contract: same action methods (send, stop,
retry, edit, regenerate, setInput, clear, approve,
deny), same headless data-ak-* attributes on components, same
ChatReturn shape for state.
Packages
| Package | Surface | Peer dep |
|---|---|---|
@agentskit/react | useChat hook + components | `react ^18 |
@agentskit/vue | useChat composable + ChatContainer | vue ^3.4 |
@agentskit/svelte | createChatStore | svelte ^5 |
@agentskit/solid | useChat hook | solid-js ^1.8 |
@agentskit/react-native | useChat hook (Metro-safe) | `react ^18 |
@agentskit/angular | AgentskitChat service (Signal + RxJS) | `@angular/core ^18 |
Vue
import { useChat } from '@agentskit/vue'
const chat = useChat({ adapter })
// chat.messages, chat.input reactive; chat.send, chat.setInput, ...Svelte
<script lang="ts">
import { createChatStore } from '@agentskit/svelte'
const chat = createChatStore({ adapter })
</script>
{#each $chat.messages as m (m.id)}
<p>{m.content}</p>
{/each}Solid
import { useChat } from '@agentskit/solid'
const chat = useChat({ adapter })React Native / Expo
import { useChat } from '@agentskit/react-native'Angular
import { Component, inject } from '@angular/core'
import { AgentskitChat } from '@agentskit/angular'
@Component({ selector: 'ak-chat', template: '...' })
export class ChatPage {
chat = inject(AgentskitChat)
constructor() {
this.chat.init({ adapter })
}
}Use chat.state() inside templates or subscribe to chat.stream$.