Satori MCP Server

An MCP (Model Context Protocol) server that generates beautiful images from React components using Satori. Create social cards, blog headers, quotes, and custom images directly through AI assistants like Claude.

Features

• 🎨 Generate images from JSX - Convert React components to PNG images
• 📝 Built-in templates - Social cards, blog headers, and quote designs
• 🔤 Google Fonts support - Access to hundreds of fonts
• 🚀 MCP Protocol - Works seamlessly with Claude Desktop and other MCP clients
• 🛠️ TypeScript - Fully typed!

Installation

Prerequisites

• Node.js 20+
• pnpm (recommended) or npm

Clone and Install

git clone https://github.com/Jellypod-Inc/satori-mcp-server.git
cd satori-mcp-server
pnpm install

Configure with Claude Desktop

To use the hosted version of the MCP server, add the server to your Claude Desktop configuration:

{
  "mcpServers": {
    "satori": {
      "type": "http",
      "url": "https://satori.jellypod.ai/mcp"
    }
  }
}

Development

# Start development server with hot reload
pnpm dev

# Run tests
pnpm test

# Run specific tests
pnpm test:generate-image
pnpm test:generate-image-from-template

# Build for production
pnpm build

# Start production server
pnpm start

Testing

To test the MCP server, use the Model Context Protocol (MCP) inspector: https://modelcontextprotocol.io/legacy/tools/inspector

You can run it via:

pnpm dlx @modelcontextprotocol/inspector

and then run the local MCP server, and connect to the localhost in the inspector.

Environment Variables

You willl need to configure Vercel Blob Storage to save the generated image files. Get this from your Vercel dashboard: https://vercel.com/docs/storage/vercel-blob

export const BLOB_READ_WRITE_TOKEN = process.env.BLOB_READ_WRITE_TOKEN;

Available Tools

1. generate_image

Generate an image from custom JSX content.

Parameters:

• jsx (string, required): JSX content as a string
• width (number, default: 600): Image width in pixels
• height (number, default: 400): Image height in pixels
• outputPath (string, required): Where to save the image
• googleFonts (array, optional): Google Fonts to load

Example:

{
  jsx: '<div style={{background: "linear-gradient(to right, #667eea, #764ba2)", width: "100%", height: "100%", display: "flex", alignItems: "center", justifyContent: "center"}}><h1 style={{color: "white", fontSize: "60px"}}>Hello World</h1></div>',
  width: 1200,
  height: 630,
  outputPath: "output/hello.png",
  googleFonts: [
    { name: "Inter", weight: 700, style: "normal" }
  ]
}

2. generate_from_template

Generate an image using a pre-built template.

Parameters:

• template (string, required): Template name ("social-card", "blog-header", "quote")
• params (object, required): Template-specific parameters
• outputPath (string, required): Where to save the image
• width (number, optional): Override template width
• height (number, optional): Override template height

Example:

{
  template: "social-card",
  params: {
    title: "Announcing Satori MCP Server",
    description: "Generate beautiful images with AI",
    backgroundColor: "#2563eb"
  },
  outputPath: "output/announcement.png"
}

3. list_templates

List all available templates with their descriptions.

No parameters required

Returns a list of templates with their names and descriptions.

Templates

Social Card (1200

... View full README on GitHub