agentskit.js
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

PackageSurfacePeer dep
@agentskit/reactuseChat hook + components`react ^18
@agentskit/vueuseChat composable + ChatContainervue ^3.4
@agentskit/sveltecreateChatStoresvelte ^5
@agentskit/soliduseChat hooksolid-js ^1.8
@agentskit/react-nativeuseChat hook (Metro-safe)`react ^18
@agentskit/angularAgentskitChat 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$.

See also

✎ Edit this page on GitHub·Found a problem? Open an issue →·How to contribute →

On this page