Skip to main content

Cloudflare Flux Image Generation with Claude Desktop

Table of Contents​

Overview​

  • This guide demonstrates the steps to install and configure necessary components to deploy an MCP Server as a remote Cloudflare worker and connect to it using the Claude Desktop MCP client.
  • The first phase will deploy a hello world template
  • The second phase will modify the hello world template to configure a Flux image generation MCP server.

For more information about Model Context Protocol and Cloudflare Workers:​

Phase 1 - Create a Hello World MCP Server​

1. Prerequisites​

2. Install Wrangler and Authenticate with OAuth​

Note: Use cmd.exe (command prompt) instead of PowerShell for these installations

A. Install Wrangler:​

npm install wrangler --save-dev

B. Verify Wrangler Version​

npx wrangler --version

C. Authenticate Session with Wrangler and OAuth​

npx wrangler login

This will open a browser window for you to authenticate with Cloudflare.

3. Create a New Worker​

A. Initialize a new project:​

npx create-cloudflare@latest my-mcp-worker

B. Choose Hello World Worker​

Choose JavaScript or TypeScript depending on your preference. The image generation example server uses TypeScript.

4. Install the MCP Tooling​

Documentation: workers-mcp

Note: If you start a new terminal session, you must run npx wrangler login to re-authenticate

A. Move to the Workers Directory​

cd my-mcp-worker

B. Install workers-mcp​

npm install workers-mcp

The workers-mcp package provides the tools needed to run your Worker as an MCP server.

5. Setup workers-mcp​

npx workers-mcp setup

If something goes wrong, run:

npx workers-mcp help

The help menu will display the manual setup instructions.

Phase 2 - Customize Hello with Your Custom MCP​

1. Adding image generation to Claude​

Above, we generated a "hello world", but now let's modify it and enable Claude Desktop to generate an image, using Workers AI. Once you create your Worker and install the MCP tooling (workers-mcp), you'll get a workers-mcp template set up for you. This method illustrates a clean and repeatable process to develop your workflow.

Cloudflare MCP Server Examples​

A. Open index.ts and Replace Contents​

Replace the boilerplate hello world script with the update below:

import { WorkerEntrypoint } from 'cloudflare:workers'
import { ProxyToSelf } from 'workers-mcp'

export default class ClaudeImagegen extends WorkerEntrypoint<Env> {
  /**
   * Generate an image using the flux-1-schnell model.
   * @param prompt {string} A text description of the image you want to generate.
   * @param steps {number} The number of diffusion steps; higher values can improve quality but take longer.
   */
  async generateImage(prompt: string, steps: number): Promise<string> {
    const response = await this.env.AI.run('@cf/black-forest-labs/flux-1-schnell', {
      prompt,
      steps,
    });
    
    // Convert from base64 string
    const binaryString = atob(response.image);
    
    // Create byte representation
    const img = Uint8Array.from(binaryString, (m) => m.codePointAt(0)!);
    
    return new Response(img, {
      headers: {
        'Content-Type': 'image/jpeg',
      },
    });
  }

  /**
   * @ignore
   */
  async fetch(request: Request): Promise<Response> {
    return new ProxyToSelf(this).fetch(request)
  }
}

2. Deploy the MCP Server​

Update your wrangler.toml with the appropriate configuration then deploy your Worker:

npx wrangler deploy

Your MCP server is now deployed globally and all your public class methods are exposed as MCP tools that AI assistants can now interact with.

3. Claude Desktop Config​

The image generation example updates the Claude Desktop config automatically. Most other MCP servers require manual configuration in the claude_desktop_config.json file:

  • Windows: %APPDATA%\Claude\claude_desktop_config.json
  • Mac: ~/Library/Application Support/Claude/claude_desktop_config.json

Example configuration:

{
  "mcpServers": {
    "image-gen": {
      "command": "[PATH_TO_YOUR_PROJECT]\\node_modules\\.bin\\workers-mcp.CMD",
      "args": [
        "run",
        "image-gen",
        "https://your-worker-name.your_workers_domain.workers.dev",
        "[PATH_TO_YOUR_PROJECT]"
      ],
      "env": {}
    }
  }
}

Note: Replace [PATH_TO_YOUR_PROJECT] with your actual project path, e.g., C:\\Users\\username\\my-mcp-worker

Once the Claude Desktop config file has been updated, you'll see a hammer icon with a count number of tools available in the Claude Desktop interface.

4. Example Prompt and Result​

Try this prompt with your configured Claude Desktop:

Hey! Can you create an image of a lava lamp wall that lives in San Francisco?

Claude will use parameters similar to:

{ 
  "steps": 8, 
  "prompt": "A stylish wall covered in colorful, glowing lava lamps, arranged artistically against a modern San Francisco backdrop. Victorian architecture visible through windows, Golden Gate Bridge in distance. Warm, ambient lighting from the lava lamps creating a psychedelic atmosphere. Retro-futuristic interior design." 
}

The result will be an image with Claude's description similar to:

I've generated an image of a collection of vibrant lava lamps against a quintessential San Francisco backdrop. The lamps feature a mix of colors - bright reds, blues, greens, and pinks - creating a psychedelic display. Through the window, you can see the iconic Golden Gate Bridge at sunset, and there's a glimpse of classic Victorian architecture, known as "Painted Ladies." The contrast between the glowing lamps and the city view creates an interesting blend of retro and modern aesthetics. Would you like me to try another version with a different arrangement or color scheme?

Example Image Generation

Troubleshooting​

If your Claude Desktop client doesn't connect automatically:​

  • Try authenticating with npx wrangler login
  • Check the Claude Desktop configuration file (see above)
  • Ensure your Cloudflare Worker is deployed successfully
  • Check for any error messages in the Claude Desktop logs
  • Verify network connectivity to your Cloudflare Worker endpoint

References​