GitPedia

Vue3 deepseek gemini

vue3+deepseek+gemini对接apiKey,实现AI对话

From cxz520299·Updated April 28, 2026·View on GitHub·

基于 Vue 3 部署 `DeepSeek` 和 `Google Gemini 2.0` API集成的`Web AI`对话框,抖音风格,支持代码高亮显示,并针对移动端进行了简洁适配。 The project is written primarily in HTML, first published in 2025. Key topics include: deepseek, gemini, highlightjs, vite, vue.

描述

基于 Vue 3 部署 DeepSeekGoogle Gemini 2.0 API集成的Web AI对话框,抖音风格,支持代码高亮显示,并针对移动端进行了简洁适配。

✨ 核心特性

🎯 智能预设会话系统

  • CRUD页面配置助手:专业的前端工程师助手,支持自然语言转Vue3配置代码
  • 预设会话标识:星标标记,一目了然
  • 预设保护机制:预设会话不可删除,确保系统稳定性
  • 即开即用:无需配置,开箱即用的专业模板

🛠️ 自定义AI输出规则

  • 模块化提示词管理:通过 src/config/prompts.js 统一管理AI提示词
  • 双引擎支持:DeepSeek和Gemini模型分别配置专属提示词
  • 专业领域定制:针对前端开发场景优化的AI输出规则
  • 智能类型推断:根据字段描述自动推断合适的组件类型

📥 智能代码导出功能

  • 一键导出代码:智能识别代码块,支持多种格式
  • 智能文件命名:根据代码类型自动生成文件名
  • 多代码块合并:自动合并多个代码片段
  • 格式支持:TypeScript、JavaScript、Vue、HTML、CSS等

🎨 UI/UX优化

  • 抖音风格界面:时尚美观的用户界面
  • 代码高亮显示:支持语法高亮,便于阅读
  • 移动端适配:响应式设计,完美适配各种设备
  • 动画效果:流畅的交互动画,提升用户体验

使用方法

  1. 配置 API Key:

    请务必将 src/config 目录下的配置文件 API_KEY 替换为你自己申请的 API Key。

    注意: Google Gemini 2.0 需要科学上网才能正常使用。

    具体来说,你需要修改 src/config/deepseek.js 或者 src/config/gemini.js (看你需求具体需要使用那种模型):

    javascript
    // src/config/index.js export default { API_KEY: 'YOUR_API_KEY', // 替换为你的 API Key // ... 其他配置 };

    重要提示: 请妥善保管你的 API Key,不要将其提交到公共仓库!

  2. 运行项目:

    完成 API Key 配置后,按照以下步骤运行项目:

    • 安装依赖:

      bash
      npm install # 或者使用 yarn install / pnpm install
    • 启动项目:

      bash
      npm run dev
    • 构建项目:

      bash
      npm run build
    • 部署构建后的文件到你的服务器。

🚀 快速体验

在线预览

访问 https://euzhi.com/ 在线体验完整功能。

预设会话体验

  1. 打开应用后,左侧会看到带星标的"CRUD页面配置"会话
  2. 点击进入,按照提示描述你的页面需求
  3. AI会自动生成专业的Vue3配置代码
  4. 点击"导出代码"按钮,一键下载生成的代码文件

使用示例

输入描述:

用户管理表格,包含以下字段:
- 用户ID(数字)
- 用户名(文本)
- 邮箱(文本)
- 状态(选择:启用/禁用)
- 注册时间(日期)

AI自动生成:

  • 完整的搜索参数配置
  • 详细的表格列定义
  • 智能的组件类型推断
  • 清晰的中文注释

环境说明

  • Node.js: v18.20.5
  • npm: 10.8.2

其他说明

如果对你有帮助给我点一个star吧,谢谢!

贡献

欢迎提交 issue 和 pull request!

This article is auto-generated from cxz520299/vue3-deepseek-gemini via the GitHub API.Last fetched: 6/28/2026