AI Chat UI把 AI Harness 装进你的 Vue 应用

01 · 为什么是现在 ​

模型解决「会思考」，Harness 解决「能干活」——AI 应用的界面层、协议层、服务端，正在成为和框架一样的基础设施。三个来自 2026-10 的实测数字：

02 · 项目数据 ​

全部数字来自仓库实测：组件数按 @toimc/vue 的 index.ts 导出统计，测试用例按 173 个测试文件中的 it/test 计数（另含 22 个 Playwright E2E 用例），core 包零运行时依赖、agents 包零外部依赖。

03 · 三步跑起来 ​

第一步，安装。 五个包按需组合，最小只要两个：

pnpm add @toimc/core @toimc/vue @toimc/markdown

样式一次性引入（Design Token + 全部组件样式，零 CSS 框架）：

import '@toimc/vue/style.css'

第二步，实现一个 ChatAdapter。 前端只认这一个接口——sendMessage 返回 AsyncGenerator<StreamChunk>，接谁由你决定：

import type { ChatAdapter } from '@toimc/core'

const adapter: ChatAdapter = {
  async *sendMessage({ messages, signal }) {
    const res = await fetch('/api/chat', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ messages }),
      signal, // 中止信号自动透传
    })
    const reader = res.body!.getReader()
    const decoder = new TextDecoder()
    while (true) {
      const { done, value } = await reader.read()
      if (done) break
      yield { type: 'text', content: decoder.decode(value, { stream: true }) }
    }
    yield { type: 'done', content: '' }
  },
}

对接 OpenAI 兼容协议、加思考帧、走 SSE，用法指南里有现成的完整实现；服务端想省事，@toimc/agents 内置 OpenAI 兼容 / Anthropic 协议适配器。

第三步，组装界面。 布局、滚动锚定、流式光标、中断切换，全部内置：

<script setup lang="ts">
import { useChat } from '@toimc/core'
import {
  Conversation, ConversationContent,
  Message, MessageContent,
  PromptInput, PromptInputBody, PromptInputTextarea, PromptInputFooter, PromptInputSubmit,
} from '@toimc/vue'

const chat = useChat(adapter)
</script>

<template>
  <Conversation>
    <ConversationContent>
      <Message v-for="msg in chat.messages" :key="msg.id" :from="msg.role">
        <MessageContent :content="msg.content" :streaming="chat.isStreaming" />
      </Message>
    </ConversationContent>

    <PromptInput :disabled="chat.isStreaming" @send="(p) => chat.send(p.text)" @abort="chat.abort">
      <PromptInputBody>
        <PromptInputTextarea />
      </PromptInputBody>
      <PromptInputFooter>
        <PromptInputSubmit />
      </PromptInputFooter>
    </PromptInput>
  </Conversation>
</template>

完整可复制版本（含 Markdown 渲染注入、附件、思考链）见快速开始。

04 · 62 个组件，16 项开箱能力 ​

05 · 架构：一个接口，任意后端 ​

组件不关心模型，useChat 不关心协议，你的应用只依赖 ChatAdapter 这一层薄接口。换模型 = 换一个 adapter 文件；API Key 永远留在服务端。

06 · 与主流方案对比 ​

React 生态的同类库很多，但「Vue 原生 + 后端无关 + 组件可拆用」三者同时成立的，目前只有这一家：

07 · 在线演示，点开即玩 ​

以下页面全部由本库组件搭建。「纯静态」演示无需任何后端，「需 dev-server」的页面在仓库里跑 pnpm dev 即可获得完整体验：

08 · 包矩阵：按需安装，不背包袱 ​

从界面到生产，链路是通的：服务端网关数行起一个带认证与限流的聊天网关；智能体接入一行 createMastraGateway 挂载 Mastra Agent（工具调用 + 会话记忆）；语义检索演示 Ollama 本地向量化 + 混合检索的完整 RAG；会话记忆讲透 LibSQL 落盘与 token 成本取舍。仓库还内置 MCP 双向接入（Context7 客户端 + 把本地工具暴露给 Claude Code）与多 Agent 编排的参考实现。

09 · 现在就开始 ​

pnpm add @toimc/core @toimc/vue

三分钟得到一个能流的聊天界面，剩下的零件——思考链、工具审批、引用角标、生成式 UI——在组件文档里随取随用。