组件介绍

Vibe Coding 快速接入

不想手动翻阅文档？你可以通过 AIDev Skill 市场获取 ai-blueking-guide Skill，在 AI IDE 中用自然语言描述需求，让 AI 帮你生成集成代码。详见 Skill 指引。

什么是 AI 小鲸 v2.0

AI 小鲸 v2.0 是蓝鲸智云推出的新一代智能对话前端解决方案。它采用三层模块化架构，将 UI 渲染、业务逻辑和状态管理彻底分离，为开发者提供灵活、可扩展的智能对话集成能力。

无论你是需要快速嵌入一个聊天窗口，还是构建高度定制化的 AI 交互界面，AI 小鲸 v2.0 都能满足你的需求。它同时支持 Vue 2 和 Vue 3，并提供完整的 TypeScript 类型定义。

核心流程

1. 在 AIDev 平台配置 Agent（LLM、知识库、工具、快捷指令等）
2. 发布后获取 URL
3. 将 URL 传给 AIBlueking 或 ChatBot → 开箱即用

架构总览

AI 小鲸 v2.0 由三层组成：业务组件层负责组装和编排，纯 UI 组件库专注渲染，业务 SDK 处理数据流与状态。三者可独立使用，也可组合集成。

三个核心包

包名	定位	说明
@blueking/ai-blueking	业务组件层	组装 UI + SDK + 管理器，提供 ChatBot 和 AIBlueking 等开箱即用的高级组件
@blueking/chat-x	纯 UI 组件	不含任何业务逻辑，提供 ChatInput、MessageContainer、ShortcutRender、AiSelection 等原子级 UI 组件
@blueking/chat-helper	状态管理 + API 调用 + 流式处理	提供 useChatHelper()、AGUIProtocol 流式协议以及 agent / session / message 等业务模块

集成模式

根据业务场景，你可以选择不同的集成方式：

模式	组件 / 入口	适用场景	复杂度
浮窗模式	AIBlueking	SaaS 全局 AI 助手，右下角浮窗	⭐ (仅需 url)
页面嵌入	ChatBot	聊天作为页面主内容，嵌入 DOM	⭐ (仅需 url)
Standalone	@blueking/ai-blueking/standalone	非 Vue 宿主（React、纯 HTML 等），mountAIBlueking	⭐⭐
原子组件	chat-x + chat-helper	深度定制	⭐⭐⭐

• AIBlueking 浮窗模式：全局 AI 助手入口，提供右下角浮球、可拖拽面板、划词弹窗和内置会话管理，适合 SaaS 产品全局集成。仅需传入 url 即可开箱即用。
• ChatBot 页面嵌入模式：将聊天窗口嵌入到页面的指定区域（如侧边栏、主内容区），适合聊天作为核心功能的场景。同样仅需传入 url。
• Standalone 非 Vue 宿主（v2.1.4-beta.8+）：宿主无 Vue 时，通过 mountAIBlueking / mountChatBot 挂载，bundle 内已含 Vue 3 runtime。详见 Standalone 集成。
• 原子组件模式：直接使用 chat-x 的 UI 组件和 chat-helper 的业务 SDK，自由组装，适合需要深度定制交互的场景。

核心特性

• AG-UI 流式响应 — 基于 AGUIProtocol 实现实时流式输出，支持打字机效果与中断控制
• 会话生命周期管理 — 完整的会话创建、切换、删除、重命名，支持多会话并行
• 快捷指令 — 内置快捷指令（Shortcut）体系（由 AIDev 后台配置，自动加载）
• 引用与溯源 — 支持消息引用、来源标注，增强内容可信度
• 分享能力 — 支持会话分享与快照导出
• 拖拽交互 — AIBlueking 面板支持自由拖拽与尺寸调整

v2.0 的变化

AI 小鲸 v2.0 是一次架构级重构，主要变化包括：

• 模块化架构 — 从单体组件拆分为三层架构，关注点彻底分离
• Manager 模式 — 引入 SessionManager、ChatManager、ShortcutManager 等业务管理器，易于扩展和覆写
• 独立包设计 — chat-x 和 chat-helper 可完全独立使用，不依赖上层组件
• TypeScript 优先 — 全量 TypeScript 重写，提供完整的类型定义和类型推导
• AG-UI 协议 — 全新的流式通信协议，替代旧版 SSE 方案，支持更丰富的事件类型

从 v1.x 升级？

请参阅 v1.x 迁移指南 了解详细的升级步骤与 Breaking Changes。