Gemini Coder#
Gemini Coder 是一款基於 Google 的 Gemini API、Next.js 和 Tailwind CSS 的 AI 應用生成工具。它能夠通過簡單的文本描述，快速生成完整的 Web 應用代碼，並結合 Sandpack 實現實時代碼編輯和預覽功能。用戶只需提供應用的基本描述，系統即可自動生成相應的代碼和界面，極大地簡化了開發流程，提高了開發效率。無論是快速原型開發還是小型應用開發，Gemini Coder 都能提供強大的支持。
主要功能#
- 代碼生成：基於簡單的文本描述，自動生成完整的 Web 應用代碼。
- 實時預覽：提供實時代碼編輯和預覽功能，用戶可以即時查看應用效果。
- 多模型支持：兼容 Gemini 1.5 Pro、Gemini 1.5 Flash 和 Gemini 2.0 Flash Experimental 等模型，滿足不同開發需求。
技術原理#
- Gemini API：基於 Google 的 Gemini API 進行代碼生成，能夠理解用戶需求並生成符合要求的代碼結構和邏輯。
- Next.js：作為 Web 應用的框架，支持靜態生成和服務器端渲染，提升應用的加載速度和 SEO 表現。
- Tailwind CSS：作為樣式框架，通過組合工具類實現複雜的佈局和樣式，提高開發效率和代碼的可維護性。
- Sandpack：提供實時代碼編輯和預覽功能，為用戶提供一個隔離的環境，安全地編輯代碼並實時查看應用變化。
如何運行 Gemini Coder#
- 克隆倉庫
首先，克隆 Gemini Coder 的 GitHub 倉庫：git clone https://github.com/osanseviero/geminiCoder - 配置環境
在項目根目錄下創建 .env 文件，並添加你的 Google AI Studio API 密鑰：
GOOGLE_AI_API_KEY=your_api_key_here
- 安裝依賴並運行
安裝項目依賴並啟動本地開發服務器：
npm install
npm run dev
-
訪問應用
打開瀏覽器，訪問 http://localhost:3000，即可開始使用 Gemini Coder。資源
HuggingFace 倉庫：https://huggingface.co/spaces/osanseviero/gemini-coder
GitHub 倉庫：https://github.com/osanseviero/geminiCoder
Gemini API 文檔：https://ai.google.dev/gemini-api/docs
Sandpack 文檔：https://sandpack.codesandbox.io/