MCP Storybook Image Generator

# MCP Storybook Image Generator A professional-grade server that generates beautiful storybook images with matching children's stories using Google's Gemini AI. ## 🎬 Demo  ## 🌟 Features - **Storybook Image Generation**: Creates high-quality images in various art styles for children's stories - **Automatic Story Creation**: Generates engaging children's stories to match the images - **Multiple Art Styles**: Choose from 3D cartoon, watercolor, pixel art, hand drawn, or claymation styles - **Instant Preview**: Automatically opens generated images and stories in your browser - **Local Storage**: Saves images and stories in an organized output directory ## 🛠️ Technical Stack - **Core Framework**: Model Context Protocol (MCP) SDK - **AI Integration**: Google Generative AI (Gemini) - **Runtime**: Node.js v14+ - **Language**: TypeScript - **Package Manager**: npm ## 📋 Prerequisites - Node.js (v14 or higher) - Google Gemini API key - TypeScript ## ⚙️ Installation 1. Install dependencies: ```bash npm install ``` 3. Configure environment: Create a `.env` file in the root directory: ```env GEMINI_API_KEY=your_api_key_here ``` 4. Build the project: ```bash npm run build ``` ## 🚀 Using the CLI You can use the storybook generator directly from the command line: ```bash # Using npx (after publishing to npm) npx mcp-storybook-image-generator --api-key your_api_key_here --save-to-desktop # Or run locally node build/cli.js --api-key your_api_key_here --save-to-desktop ``` ### Command Line Options | Option | Description | |--------|-------------| | `--api-key <key>` | Set your Gemini API key | | `--save-to-desktop` | Save generated files to desktop | | `--debug` | Enable debug logging | | `--help` | Show help information | ## 🔧 Configuring Claude Desktop with MCP Server To integrate this server with Claude Desktop: 1. Locate the Claude Desktop Configuration File: - Windows: `%APPDATA%\Claude\claude_desktop_config.json` - macOS: `~/Library/Application Support/Claude/claude_desktop_config.json` - Linux: `~/.config/Claude/claude_desktop_config.json` 2. Add the following configuration: ```json { "mcpServers": { "storybook-generator": { "command": "npx", "args": [ "-y", "mcp-storybook-image-generator@latest", "--api-key", "your_gemini_api_key_here" ], "env": { "SAVE_TO_DESKTOP": "true", "DEBUG": "false" } } } } ``` ## 🚀 Available Tool ### Storybook Image Generator Tool ```json { "name": "generate_storybook_image", "description": "Generates a 3D style cartoon image with a children's story based on the given prompt", "inputSchema": { "type": "object", "properties": { "prompt": { "type": "string", "description": "The prompt describing the storybook scene to generate" }, "fileName": { "type": "string", "description": "Base name for the output files (without extension)" }, "artStyle": { "type": "string", "description": "The art style for the image (default: '3d cartoon')", "enum": ["3d cartoon", "watercolor", "pixel art", "hand drawn", "claymation"] } }, "required": ["prompt", "fileName"] } } ``` ## 📄 Example Usage ### Storybook Generation Examples ```javascript // Generate a storybook with a 3D cartoon style { "name": "generate_storybook_image", "arguments": { "prompt": "A friendly dragon teaching kids how to fly", "fileName": "dragon_flight_lesson", "artStyle": "3d cartoon" } } // Generate a storybook with a watercolor style { "name": "generate_storybook_image", "arguments": { "prompt": "A rabbit and turtle having a tea party in the forest", "fileName": "forest_tea_party", "artStyle": "watercolor" } } // Generate a storybook with pixel art style { "name": "generate_storybook_image", "arguments": { "prompt": "A space adventure with a kid astronaut meeting friendly aliens", "fileName": "space_adventure", "artStyle": "pixel art" } } ``` ## ⚙️ Configuration Options ### Environment Variables | Variable | Description | Default | |----------|-------------|---------| | `GEMINI_API_KEY` | Google Gemini API key for AI generation | (Required) | | `SAVE_TO_DESKTOP` | Force saving to desktop directory | false | | `DEBUG` | Enable verbose debug logging | false | ## 📝 Output Files For each storybook generation request, the server produces: 1. **PNG Image**: The generated illustration matching your prompt in the requested art style 2. **Text File**: The matching children's story in plain text format 3. **HTML Preview**: A combined view showing both the image and story together These files are saved to either: - Your desktop in a folder called "storybook-images" (if `SAVE_TO_DESKTOP=true`) - The server's directory in a folder called "storybook-images" ## 🤝 Contributing Contributions, issues, and feature requests are welcome! Feel free to check issues page. ## 📄 License This project is licensed under the MIT License - see the LICENSE file for details.