feat: generate image Tool (Nano Banana) (#284)

Co-authored-by: cgoing-bot <[email protected]>

Author: cgoinglove

README.md

@@ -8,7 +8,10 @@
 
 🚀 **[Live Demo](https://better-chatbot-demo.vercel.app/)** | See the experience in action in the [preview](#preview) below!
 
-[Demo Chat](https://better-chatbot-demo.vercel.app/export/a4820921-8012-496b-8a5d-13757050bafe)
+#### Demo Chats
+
+- **MCP Tools Demo:** [Chat with MCP Tools](https://better-chatbot-demo.vercel.app/export/a4820921-8012-496b-8a5d-13757050bafe)
+- **Image Generation Demo:** [Chat with Image Generation](https://better-chatbot-demo.vercel.app/export/image-generation-demo-12345)
 
 **Better Chatbot** - A better open-source AI chatbot for individuals and teams, inspired by ChatGPT, Claude, Grok, and Gemini.
 
@@ -205,6 +208,15 @@ Built-in web search powered by [Exa AI](https://exa.ai). Search the web with sem
 - **Free Tier:** 1,000 requests/month at no cost, no credit card required
 - **Easy Setup:** Get your API key instantly at [dashboard.exa.ai](https://dashboard.exa.ai)
 
+#### 🎨 Image Generation
+
+<img width="1034" height="940" loading="lazy" alt="image-generation" src="https://github.com/user-attachments/assets/placeholder-image" />
+
+Built-in image generation and editing capabilities powered by AI models. Create, edit, and modify images directly in your chats.
+
+- **Supported Operations:** Image generation, editing, and composition
+- **Current Models:** Gemini Nano Banana, OpenAI (coming soon)
+
 #### ⚡️ JS,PYTHON Executor
 
 <img width="1225" alt="js-executor-preview" src="https://github.com/user-attachments/assets/7deed824-e70b-46d4-a294-de20ed4dc869" loading="lazy"/>
@@ -424,7 +436,7 @@ Step-by-step setup guides for running and configuring better-chatbot.
 Planned features coming soon to better-chatbot:
 
 - [x] **File Upload & Storage** (Vercel Blob integration)
-- [ ] **Image Generation**
+- [x] **Image Generation**
 - [ ] **Collaborative Document Editing** (like OpenAI Canvas: user & assistant co-editing)
 - [ ] **RAG (Retrieval-Augmented Generation)**
 - [ ] **Web-based Compute** (with [WebContainers](https://webcontainers.io) integration)

messages/en.json

@@ -195,10 +195,12 @@
     "Error": "Chat Error",
     "thisMessageWasNotSavedPleaseTryTheChatAgain": "This message was not saved. Please try the chat again.",
     "uploadImage": "Upload Image",
+    "generateImage": "Generate Image",
     "imageUploadedSuccessfully": "Image uploaded successfully",
     "pleaseUploadImageFile": "Please upload an image file",
     "imageSizeMustBeLessThan10MB": "Image size must be less than 10MB",
     "failedToUploadImage": "Failed to upload image",
+    "imageUploadFailedUsingBase64": "Image upload failed. Using base64 encoding as fallback.",
     "Greeting": {
       "goodMorning": "Good morning, {name}",
       "goodAfternoon": "Good afternoon, {name}",

messages/es.json

@@ -75,10 +75,12 @@
     "Error": "Error de Chat",
     "thisMessageWasNotSavedPleaseTryTheChatAgain": "Este mensaje no se guardó. Por favor, intenta el chat nuevamente.",
     "uploadImage": "Subir Imagen",
+    "generateImage": "Generar Imagen",
     "imageUploadedSuccessfully": "Imagen subida exitosamente",
     "pleaseUploadImageFile": "Por favor sube un archivo de imagen",
     "imageSizeMustBeLessThan10MB": "El tamaño de la imagen debe ser menor a 10MB",
     "failedToUploadImage": "Error al subir la imagen",
+    "imageUploadFailedUsingBase64": "Error al subir la imagen. Usando codificación base64 como alternativa.",
     "Greeting": {
       "goodMorning": "Buenos días, {name}",
       "goodAfternoon": "Buenas tardes, {name}",

messages/fr.json

@@ -75,10 +75,12 @@
     "Error": "Erreur de Chat",
     "thisMessageWasNotSavedPleaseTryTheChatAgain": "Ce message n'a pas été enregistré. Veuillez réessayer le chat.",
     "uploadImage": "Télécharger une Image",
+    "generateImage": "Générer une Image",
     "imageUploadedSuccessfully": "Image téléchargée avec succès",
     "pleaseUploadImageFile": "Veuillez télécharger un fichier image",
     "imageSizeMustBeLessThan10MB": "La taille de l'image doit être inférieure à 10 Mo",
     "failedToUploadImage": "Échec du téléchargement de l'image",
+    "imageUploadFailedUsingBase64": "Le téléchargement de l'image a échoué. Utilisation de l'encodage base64 comme solution de secours.",
     "Greeting": {
       "goodMorning": "Bonjour, {name}",
       "goodAfternoon": "Bon après-midi, {name}",

messages/ja.json

@@ -75,10 +75,12 @@
     "Error": "チャットエラー",
     "thisMessageWasNotSavedPleaseTryTheChatAgain": "このメッセージは保存されませんでした。もう一度チャットをお試しください。",
     "uploadImage": "画像をアップロード",
+    "generateImage": "画像を生成",
     "imageUploadedSuccessfully": "画像が正常にアップロードされました",
     "pleaseUploadImageFile": "画像ファイルをアップロードしてください",
     "imageSizeMustBeLessThan10MB": "画像サイズは10MB未満である必要があります",
     "failedToUploadImage": "画像のアップロードに失敗しました",
+    "imageUploadFailedUsingBase64": "画像のアップロードに失敗しました。Base64エンコーディングを使用して送信します。",
     "Greeting": {
       "goodMorning": "おはようございます、{name}さん",
       "goodAfternoon": "こんにちは、{name}さん",

messages/ko.json

@@ -76,10 +76,12 @@
     "Error": "채팅 오류",
     "thisMessageWasNotSavedPleaseTryTheChatAgain": "이 메시지는 저장되지 않았습니다. 다시 시도해주세요.",
     "uploadImage": "이미지 업로드",
+    "generateImage": "이미지 만들기",
     "imageUploadedSuccessfully": "이미지가 성공적으로 업로드되었습니다",
     "pleaseUploadImageFile": "이미지 파일을 업로드해주세요",
     "imageSizeMustBeLessThan10MB": "이미지 크기는 10MB 미만이어야 합니다",
     "failedToUploadImage": "이미지 업로드에 실패했습니다",
+    "imageUploadFailedUsingBase64": "이미지 업로드에 실패했습니다. Base64 인코딩을 사용하여 전송합니다.",
     "Greeting": {
       "goodMorning": "{name}님 좋은 아침입니다",
       "goodAfternoon": "{name}님 좋은 오후입니다",

messages/zh.json

@@ -76,10 +76,12 @@
     "Error": "聊天错误",
     "thisMessageWasNotSavedPleaseTryTheChatAgain": "此消息未保存。请重试聊天。",
     "uploadImage": "上传图片",
+    "generateImage": "生成图片",
     "imageUploadedSuccessfully": "图片上传成功",
     "pleaseUploadImageFile": "请上传图片文件",
     "imageSizeMustBeLessThan10MB": "图片大小必须小于10MB",
     "failedToUploadImage": "上传图片失败",
+    "imageUploadFailedUsingBase64": "图片上传失败。使用Base64编码发送。",
     "Greeting": {
       "goodMorning": "早上好，{name}",
       "goodAfternoon": "下午好，{name}",

package.json

@@ -57,6 +57,7 @@
     "@ai-sdk/xai": "^2.0.23",
     "@aws-sdk/client-s3": "^3.901.0",
     "@aws-sdk/s3-request-presigner": "^3.901.0",
+    "@google/genai": "^1.22.0",
     "@modelcontextprotocol/sdk": "^1.19.1",
     "@openrouter/ai-sdk-provider": "^1.2.0",
     "@radix-ui/react-accordion": "^1.2.12",
@@ -152,10 +153,7 @@
     "vitest": "^3.2.4"
   },
   "lint-staged": {
-    "*.{js,json,mjs,ts,yaml,tsx,css}": [
-      "pnpm format",
-      "pnpm lint:fix"
-    ]
+    "*.{js,json,mjs,ts,yaml,tsx,css}": ["pnpm format", "pnpm lint:fix"]
   },
   "packageManager": "[email protected]",
   "engines": {