AI Picture

You set up and run an MCP server that uses AI-powered image generation for web design workflows. This server connects to an AI model to produce web-ready images based on English prompts, making it easy to generate placeholders, hero images, product mockups, and other visuals directly from your workflow.

How to use

You interact with the AI Picture MCP Server through an MCP client. The server exposes a single primary tool that generates web-optimized images from text prompts. Provide a prompt in English, specify optional width and height, and receive a base64-encoded image you can embed in your app or save to disk. You can run the server locally or access it via an MCP client configuration that launches the server as a stdio process. When you configure your client, you’ll point it at the command that starts the server and supply any required API keys as environment variables.

How to install

Prerequisites: you need Node.js 18+ installed, along with npm (comes with Node.js). Ensure you have a supported shell to run commands.

Option 1: NPX (recommended) — run directly without installation.

npx -y aipic-mcp

Claude Desktop Configuration for NPX (example): use an MCP config that starts the tool with NPX.

{
  "mcpServers": {
    "aipic": {
      "command": "npx",
      "args": ["-y", "aipic-mcp"]
    }
  }
}

Option 2: NPX with API key (recommended) — supply your API key via environment variable.

{
  "mcpServers": {
    "aipic": {
      "command": "npx",
      "args": ["-y", "aipic-mcp"],
      "env": {
        "DASHSCOPE_API_KEY": "sk-your-dashscope-api-key-here"
      }
    }
  }
}

Option 3: Global installation — install the package globally and configure Claude Desktop to run the global binary.

npm install -g aipic-mcp

Claude Desktop Configuration:

{
  "mcpServers": {
    "aipic": {
      "command": "aipic-mcp"
    }
  }
}

Option 4: Local development — clone, install, build, and run locally for contribution or customization.

git clone https://github.com/leonaries/aipic-mcp.git
cd aipic-mcp
npm install
npm run build
npm run dev

Claude Desktop Configuration for local development:

{
  "mcpServers": {
    "aipic": {
      "command": "node",
      "args": ["dist/index.js"],
      "cwd": "/Users/your-username/path/to/aipic-mcp",
      "env": {
        "DASHSCOPE_API_KEY": "sk-your-dashscope-api-key-here"
      }
    }
  }
}

Configuration and API keys

Configure the API key used to access your image-generation service. The server supports setting the key via environment variables for security.

Environment variable example (for all configurations):

DASHSCOPE_API_KEY=sk-your-dashscope-api-key-here

Usage notes

The server exposes one main function to generate images: generate_web_image. You supply a textual prompt in English, an optional width, an optional height, and you can specify a desired save path. The server returns the image data in base64-encoded form suitable for embedding in web pages or saving to a file.

Example prompts to try include a modern minimalist office workspace, an abstract geometric blue/purple background, a product photo of wireless headphones on white, or a hero image of a mountain landscape at sunrise.

API integration details

The server uses Alibaba Cloud DashScope for image generation with an async task model. It targets the flux-schnell model endpoint and handles task polling until the image is ready.

Security and troubleshooting

Use environment variables for API keys to avoid hardcoding sensitive values. Ensure network connectivity to the DashScope endpoint and verify you have sufficient quota. If you encounter timeouts, retry with a simpler prompt or longer timeout settings in your client configuration.

Development and testing

To run in development mode, use the development script. Build for production when ready and run the server to verify end-to-end behavior.

Notes and notes on release

The server is designed for web-design workflows, returning web-optimized images and supporting async processing for reliable generation.

Examples of usage in an MCP client

Ask the server to generate a hero image for a website with a prompt such as: A sleek modern smartphone floating above a city skyline at dusk.

Available tools

generate_web_image

Generates an AI-augmented image optimized for web design use. Accepts prompts, dimensions, and optional API key override.