AURION MCP 前端
AURION MCP前端是一个充满丰富动画效果的对话界面,它将交互式的3D灵感角色、电影级用户界面和实时语音功能融为一体,打造出一个未来感十足的操作员控制台。它是AURION的主要用户界面,AURION是一个多模式AI助手,能够在开发者、伴侣和隐形模式之间切换。
特点/特性
- 沉浸式角色渲染器 –
TerminalCharacter它结合了连续的全身动作、情感感知的手势以及鼠标响应式追踪,创造出栩栩如生的AI形象。 - 动态对话流程 –
useAurionChat()为每个助手回复协调欢迎提示、流式响应和自动语音合成。 - 语音交互 – 集成文本转语音(TTS)和语音识别(通过
useSpeechRecognition) 无双手操作交互和生动的唇形同步。 - 对话历史面板 –
ConversationHistory保持一个持久且可滚动的日志,带有语音指示器和自适应布局。 - 可定制模式 – “设置”上下文切换不同的个性预设(开发者、伴侣、潜行),这些预设决定了提示语、语气和视觉效果。
- 未来感十足的用户界面外壳 –
InteractiveBackground,SideNavigation,以及RightSidebar提供遥测风格的可视化界面、环境效果和快速操作功能。
技术栈
- 框架使用TypeScript的Next.js 14(App Router)
- 造型设计使用自定义玻璃质感和霓虹渐变的Tailwind CSS
- 动画利用React Hooks
requestAnimationFrame用于60帧每秒的运动 - 音频浏览器语音API,可选集成ElevenLabs
入门指南/开始使用
克隆仓库并安装依赖项:
npm install启动开发服务器:
npm run dev该应用程序在 http://localhost:3000 翻译为中文是:“本地主机:3000 端口”。不过,在中文语境中,我们通常会直接说网址或地址,而不是详细解释其含义,所以也可以简化为“http://localhost:3000(本地地址)”。但如果是需要解释其含义,那么“本地主机:3000 端口”是一个合适的翻译对文件内的编辑 src/app/ 并且 src/components/ 自动热重载。
环境设置
- 环境变量复制
env.example到;向;朝;对于;在(表示时间或地点).env并填充凭据(例如,TTS提供商、后端端点)。 - 音频权限启用语音识别功能时,浏览器可能会提示访问麦克风。
项目结构
├── src/
│ ├── app/ # App Router entrypoints, global layout, styles
│ ├── components/ # Character renderer, UI panels, controls
│ ├── hooks/ # Animation, speech, settings, and API hooks
│ ├── context/ # Shared settings state (mode, audio options)
│ └── services/ # Chat API client, TTS utilities
├── public/ # Static assets (audio cues, 3D models, icons)
├── assets/ # Project documentation imagery (e.g., ui.png)
├── CHARACTER_3D_SETUP.md # Deep dive into animation system
├── TTS_SETUP.md # Text-to-Speech configuration guide
└── README.md可用脚本
npm run dev– 启动带有热重载功能的 Next.js 开发服务器npm run build– 生成优化的生产构建npm run start– 在本地运行生产构建npm run lint– 使用配置的 ESLint 规则集运行代码检查
资产
- UI 预览:
assets/ui.png提供了主要对话屏幕的快照。请更新此图像,以确保文档与最新的用户界面保持一致。
贡献
- 克隆该仓库并创建一个功能分支。
- 遵循现有的代码风格并使用
npm run lint在提交您的更改之前。 - 提交一个拉取请求,描述该功能、提供截图(如果涉及用户界面更改)以及测试步骤。
附加文件
CHARACTER_3D_SETUP.md– 角色动画与情感系统的架构。TTS_SETUP.md– ElevenLabs与浏览器基础语音合成的集成详情。
许可证
该项目目前采用私有/内部许可协议进行分发。请联系维护人员获取使用权限。
