# vibecoding-ai-assistant

**Repository Path**: pythonxueba/vibecoding-ai-assistant

## Basic Information

- **Project Name**: vibecoding-ai-assistant
- **Description**: 基于FastAPI的VibeCoding智能AI编程助手系统，通过自然语言与AI协作，支持实时流式输出、用户隔离、沙盒环境管理
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-12
- **Last Updated**: 2026-01-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# VibeCoding AI - Python后端版

## 项目概述

VibeCoding AI是一个智能AI编程助手，通过自然语言与AI协作，帮助用户快速创建和开发项目。

## 技术架构

### 后端
- **框架**: FastAPI (Python 3.10+)
- **AI模型**: 支持多种模型（NVIDIA Llama3-70B、OpenAI GPT等）
- **通信**: SSE (Server-Sent Events) 流式输出

### 前端
- **框架**: HTML5 + jQuery + CSS3
- **样式**: Tailwind CSS (CDN)
- **Markdown**: Marked.js
- **代码高亮**: Highlight.js

## 核心功能

### 1. AI智能对话
- 支持多模态输入（文本+图片）
- 流式输出，实时显示思考过程
- 支持自定义API配置（Base URL、API Key、模型名称）
- 兼容OpenAI API格式

### 2. TabBar三栏切换
- **AI对话**: 聊天界面，发送消息，查看AI回复
- **项目预览**: 内置浏览器，预览运行后的项目
- **文件管理器**: 浏览、预览、下载项目文件

### 3. 沙盒环境管理
- 安全执行shell命令
- 实时显示命令输出
- 自动错误处理和重试

### 4. 文件管理
- 项目文件浏览器
- 支持单个/批量下载
- 文件内容预览

### 5. 项目预览
- 内置iframe预览
- 支持自定义URL
- 实时刷新

### 6. 网页搜索与浏览
- 网络搜索功能
- 网页内容解析
- 代码块提取

## 目录结构

```
backend/
├── app.py                  # FastAPI主应用
├── ai_service.py           # AI服务（NVIDIA Llama3-70B）
├── file_service.py         # 文件管理服务
├── command_service.py      # 命令执行服务
├── search_service.py       # 搜索服务
├── web_browser.py          # 网页浏览服务
├── requirements.txt        # Python依赖
├── frontend/
│   ├── index.html          # 主页面（三栏布局）
│   ├── css/
│   │   └── styles.css      # 自定义样式
│   └── js/
│       ├── app.js          # 主应用程序
│       ├── chat.js         # 聊天模块
│       ├── file-manager.js # 文件管理模块
│       └── preview.js      # 预览模块
└── README.md               # 项目说明
```

## 快速开始

### 1. 安装依赖

```bash
cd backend
pip install -r requirements.txt
```

### 2. 配置环境变量（可选）

创建 `.env` 文件：

```bash
# NVIDIA API配置（默认）
NVIDIA_API_KEY=nvapi-xxxx
NVIDIA_API_BASE=https://integrate.api.nvidia.com/v1
NVIDIA_MODEL=nvidia/llama-3.1-70b-instruct

# 项目根目录
PROJECT_ROOT=/workspace/projects
```

或者，可以在Web界面中通过"API配置"按钮手动配置：
- Base URL: 可以是NVIDIA、OpenAI或其他兼容的API端点
- API Key: 你的API密钥
- 模型名称: 要使用的模型名称

### 3. 启动服务

```bash
python app.py
```

服务将在 `http://localhost:5000` 启动。

## API接口

### GET /api/config

获取当前API配置。

**响应:**
```json
{
  "base_url": "https://integrate.api.nvidia.com/v1",
  "model": "nvidia/llama-3.1-70b-instruct",
  "api_key_set": true
}
```

### POST /api/config

更新API配置。

**请求体:**
```json
{
  "base_url": "https://api.openai.com/v1",
  "api_key": "sk-xxxx",
  "model": "gpt-4"
}
```

**响应:**
```json
{
  "success": true,
  "config": {
    "base_url": "https://api.openai.com/v1",
    "model": "gpt-4",
    "api_key_set": true
  }
}
```

### POST /api/chat

SSE流式聊天接口。

**请求体:**
```json
{
  "message": "创建一个React登录页面",
  "history": [],
  "image_base64": "base64编码的图片（可选）"
}
```

**响应事件:**
- `start`: 开始聊天
- `thinking`: 思考过程（实时）
- `content`: AI回答内容（流式）
- `command_start`: 命令开始执行
- `command_result`: 命令执行结果
- `search_start`: 开始搜索
- `search_result`: 搜索结果
- `browse_start`: 开始浏览网页
- `browse_result`: 网页浏览结果
- `error`: 错误信息

### GET /api/files

获取文件列表。

**参数:**
- `path`: 相对路径（可选）

**响应:**
```json
{
  "success": true,
  "files": [
    {
      "name": "index.html",
      "path": "index.html",
      "type": "file",
      "size": 1234,
      "extension": ".html"
    }
  ]
}
```

### GET /api/file/content

获取文件内容。

**参数:**
- `path`: 文件路径

### POST /api/file/download

下载单个文件。

**请求体:**
```json
{
  "file_path": "index.html"
}
```

### POST /api/files/batch-download

批量下载文件（ZIP打包）。

**请求体:**
```json
{
  "files": ["index.html", "style.css", "app.js"]
}
```

### POST /api/execute

执行shell命令。

**请求体:**
```json
{
  "command": "ls -la",
  "cwd": "/workspace"
}
```

**响应:**
```json
{
  "success": true,
  "stdout": "...",
  "stderr": "",
  "exit_code": 0,
  "duration": 123.45
}
```

## 版本更新

### v2.1.0
- 新增TabBar三栏切换界面
- 支持手动配置API Key和Base URL
- 兼容OpenAI API格式
- 发送按钮内置到输入框
- 优化UI交互体验

### v2.0.0
- Python后端 + HTML/jQuery前端架构
- NVIDIA Llama3-70B多模态支持
- 文件管理功能
- 网页搜索与浏览
- 流式输出和思考展示

## 系统提示词

系统提示词包含以下核心指令：

1. **持续工作**: 不能运行几步就停止，要持续完善项目
2. **搜索优先**: 不知道的内容必须搜索，严禁编造
3. **错误处理**: 所有命令输出和错误都是上下文的一部分
4. **自动修复**: 出现错误时必须分析原因并尝试修复

## 安全特性

- 危险命令检测（rm -rf /、mkfs等）
- 路径遍历防护
- 命令执行超时控制
- 文件类型限制

## 开发说明

### 前端开发

前端文件在 `frontend/` 目录下，使用纯HTML/jQuery/CSS3开发。

- `index.html`: 主页面，三栏布局
- `css/styles.css`: 自定义样式
- `js/app.js`: 主应用程序
- `js/chat.js`: 聊天功能
- `js/file-manager.js`: 文件管理
- `js/preview.js`: 项目预览

### 后端开发

后端使用FastAPI框架，模块化设计：

- `app.py`: 路由和应用配置
- `ai_service.py`: AI集成和流式输出
- `file_service.py`: 文件操作
- `command_service.py`: 命令执行和安全检查
- `search_service.py`: 网络搜索
- `web_browser.py`: 网页解析

## 常见问题

### 1. 如何配置API？

点击顶部导航栏的"API配置"按钮，在弹窗中输入：
- **Base URL**: NVIDIA API、OpenAI API或其他兼容端点
- **API Key**: 你的API密钥
- **模型名称**: 要使用的模型（如 `nvidia/llama-3.1-70b-instruct` 或 `gpt-4`）

### 2. NVIDIA API密钥获取

访问 https://build.nvidia.com/ 获取免费API密钥。

### 3. 使用OpenAI API

在API配置中：
- Base URL: `https://api.openai.com/v1`
- API Key: 你的OpenAI API Key
- 模型: `gpt-4` 或 `gpt-3.5-turbo`

### 4. Tab切换界面

通过顶部Tab栏切换三个模块：
- **AI对话**: 与AI交流，获取帮助
- **项目预览**: 预览运行中的项目（默认 http://localhost:3000）
- **文件管理器**: 浏览、下载项目文件

### 5. 预览项目

在"项目预览"Tab中，输入你的项目URL，点击箭头按钮访问。

### 6. 文件下载

在"文件管理器"Tab中：
- 单个文件：点击文件名查看内容
- 批量下载：点击右上角下载图标，打包下载

## 许可证

MIT License