{"id":28497278,"url":"https://github.com/google-gemini/gemini-image-editing-nextjs-quickstart","last_synced_at":"2025-07-03T10:31:45.436Z","repository":{"id":282754924,"uuid":"949542298","full_name":"google-gemini/gemini-image-editing-nextjs-quickstart","owner":"google-gemini","description":"Get started with native image generation and editing using Gemini 2.0 and Next.js","archived":false,"fork":false,"pushed_at":"2025-05-05T09:19:30.000Z","size":17725,"stargazers_count":464,"open_issues_count":6,"forks_count":87,"subscribers_count":8,"default_branch":"main","last_synced_at":"2025-06-08T13:05:42.034Z","etag":null,"topics":["gemini","gemini-api"],"latest_commit_sha":null,"homepage":"https://ai.google.dev/gemini-api/docs/image-generation","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/google-gemini.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-03-16T17:31:43.000Z","updated_at":"2025-06-07T07:25:11.000Z","dependencies_parsed_at":"2025-05-05T10:35:47.533Z","dependency_job_id":null,"html_url":"https://github.com/google-gemini/gemini-image-editing-nextjs-quickstart","commit_stats":null,"previous_names":["google-gemini/gemini-image-editing-nextjs-quickstart"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/google-gemini/gemini-image-editing-nextjs-quickstart","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/google-gemini%2Fgemini-image-editing-nextjs-quickstart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/google-gemini%2Fgemini-image-editing-nextjs-quickstart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/google-gemini%2Fgemini-image-editing-nextjs-quickstart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/google-gemini%2Fgemini-image-editing-nextjs-quickstart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/google-gemini","download_url":"https://codeload.github.com/google-gemini/gemini-image-editing-nextjs-quickstart/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/google-gemini%2Fgemini-image-editing-nextjs-quickstart/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263307978,"owners_count":23446373,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["gemini","gemini-api"],"created_at":"2025-06-08T13:05:43.560Z","updated_at":"2025-07-03T10:31:45.425Z","avatar_url":"https://github.com/google-gemini.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Gemini 2.0 Flash Image Generation and Editing\n\nNextjs quickstart for to generating and editing images with Google Gemini 2.0 Flash. It allows users to generate images from text prompts or edit existing images through natural language instructions, maintaining conversation context for iterative refinements. Try out the hosted demo at [Hugging Face Spaces](https://huggingface.co/spaces/philschmid/image-generation-editing).\n\nhttps://github.com/user-attachments/assets/8ffa5ee3-1b06-46a9-8b5e-761edb0e00c3\n\nGet your `GEMINI_API_KEY` key [here](https://ai.google.dev/gemini-api/docs/api-key) and start building.\n\n**How It Works:**\n\n1. **Create Images**: Generate images from text prompts using Gemini 2.0 Flash\n2. **Edit Images**: Upload an image and provide instructions to modify it\n3. **Conversation History**: Maintain context through a conversation with the AI for iterative refinements\n4. **Download Results**: Save your generated or edited images\n\n## Basic request\n\nFor developers who want to call the Gemini API directly, you can use the Google Generative AI JavaScript SDK:\n\n```javascript\nconst { GoogleGenerativeAI } = require(\"@google/generative-ai\");\nconst fs = require(\"fs\");\n\nconst genAI = new GoogleGenerativeAI(process.env.GEMINI_API_KEY);\n\nasync function generateImage() {\n  const contents =\n    \"Hi, can you create a 3d rendered image of a pig \" +\n    \"with wings and a top hat flying over a happy \" +\n    \"futuristic scifi city with lots of greenery?\";\n\n  // Set responseModalities to include \"Image\" so the model can generate\n  const model = genAI.getGenerativeModel({\n    model: \"gemini-2.0-flash-exp\",\n    generationConfig: {\n      responseModalities: [\"Text\", \"Image\"]\n    }\n  });\n\n  try {\n    const response = await model.generateContent(contents);\n    for (const part of response.response.candidates[0].content.parts) {\n      // Based on the part type, either show the text or save the image\n      if (part.text) {\n        console.log(part.text);\n      } else if (part.inlineData) {\n        const imageData = part.inlineData.data;\n        const buffer = Buffer.from(imageData, \"base64\");\n        fs.writeFileSync(\"gemini-native-image.png\", buffer);\n        console.log(\"Image saved as gemini-native-image.png\");\n      }\n    }\n  } catch (error) {\n    console.error(\"Error generating content:\", error);\n  }\n}\n```\n\n## Features\n\n- 🎨 Text-to-image generation with Gemini 2.0 Flash\n- 🖌️ Image editing through natural language instructions\n- 💬 Conversation history for context-aware image refinements\n- 📱 Responsive UI built with Next.js and shadcn/ui\n- 🔄 Seamless workflow between creation and editing modes\n- ⚡ Uses Gemini 2.0 Flash Javascript SDK\n\n## Getting Started\n\n### Local Development\n\nFirst, set up your environment variables:\n\n```bash\ncp .env.example .env\n```\n\nAdd your Google AI Studio API key to the `.env` file:\n\n_Get your `GEMINI_API_KEY` key [here](https://ai.google.dev/gemini-api/docs/api-key)._\n\n```\nGEMINI_API_KEY=your_google_api_key\n```\n\nThen, install dependencies and run the development server:\n\n```bash\nnpm install\nnpm run dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the application.\n\n## Deployment\n\n### Vercel\n\n[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fgoogle-gemini%2Fgemini-image-editing-nextjs-quickstart\u0026env=GEMINI_API_KEY\u0026envDescription=Create%20an%20account%20and%20generate%20an%20API%20key\u0026envLink=https%3A%2F%2Faistudio.google.com%2Fapp%2Fu%2F0%2Fapikey\u0026demo-url=https%3A%2F%2Fhuggingface.co%2Fspaces%2Fphilschmid%2Fimage-generation-editing)\n\n### Docker\n\n1. Build the Docker image:\n\n```bash\ndocker build -t nextjs-gemini-image-editing .\n```\n\n2. Run the container with your Google API key:\n\n```bash\ndocker run -p 3000:3000 -e GEMINI_API_KEY=your_google_api_key nextjs-gemini-image-editing\n```\n\nOr using an environment file:\n\n```bash\n# Run container with env file\ndocker run -p 3000:3000 --env-file .env nextjs-gemini-image-editing\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the application.\n\n## Technologies Used\n\n- [Next.js](https://nextjs.org/) - React framework for the web application\n- [Google Gemini 2.0 Flash](https://deepmind.google/technologies/gemini/) - AI model for image generation and editing\n- [shadcn/ui](https://ui.shadcn.com/) - Re-usable components built using Radix UI and Tailwind CSS\n\n## License\n\nThis project is licensed under the Apache License 2.0 - see the [LICENSE](./LICENSE) file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgoogle-gemini%2Fgemini-image-editing-nextjs-quickstart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgoogle-gemini%2Fgemini-image-editing-nextjs-quickstart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgoogle-gemini%2Fgemini-image-editing-nextjs-quickstart/lists"}