Gemini Coder：基于 Google Gemini API 的开源 Web 应用生成工具，支持实时编辑和预览

蚝油菜花
164 阅读3分钟

❤️ 如果你也关注 AI 的发展现状，且对 AI 应用开发非常感兴趣，我会每日分享大模型与 AI 领域的最新开源项目和应用，提供运行实例和实用教程，帮助你快速上手AI技术，欢迎关注我哦！

🥦 微信公众号｜搜一搜：蚝油菜花 🥦

🚀 快速阅读

  1. 功能：通过文本描述快速生成 Web 应用代码，支持实时预览。
  2. 技术：基于 Google Gemini API、Next.js 和 Tailwind CSS 实现代码生成和渲染。
  3. 应用：适用于快速原型开发、教育学习和小型应用开发。

正文（附运行示例）

Gemini Coder 是什么

公众号: 蚝油菜花 - geminiCoder

Gemini Coder 是一款基于 Google 的 Gemini API、Next.js 和 Tailwind CSS 的 AI 应用生成工具。它能够通过简单的文本描述，快速生成完整的 Web 应用代码，并结合 Sandpack 实现实时代码编辑和预览功能。

用户只需提供应用的基本描述，系统即可自动生成相应的代码和界面，极大地简化了开发流程，提高了开发效率。无论是快速原型开发还是小型应用开发，Gemini Coder 都能提供强大的支持。

Gemini Coder 的主要功能

  • 代码生成：基于简单的文本描述，自动生成完整的 Web 应用代码。
  • 实时预览：提供实时代码编辑和预览功能，用户可以即时查看应用效果。
  • 多模型支持：兼容 Gemini 1.5 Pro、Gemini 1.5 Flash 和 Gemini 2.0 Flash Experimental 等模型，满足不同开发需求。

Gemini Coder 的技术原理

  • Gemini API：基于 Google 的 Gemini API 进行代码生成，能够理解用户需求并生成符合要求的代码结构和逻辑。
  • Next.js：作为 Web 应用的框架，支持静态生成和服务器端渲染，提升应用的加载速度和 SEO 表现。
  • Tailwind CSS：作为样式框架，通过组合工具类实现复杂的布局和样式，提高开发效率和代码的可维护性。
  • Sandpack：提供实时代码编辑和预览功能，为用户提供一个隔离的环境，安全地编辑代码并实时查看应用变化。

如何运行 Gemini Coder

1. 克隆仓库

首先，克隆 Gemini Coder 的 GitHub 仓库：

git clone https://github.com/osanseviero/geminiCoder
2. 配置环境

在项目根目录下创建 .env 文件，并添加你的 Google AI Studio API 密钥：

GOOGLE_AI_API_KEY=your_api_key_here
3. 安装依赖并运行

安装项目依赖并启动本地开发服务器：

npm install
npm run dev
4. 访问应用

打开浏览器，访问 http://localhost:3000，即可开始使用 Gemini Coder。

资源

❤️ 如果你也关注 AI 的发展现状，且对 AI 应用开发非常感兴趣，我会每日分享大模型与 AI 领域的最新开源项目和应用，提供运行实例和实用教程，帮助你快速上手AI技术，欢迎关注我哦！

🥦 微信公众号｜搜一搜：蚝油菜花 🥦

avatar
文章
阅读
粉丝