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$.

#See also

Explore nearby

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