Demo di atas membalas langsung di peramban (runtime "echo"), tanpa server dan tanpa kunci API. Di aplikasi Anda, pesan dikirim ke model lewat AI SDK.

Installation

pnpm dlx kliping@latest add ai-chat

Untuk menyambung ke model lewat AI SDK, pasang juga runtime-nya. @assistant-ui/ai-sdk menjalankan state chat AI SDK di atas runtime bersama, jadi ia butuh react terpasang walaupun React tidak merender apa pun:

pnpm add @assistant-ui/ai-sdk ai react

Usage

Bungkus AiThread dengan AuiProvider. Di Nuxt, jadikan komponen ini khusus klien (.client.vue): renderer server Vue tidak pernah membuang effect scope, jadi provider yang dirender di server menyisakan satu runtime per permintaan.

<!-- app/components/Assistant.client.vue -->
<script setup lang="ts">
import { AISDKChat } from '@assistant-ui/ai-sdk'
import { AuiConfig, AuiProvider } from '@assistant-ui/vue'
import { AiThread } from '@/components/ui/ai-chat'

const config = AuiConfig({ threads: AISDKChat() })
</script>

<template>
  <AuiProvider :config="config">
    <AiThread class="h-dvh" />
  </AuiProvider>
</template>

AISDKChat() mengirim percakapan ke /api/chat. Rute itu cukup mengembalikan aliran dari streamText — misalnya di Nuxt:

// server/api/chat.post.ts
import { anthropic } from '@ai-sdk/anthropic'
import { convertToModelMessages, streamText, type UIMessage } from 'ai'

export default defineEventHandler(async (event) => {
  const { messages } = await readBody<{ messages: UIMessage[] }>(event)
  const result = streamText({
    model: anthropic('claude-sonnet-5-5'),
    messages: await convertToModelMessages(messages),
  })
  return result.toUIMessageStreamResponse()
})

Pasang @ai-sdk/anthropic dan isi ANTHROPIC_API_KEY di .env. Penyedia model lain (OpenAI, Google, …) tinggal mengganti paket @ai-sdk/*-nya.

Parts

Bagian	Berkas	Isi
AiThread	components/ui/ai-chat/ai-thread.vue	daftar pesan, saran pembuka, gulir ke bawah, kotak tulis dengan lampiran, kirim/berhenti
AiMessage	components/ui/ai-chat/ai-message.vue	satu pesan: sunting, salin, buat ulang, pilih cabang
AiMarkdownText	components/ui/ai-chat/ai-markdown-text.vue	teks markdown (markdown-it, HTML mentah dimatikan)
AiReasoning	components/ui/ai-chat/ai-reasoning.vue	penalaran model yang bisa dibuka-tutup, terbuka selama mengalir
AiToolFallback	components/ui/ai-chat/ai-tool-fallback.vue	pemanggilan alat: status, durasi, argumen, persetujuan dan pertanyaan

Daftar percakapan ada di AI Thread List.

Requirements

Semua dipasang otomatis oleh kliping add; tabel ini untuk Anda yang memasang manual atau memeriksa project.

Requirement	Value
Project	Vue 3.5+, Tailwind CSS v4, alias @ — disiapkan kliping init
npm packages	@assistant-ui/core@^0.3.29, @assistant-ui/vue@^0.0.4, @lucide/vue@^1.31.0, markdown-it@^15.0.3, reka-ui@^2.10.3
Files	components/ui/ai-chat/ai-markdown-text.vue components/ui/ai-chat/ai-message.vue components/ui/ai-chat/ai-reasoning.vue components/ui/ai-chat/ai-thread.vue components/ui/ai-chat/ai-tool-fallback.vue components/ui/ai-chat/index.ts

Anatomy

Susunan bagiannya seperti dipakai di contoh-contoh di atas. Impor semua bagian dari satu tempat, lalu susun begini:

<AiThread />

Bagian lain yang tersedia: AiMarkdownText, AiMessage, AiReasoning, AiToolFallback.

API Reference

AiMarkdownText

Tidak punya props, events, atau slot sendiri.

AiMessage

Data attribute	Value
[data-role]	set at runtime

AiReasoning

Data attribute	Value
[data-slot]	"aui_reasoning-root"

AiThread

Tidak punya props, events, atau slot sendiri.

AiToolFallback

Data attribute	Value
[data-slot]	"aui_tool-fallback-root"
[data-outcome]	set at runtime

CSS Variables

Token tema yang dibaca komponen ini — ubah nilainya di CSS global (:root dan .dark, lihat Theming) untuk mengubah tampilannya tanpa menyentuh komponennya: --accent, --accent-foreground, --background, --border, --destructive, --foreground, --muted, --muted-foreground, --primary, --primary-foreground, --radius, --ring.

Credits

Berasal dari assistant-ui (MIT, Copyright (c) 2026 AgentbaseAI Inc.). Rantai lengkapnya di Credits.