# CoderWithAI

**Repository Path**: Asheng008/CoderWithAI

## Basic Information

- **Project Name**: CoderWithAI
- **Description**: 来自github的仓库（alchaincyf/CoderWithAI）
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-07-04
- **Last Updated**: 2025-07-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# CoderWithAI - 智能编程学习平台

欢迎来到CoderWithAI，这是一个革命性的编程学习平台，结合了丰富的编程教程和智能AI助手，为学习者提供个性化的学习体验。

## 主要特性

1. **多语言编程教程**: 提供多种主流编程语言的教程，包括但不限于JavaScript、Python、Java、C++等。
2. **智能AI助手**: 集成了基于DeepSeek API的AI聊天功能，为学习者提供实时帮助和指导。
3. **动态内容加载**: 教程内容从Markdown文件动态加载，便于更新和维护。
4. **响应式设计**: 完美适配各种设备，从手机到桌面电脑。
5. **交互式学习体验**: 通过AI助手，学习者可以获得即时反馈和个性化指导。
6. **用户友好界面**: 直观的导航和布局，让学习过程更加流畅。

## 项目结构

- `/app`: Next.js应用的主要结构，包含页面路由和布局组件。
- `/components`: 可复用的React组件，如AI聊天窗口。
- `/lib`: 工具函数和数据处理逻辑。
- `/public`: 静态资源文件。
- `/tutorials`: 按编程语言分类的教程Markdown文件。

## 使南

1. 访问网站首页，选择你想学习的编程语言。
2. 浏览该语言的教程列表，点击感兴趣的主题开始学习。
3. 在学习过程中，如有疑问，可以随时打开右下角的AI助手进行提问。
4. AI助手会根据你的问题和当前学习内容提供个性化的解答和指导。

## 开发设置

本项目基于Next.js框架开发。要在本地运行项目：

1. 克隆仓库
2. 安装依赖：`npm install`
3. 创建`.env.local`文件，添加必要的环境变量（如DEEPSEEK_API_KEY）
4. 运行开发服务器：`npm run dev`
5. 在浏览器中访问 `http://localhost:3000`

## AI聊天组件

项目集成了一个基于DeepSeek API的AI聊天组件（AIChatWidget）：

- 位于右下角的浮动聊天按钮
- 可展开的聊天窗口（600px x 400px）
- 实时对话功能
- 上下文感知，能根据用户当前浏览的页面提供相关帮助
- 全屏模式：用户可以通过点击聊天窗口右上角的全屏图标，将聊天窗口切换到全屏模式，以获得更好的阅读体验，特别适合长篇回复
- 简洁的界面控制：全屏切换和关闭按钮位于聊天窗口的右上角，便于操作

## 未来计划

- 实现用户账户系统，支持学习进度追踪
- 添加交互式代码编辑器
- 集成更多AI功能，如代码审查和自动补全
- 扩展支持的编程语言和框架
- 开发移动应用版本

## 贡献指南

我们欢迎社区贡献！如果你想为项目做出贡献：

1. Fork 本仓库
2. 创建你的特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交你的改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 开启一个 Pull Request

## 许可证

本项目采用 MIT 许可证 - 详情请见 [LICENSE.md](LICENSE.md) 文件

## 联系我们

如有任何问题或建议，请通过以下方式联系我们：

- 电子邮件: alchaincyf@gmail.com

感谢你选择CoderWithAI，让我们一起开启智能编程学习之旅！

## AI回复显示

为了提供最佳的用户体验，我们的AI助手回复现在具有以下特性：

- 所有AI回复都会全文显示，无论长度如何。
- 用户可以通过点击全屏按钮切换到全屏模式，以获得更舒适的阅读体验。
- 这确保用户可以立即看到完整的回答，并且可以根据需要调整显示方式。

这些更新旨在提供更直接、更流畅的对话体验，让用户能够以最舒适的方式获取所有必要的信息。

## DeepSeek AI 集成

本项目使用DeepSeek AI来提供智能对话功能。以下是集成的关键点：

### API 调用

1. **环境变量**：
   - 使用`DEEPSEEK_API_KEY`环境变量存储API密钥。

2. **API 端点**：
   - 使用`https://api.deepseek.com/v1/chat/completions`作为API端点。

3. **请求方法**：
   - 使用POST方法发送请求。

4. **请求头**：
   - `Authorization`: `Bearer ${API_KEY}`
   - `Content-Type`: `application/json`

5. **请求体**：
   ```javascript
   {
     model: "deepseek-chat",
     messages: [
       {"role": "system", "content": systemPrompt},
       ...userMessages
     ],
     stream: true
   }
   ```

6. **响应处理**：
   - 使用流式响应（`stream: true`）来实现实时对话。
   - 响应类型设置为`'stream'`。

### 实现细节

1. **CORS 处理**：
   - 实现了CORS头部处理，允许特定域名访问API。

2. **错误处理**：
   - 实现了详细的错误日志记录和错误响应。

3. **上下文感知**：
   - 根据用户当前浏览的页面路径调整系统提示。

4. **消息格式化**：
   - 用户消息内容被额外用引号包裹，以区分系统消息和用户输入。

5. **流式响应**：
   - 使用`text/event-stream`内容类型来支持流式传输。

6. **HTTP 客户端**：
   - 使用 `axios` 库发送 HTTP 请求到 DeepSeek API。

### 使用方法

在前端组件中，通过发送POST请求到`/api/chat`端点来与AI进行交互。请确保包含当前页面路径和对话历史。

注意：确保在服务器端代码中安装并导入 `axios`：