assistant-ui

分类: 开发与编程 | 上传者: Montte-erp | 下载: 0 | 版本: v1.0（最新）
Assistant-ui 库指南 - AI 聊天 UI 组件。在询问架构、调试或理解代码库时使用。
更新日志: Source: GitHub https://github.com/Montte-erp/montte-nx
目录结构

当前层级: tree/master/.agents/skills/assistant-ui/
📁 references/
- 📄 architecture.md 3.5 KB
- 📄 packages.md 6.1 KB
📄 SKILL.md 5.0 KB
SKILL.md

---
name: assistant-ui
description: Guide for assistant-ui library - AI chat UI components. Use when asking about architecture, debugging, or understanding the codebase.
version: 0.0.1
license: MIT
---

# assistant-ui

**Always consult [assistant-ui.com/llms.txt](https://assistant-ui.com/llms.txt) for latest API.**

React library for building AI chat interfaces with composable primitives.

## References

- [./references/architecture.md](./references/architecture.md) -- Core architecture and layered system
- [./references/packages.md](./references/packages.md) -- Package overview and selection guide

## When to Use

| Use Case             | Best For                           |
| -------------------- | ---------------------------------- |
| Chat UI from scratch | Full control over UX               |
| Existing AI backend  | Connects to any streaming backend  |
| Custom message types | Tools, images, files, custom parts |
| Multi-thread apps    | Built-in thread list management    |
| Production apps      | Cloud persistence, auth, analytics |

## Architecture

```text
┌─────────────────────────────────────────────────────────┐
│                  UI Components (Primitives)             │
│    ThreadPrimitive, MessagePrimitive, ComposerPrimitive │
└─────────────────────────┬───────────────────────────────┘
                          │
┌─────────────────────────▼───────────────────────────────┐
│                   Context Hooks                         │
│   useAui, useAuiState, useAuiEvent │
└─────────────────────────┬───────────────────────────────┘
                          │
┌─────────────────────────▼───────────────────────────────┐
│                    Runtime Layer                        │
│  AssistantRuntime → ThreadRuntime → MessageRuntime      │
└─────────────────────────┬───────────────────────────────┘
                          │
┌─────────────────────────▼───────────────────────────────┐
│                   Adapters/Backend                      │
│   AI SDK · LangGraph · Custom · Cloud Persistence       │
└─────────────────────────────────────────────────────────┘
```

## Pick a Runtime

```text
Using AI SDK?
├─ Yes → useChatRuntime (recommended)
└─ No
   ├─ External state (Redux/Zustand)? → useExternalStoreRuntime
   ├─ LangGraph agent? → useLangGraphRuntime
   ├─ AG-UI protocol? → useAgUiRuntime
   ├─ A2A protocol? → useA2ARuntime
   └─ Custom API → useLocalRuntime
```

## Core Packages

| Package                         | Purpose                  |
| ------------------------------- | ------------------------ |
| `@assistant-ui/react`           | UI primitives & hooks    |
| `@assistant-ui/react-ai-sdk`    | Vercel AI SDK v6 adapter |
| `@assistant-ui/react-langgraph` | LangGraph adapter        |
| `@assistant-ui/react-markdown`  | Markdown rendering       |
| `assistant-stream`              | Streaming protocol       |
| `assistant-cloud`               | Cloud persistence        |

## Quick Start

```tsx
import { AssistantRuntimeProvider } from "@assistant-ui/react";
import { Thread } from "@/components/assistant-ui/thread";
import {
   useChatRuntime,
   AssistantChatTransport,
} from "@assistant-ui/react-ai-sdk";

function App() {
   const runtime = useChatRuntime({
      transport: new AssistantChatTransport({ api: "/api/chat" }),
   });
   return (
      <AssistantRuntimeProvider runtime={runtime}>
         <Thread />
      </AssistantRuntimeProvider>
   );
}
```

## State Access

```tsx
import { useAui, useAuiState } from "@assistant-ui/react";

const api = useAui();
api.thread().append({ role: "user", content: [{ type: "text", text: "Hi" }] });
api.thread().cancelRun();

const messages = useAuiState((s) => s.thread.messages);
const isRunning = useAuiState((s) => s.thread.isRunning);
```

## Related Skills

- `/setup` - Installation and configuration
- `/primitives` - UI component customization
- `/runtime` - State management deep dive
- `/tools` - Tool registration and UI
- `/streaming` - Streaming protocols
- `/cloud` - Persistence and auth
- `/thread-list` - Multi-thread management
- `/update` - Version updates and migrations
登录后下载/点赞/收藏 ❤ 5 | ★ 0
assistant-ui

目录结构

SKILL.md

举报内容

提示
