{
  "markdown": "# @pictify/mcp-server\n\n[![npm version](https://img.shields.io/npm/v/@pictify/mcp-server.svg)](https://www.npmjs.com/package/@pictify/mcp-server)\n[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)\n\nAn [MCP (Model Context Protocol)](https://modelcontextprotocol.io) server for [Pictify](https://pictify.io) — generate images, GIFs, videos, and PDFs from AI agents like Claude, Cursor, and Windsurf.\n\n**One-line install. No code required.** Ask your AI assistant to create OG images, social media cards, screenshots, animated GIFs, PDF invoices, certificates, and more — all from natural language.\n\n### What can it do?\n\n- **Generate images** from HTML/CSS, URLs, or reusable templates (OG images, Twitter cards, banners, product screenshots)\n- **Create animated GIFs** from CSS animations or by recording live web pages\n- **Render videos** from templates, including agent-authored Remotion scenes\n- **Render PDFs** from templates — invoices, certificates, reports, shipping labels\n- **Batch generate** up to 100 personalized images in one request (team badges, event passes, product catalogs)\n- **Template system** with 50+ expression functions for dynamic content (conditionals, string manipulation, date formatting)\n\nWorks with Claude (claude.ai + Claude Code + Claude Desktop), Cursor, Windsurf, and any MCP-compatible client.\n\n## Quick Start\n\n### Prerequisites\n\nGet your API key:\n\n1. Sign up or log in at [pictify.io](https://pictify.io)\n2. Go to [API Tokens](https://pictify.io/dashboard/api-tokens)\n3. Create a new token and copy it\n\n### Claude.ai (Web)\n\nUse the hosted remote server — no install needed:\n\n1. Go to [claude.ai](https://claude.ai) > **Settings** > **Connectors**\n2. Click **Add custom connector**\n3. URL: `https://mcp.pictify.io`\n4. Click **Advanced Settings**\n5. **Client ID**: `pictify`\n6. **Client Secret**: paste your API token\n7. Click **Add**\n\n### Claude Code\n\n```bash\nclaude mcp add pictify -e PICTIFY_API_KEY=your_api_key -- npx -y @pictify/mcp-server\n```\n\n### Claude Desktop\n\nAdd to your config file:\n\n- macOS: `~/Library/Application Support/Claude/claude_desktop_config.json`\n- Windows: `%APPDATA%\\Claude\\claude_desktop_config.json`\n- Linux: `~/.config/Claude/claude_desktop_config.json`\n\n```json\n{\n  \"mcpServers\": {\n    \"pictify\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"@pictify/mcp-server\"],\n      \"env\": {\n        \"PICTIFY_API_KEY\": \"your_api_key\"\n      }\n    }\n  }\n}\n```\n\nRestart Claude Desktop after saving.\n\n### Cursor\n\nAdd to Cursor's MCP settings (Settings > MCP Servers):\n\n```json\n{\n  \"mcpServers\": {\n    \"pictify\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"@pictify/mcp-server\"],\n      \"env\": {\n        \"PICTIFY_API_KEY\": \"your_api_key\"\n      }\n    }\n  }\n}\n```\n\n### Windsurf\n\nAdd to Windsurf's MCP settings:\n\n```json\n{\n  \"mcpServers\": {\n    \"pictify\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"@pictify/mcp-server\"],\n      \"env\": {\n        \"PICTIFY_API_KEY\": \"your_api_key\"\n      }\n    }\n  }\n}\n```\n\n## Examples\n\nTry these prompts after connecting:\n\n**Create a social media card:**\n> \"Create a Twitter card image for my blog post titled 'Getting Started with MCP' with a blue gradient background, 1200x630.\"\n\n**Screenshot a website:**\n> \"Take a screenshot of stripe.com at 1440x900.\"\n\n**Render a template:**\n> \"List my templates and render the blog-header template with title 'Hello World'.\"\n\n**Batch generate images:**\n> \"Use my team-badge template to generate images for these 10 team members: ...\"\n\n**Create a PDF invoice:**\n> \"Render my invoice template as a PDF with company name 'Acme Inc', amount '$1,500', and date 'March 2026'.\"\n\n## Available Tools\n\n### Image Generation\n\n| Tool | Description |\n|------|-------------|\n| `pictify_create_image` | Generate an image from HTML/CSS, a URL screenshot, or a template |\n| `pictify_create_canvas_image` | Generate an image from FabricJS canvas JSON data |\n| `pictify_list_images` | List previously generated images |\n| `pictify_get_image` | Get details of a specific image by ID |\n\n### GIF Creation\n\n| Tool | Description |\n|------|-------------|\n| `pictify_create_gif` | Create animated GIF from HTML with CSS animations |\n| `pictify_capture_gif` | Record a GIF from a live web page over time |\n| `pictify_list_gifs` | List previously generated GIFs |\n| `pictify_get_gif` | Get details of a specific GIF by ID |\n\n### PDF Generation\n\n| Tool | Description |\n|------|-------------|\n| `pictify_render_pdf` | Generate single-page PDF from a template |\n| `pictify_render_multi_page_pdf` | Generate multi-page PDF from a template |\n| `pictify_list_pdf_presets` | List available PDF page size presets |\n\n### Template Management\n\n| Tool | Description |\n|------|-------------|\n| `pictify_list_templates` | List saved templates with filtering and pagination |\n| `pictify_get_template` | Get template details |\n| `pictify_get_template_variables` | Get template variable definitions and types |\n| `pictify_render_template` | Render a template with variables (supports layout variants) |\n| `pictify_create_template` | Create a new template (HTML or FabricJS) |\n| `pictify_update_template` | Update an existing template |\n| `pictify_delete_template` | Delete a template |\n\n### Batch Operations\n\n| Tool | Description |\n|------|-------------|\n| `pictify_batch_render` | Start batch render job (up to 100 items, async) |\n| `pictify_get_batch_results` | Check batch job status and get result URLs |\n| `pictify_cancel_batch` | Cancel a running batch job |\n\n## Configuration\n\n| Variable | Description | Default |\n|----------|-------------|---------|\n| `PICTIFY_API_KEY` | Your Pictify API key (required for stdio mode) | — |\n| `PICTIFY_BASE_URL` | Custom API base URL | `https://api.pictify.io` |\n| `PICTIFY_DEBUG` | Enable verbose logging to stderr | `false` |\n| `PICTIFY_MCP_SOURCE` | Slug identifying where this MCP server was installed from (e.g. `mcp.so`, `glama`, `smithery`, `claude_desktop_gallery`, `github`). Sent as `X-Pictify-MCP-Source` on every API call so Pictify can attribute installs by directory. | `unknown` |\n\n### Install attribution\n\nWhen you submit `@pictify/mcp-server` to an MCP directory, set\n`PICTIFY_MCP_SOURCE` in the install snippet so we can attribute signups\nto that listing. Example for the mcp.so directory entry:\n\n```json\n{\n  \"mcpServers\": {\n    \"pictify\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"@pictify/mcp-server\"],\n      \"env\": {\n        \"PICTIFY_API_KEY\": \"your_api_key\",\n        \"PICTIFY_MCP_SOURCE\": \"mcp.so\"\n      }\n    }\n  }\n}\n```\n\nFor the hosted remote (`https://mcp.pictify.io`), pass the slug as a\nquery param on the connector URL instead — the server persists it on\nthe OAuth session:\n\n```\nhttps://mcp.pictify.io?source=mcp.so\n```\n\nAccepted slugs: lowercase letters, digits, `.`, `-`, `_`, up to 64\ncharacters. Anything else is dropped to `unknown`.\n\n## Development\n\n```bash\ngit clone https://github.com/pictify-io/pictify-mcp.git\ncd pictify-mcp\nnpm install\nnpm run build\n```\n\nTest with MCP Inspector:\n\n```bash\nPICTIFY_API_KEY=your_key npm run inspector\n```\n\n## License\n\nMIT\n",
  "bytes": 7045,
  "sha": "40283697aace99f802b93757fd140a83eaa4f5496e9064ac6c8ab2d2ce351785",
  "repo_slug": "pictify-io/mcp",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/mcp_io_github_pictify_io_mcp_fb384d7c/readme"
}