使用说明
UI组件预览+AI聊天机器人
一个React应用程序，用于预览由OpenAI支持的集成AI聊天机器人的UI组件。
先决条件
- Node.js 18+
- OpenAI API密钥
快速开始
1.克隆并安装依赖项
# Install frontend dependencies
npm install
# Install server dependencies
cd server
npm install
2.配置环境变量
创建 server/.env:
OPENAI_API_KEY=your_api_key_here
3.启动应用程序
您需要运行两个终端：
终端1-API服务器：
cd server
npm run api
2号航站楼-前端：
npm run dev
打开http://localhost:5173在您的浏览器中。
项目结构
├── src/ # React frontend
│ ├── components/
│ │ ├── ui/ # Reusable UI components
│ │ ├── preview/ # Component demos
│ │ ├── Chatbot.tsx # AI chatbot interface
│ │ └── Sidebar.tsx # Navigation
│ └── hooks/ # Custom React hooks
│
├── server/ # Backend
│ ├── api.js # Express API (chatbot endpoint)
│ ├── index.js # MCP server (Claude Code tools)
│ └── .env # Environment variables
可用脚本
前端
| 命令 | 描述 |
|---|---|
npm run dev |
启动开发服务器 |
npm run build |
为生产而建 |
npm run preview |
预览生产构建 |
服务器
| 命令 | 描述 |
|---|---|
npm run api |
启动Express API服务器（端口3001） |
npm run start |
启动MCP服务器 |
特性
- UI组件预览 -浏览和测试按钮，模态组件
- 人工智能聊天机器人 -与OpenAI聊天，支持对话生成工具
- 深色模式 -在浅色和深色主题之间切换
聊天机器人工具
当被询问时，聊天机器人可以使用这些工具：
- 生成对话 -在人们之间就任何话题进行对话
- 生成对话 -为特定场景编写对话场景
示例提示：
- “与3人就最佳编程语言展开辩论”
- “在咖啡店见面的两个朋友之间创建对话”
技术栈
- React 18+TypeScript
- 维特
- Tailwind CSS
- Express.js
- OpenAI API
