AI Robot Assistant

✨ 核心特性

为现代 Web 应用打造的最佳 AI 助手体验

🎨

3D 可爱机器人

基于 Three.js 的治愈系 3D 机器人形象，支持多种表情动画和状态反馈，让交互更有温度。

🎤

语音双活

支持语音唤醒和语音对话，内置 Web Speech API，解放双手，自然交互。

✋

自由拖拽

支持鼠标/触摸拖拽，惯性吸附到页面边缘，位置随心而定。

💬

智能对话

自适应高度对话框，支持 Markdown 格式渲染，对话内容清晰易读。

📱

响应式设计

完美适配各种屏幕尺寸，从桌面到移动端，体验始终如一。

🔌

跨框架兼容

Web Components 封装，React / Vue / Angular / 原生 JS 均可无缝集成。

🎨

多主题支持

内置蓝色、绿色、紫色三种主题，还可自定义颜色满足个性化需求。

🔧

易于集成

简单的 API 设计，几行代码即可将机器人添加到你的项目中。

🚀 快速开始

选择适合你的集成方式

🌐 Web Component

推荐方式，声明式使用，最简单直观

<ai-robot
  api-key="your-api-key"
  api-endpoint="https://api.example.com/chat"
  wake-word="嗨小智"
  theme="blue"
></ai-robot>

⚡ JavaScript API

编程式创建，更灵活的控制

import AIRobot from 'ai-robot-assistant';

const robot = AIRobot.create(document.body, {
  apiKey: 'your-api-key',
  apiEndpoint: 'https://api.example.com/chat',
  wakeWord: '嗨小智',
});

⚛️ React 组件

在 React 应用中完美融合

import { useEffect, useRef } from 'react';
import 'ai-robot-assistant';

function App() {
  const robotRef = useRef(null);

  useEffect(() => {
    robotRef.current?.on('message-received', handleMsg);
  }, []);

  return <ai-robot ref={robotRef} />;
}

🟢 Vue 组件

在 Vue 应用中轻松使用

<template>
  <ai-robot ref="robotRef" />
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import 'ai-robot-assistant';

const robotRef = ref(null);

onMounted(() => {
  robotRef.value?.on('message-received', handleMsg);
});
</script>

📖 API 文档

完整的配置选项和方法说明

配置选项

参数	类型	默认值	说明
apiKey	`string`	`''`	AI API 密钥
apiEndpoint	`string`	`''`	AI API 端点 URL
wakeWord	`string`	`'嗨小智'`	语音唤醒词
theme	`'blue' \| 'green' \| 'purple'`	`'blue'`	主题颜色
position	`'left' \| 'right'`	`'right'`	初始位置
voice.enabled	`boolean`	`true`	是否启用语音

常用方法

方法	参数	返回值	说明
send()	`message: string`	`Promise<string>`	发送消息并获取 AI 回复
setConfig()	`config: object`	`void`	更新配置
show() / hide()	`-`	`void`	控制机器人显示/隐藏
on() / off()	`event, callback`	`void`	事件监听/移除
clearHistory()	`-`	`void`	清空对话历史
getState()	`-`	`RobotState`	获取当前状态

事件类型

事件名	回调参数	说明
robot-ready	`-`	机器人初始化完成
state-change	`{ from, to }`	状态变化
message-sent	`Message`	消息已发送
message-received	`Message`	消息已接收

⚙️ API 配置