trackmcp
Back to directory
falahgs

MCP-Storybook-Image-Generator

View on GitHub
3 stars TypeScriptOthers Updated Aug 12, 2025

Documentation

MCP Storybook Image Generator

A professional-grade server that generates beautiful storybook images with matching children's stories using Google's Gemini AI.

🎬 Demo

Storybook Generator 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

OptionDescription
`--api-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:

    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

    VariableDescriptionDefault
    `GEMINI_API_KEY`Google Gemini API key for AI generation(Required)
    `SAVE_TO_DESKTOP`Force saving to desktop directoryfalse
    `DEBUG`Enable verbose debug loggingfalse

    📝 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.

    Frequently asked questions

    What is MCP-Storybook-Image-Generator?

    MCP-Storybook-Image-Generator is a Model Context Protocol (MCP) server listed in the TrackMCP directory.

    How do I install MCP-Storybook-Image-Generator?

    Open the GitHub repository and follow its README. Most MCP servers are added to your client's MCP config, then called by your agent.

    Is MCP-Storybook-Image-Generator open source?

    Yes — it is hosted on GitHub at https://github.com/falahgs/MCP-Storybook-Image-Generator and has 3 stars.

    Related MCP tools

    Run your own MCP server? See who uses it and what to fix.

    Measure it with TrackMCP