MCP Storybook Image Generator

You can generate beautiful storybook images paired with engaging children’s stories using the Storybook Image Generator MCP server. This server leverages Google Gemini to create matching visuals and narratives, offers instant browser previews, and saves outputs for easy access.

How to use

You run this MCP server from a client that supports MCP integrations. Use a stdio-based local launcher to start the server and pass your API key. Once running, you can request a storybook image and its accompanying story by providing a prompt, a base file name, and an art style. The server will return an image, a text story, and an HTML preview that you can view in your browser.

To start from a client, use the provided MCP command configuration. The server is designed to be invoked via a local command runner, such as npx, and it accepts an API key for Gemini. The output will be saved to your desktop or to the server directory, depending on your settings.

Note that you can also integrate the MCP server with Claude Desktop by adding a configuration that points to the local stdio server. This enables a seamless workflow where you trigger image generation and story creation directly from Claude Desktop.

How to install

Prerequisites you need before starting are: Node.js v14 or higher, a Google Gemini API key, and TypeScript. You also use npm as the package manager.

Step by step commands you will run to prepare the server locally:

npm install

# Configure environment
# Create a .env file in the root directory with your Gemini API key
GEMINI_API_KEY=your_api_key_here

# Build the project for production use
npm run build

# Start or prepare to run the CLI usage as described in the usage section

actions described in usage will depend on your client setup and start command.

Claude Desktop integration and configuration

You can configure Claude Desktop to invoke the Storybook Image Generator MCP server by adding a server entry that runs via npx and passes your API key. The example below shows how to wire this up so Claude Desktop can request image generation and story creation through the MCP channel.

{
  "mcpServers": {
    "storybook_generator": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-storybook-image-generator@latest",
        "--api-key",
        "YOUR_GEMINI_API_KEY"
      ],
      "env": {
        "SAVE_TO_DESKTOP": "true",
        "DEBUG": "false"
      }
    }
  }
}

Usage examples and capabilities

The server supports generating an image in a chosen art style and creating a matching children’s story. The available art styles include 3D cartoon, watercolor, pixel art, hand drawn, and claymation. After generation, you receive:

• A PNG image in the selected style
• A plain text file with the matching story
• An HTML preview that combines both the image and story for quick review.

Here are common prompts you can use to generate content (examples shown as guidance):

• A friendly dragon teaching kids how to fly in a 3D cartoon style
• A rabbit and turtle tea party in the forest in watercolor style
• A space adventure with a kid astronaut and friendly aliens in pixel art style

Output locations and files

For each generation request, you obtain:

1. PNG image in the chosen art style
2. Text file containing the story in plain text
3. HTML preview combining both elements These files are saved either to your desktop in a folder named storybook-images or in the server directory under storybook-images, depending on your configuration.

Notes and tips

Create and store outputs in an organized manner by using a consistent file naming scheme. Use the provided fileName base for both the image and story files to keep related assets together.

If you need debugging, enable the DEBUG flag to get verbose logs during generation and troubleshooting.

Available tools

generate_storybook_image

Generates a 3D style cartoon image with a children’s story based on the given prompt