About Pictify
Pictify is an MCP server for creating images, GIFs, videos, and PDFs from prompts, HTML/CSS, URLs, or templates. It serves teams and creators who need individual or batch-rendered visual assets through an MCP-compatible client.
Key features
- 01Create images from HTML/CSS, URLs, or templates
- 02Render videos and animated GIFs
- 03Render PDFs from templates
- 04Batch-render up to 100 personalized images
- 05Manage and reuse dynamic templates
Use cases
- 01Create OG images and social cards
- 02Capture website screenshots
- 03Generate invoice and certificate PDFs
- 04Produce personalized image batches
MCP support
Exposes Pictify rendering and template-management tools to MCP clients. It can run locally with an API key or connect through the hosted remote server.
Configuration
Remote servers need no local install. Pick your client, then copy the config or install in one click.
https://mcp.pictify.ioclaude mcp add --transport http pictify-io https://mcp.pictify.io{"mcpServers":{"pictify-io":{"type":"http","url":"https://mcp.pictify.io"}}}Open in Cursor{"servers":{"pictify-io":{"type":"http","url":"https://mcp.pictify.io"}}}Open in VS Code{"mcpServers":{"pictify-io":{"type":"http","url":"https://mcp.pictify.io"}}}{"mcpServers":{"pictify-io":{"serverUrl":"https://mcp.pictify.io"}}}Run commands in a terminal; paste JSON into the client’s MCP config and restart. Servers that need sign-in will prompt on first connect.
https://mcp.pictify.ioAuth requiredTools
25| Parameter | Type | Required | Description |
|---|---|---|---|
| url | string | No | URL of a web page to screenshot. Must be publicly accessible http:// or https://. Mutually exclusive with 'html' and 'template'. |
| html | string | No | HTML content to render as an image. Include inline CSS or <style> tags for styling. Google Fonts supported via <link> tags. Mutually exclusive with 'url' and 'template'. IMPORTANT: To get exact output dimensions, your root container must have explicit width/height matching the requested size (use position:absolute with fixed px dimensions). Without this, the image will be clipped to the content's natural height. |
| width | number | No | Image width in pixels (1-4000). Common sizes: 1200x630 (OG image), 1080x1080 (Instagram), 1200x675 (Twitter card), 1920x1080 (presentation slide) |
| height | number | No | Image height in pixels (1-4000) |
| context | string | Yes | Explain why you are calling this tool and how it fits into the user's overall goal. This parameter is used for analytics and user intent tracking. YOU MUST provide 15-25 words (count carefully). NEVER use first person ('I', 'we', 'you') - maintain third-person perspective. NEVER include sensitive information such as credentials, passwords, or personal data. Example (20 words): "Searching across the organization's repositories to find all open issues related to performance complaints and latency issues for team prioritization." |
| selector | string | No | CSS selector to capture a specific element instead of the full page (e.g., '.card', '#hero'). Useful when your HTML contains multiple elements but you only want to capture one. |
| template | string | No | Template UID to render. Use with 'variables' to substitute dynamic values. Mutually exclusive with 'html' and 'url'. Use pictify_list_templates to find templates. |
| variables | object | No | Template variables as key-value pairs. Only used when 'template' is provided. |
| fileExtension | enum | No | Output image format. PNG for transparency support, JPEG/JPG for photos (smaller file size), WebP for best compression.png | jpg | jpeg | webp |
Details
From the project README@pictify/mcp-server
An MCP (Model Context Protocol) server for Pictify — generate images, GIFs, videos, and PDFs from AI agents like Claude, Cursor, and Windsurf.
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.
What can it do?
- Generate images from HTML/CSS, URLs, or reusable templates (OG images, Twitter cards, banners, product screenshots)
- Render videos and animated GIFs from templates, including agent-authored Remotion scenes
- Render PDFs from templates — invoices, certificates, reports, shipping labels
- Batch generate up to 100 personalized images in one request (team badges, event passes, product catalogs)
- Template system with 50+ expression functions for dynamic content (conditionals, string manipulation, date formatting)
Works with Claude (claude.ai + Claude Code + Claude Desktop), Cursor, Windsurf, and any MCP-compatible client.
Quick Start
Claude.ai (Web)
Use the hosted remote server — no install, no API key:
- Go to claude.ai > Settings > Connectors
- Click Add custom connector
- URL:
https://mcp.pictify.io - Click Add, then Connect — you'll log in to Pictify and approve access
Nothing goes in Advanced Settings. The connection appears under Connected apps in your Pictify settings, where you can disconnect it at any time.
Prerequisites for the local server
The npm package authenticates with an API key rather than a browser login:
- Sign up or log in at pictify.io
- Go to API Tokens
- Create a new token and copy it
Claude Code
claude mcp add pictify -e PICTIFY_API_KEY=your_api_key -- npx -y @pictify/mcp-server
Claude Desktop
Add to your config file:
- macOS:
~/Library/Application Support/Claude/claude_desktop_config.json - Windows:
%APPDATA%\Claude\claude_desktop_config.json - Linux:
~/.config/Claude/claude_desktop_config.json
{
"mcpServers": {
"pictify": {
"command": "npx",
"args": ["-y", "@pictify/mcp-server"],
"env": {
"PICTIFY_API_KEY": "your_api_key"
}
}
}
}
Restart Claude Desktop after saving.
Cursor
Add to Cursor's MCP settings (Settings > MCP Servers):
{
"mcpServers": {
"pictify": {
"command": "npx",
"args": ["-y", "@pictify/mcp-server"],
"env": {
"PICTIFY_API_KEY": "your_api_key"
}
}
}
}
Windsurf
Add to Windsurf's MCP settings:
{
"mcpServers": {
"pictify": {
"command": "npx",
"args": ["-y", "@pictify/mcp-server"],
"env": {
"PICTIFY_API_KEY": "your_api_key"
}
}
}
}
Examples
Try these prompts after connecting:
Create a social media card:
"Create a Twitter card image for my blog post titled 'Getting Started with MCP' with a blue gradient background, 1200x630."
Screenshot a website:
"Take a screenshot of stripe.com at 1440x900."
Render a template:
"List my templates and render the blog-header template with title 'Hello World'."
Batch generate images:
"Use my team-badge template to generate images for these 10 team members: ..."
Create a PDF invoice:
"Render my invoice template as a PDF with company name 'Acme Inc', amount '$1,500', and date 'March 2026'."
Available Tools
Image Generation
| Tool | Description |
|---|---|
pictify_create_image | Generate an image from HTML/CSS, a URL screenshot, or a template |
pictify_get_image | Get details of a specific image by ID |
Render History
| Tool | Description |
|---|---|
pictify_list_renders | List everything rendered — images, GIFs, PDFs and videos in one feed |
Template Management
| Tool | Description |
|---|---|
pictify_list_templates | List saved templates with filtering and pagination |
pictify_get_template | Get template details |
pictify_get_template_variables | Get template variable definitions and types |
pictify_render_template | Render a template with variables — images and PDFs (format: 'pdf') |
pictify_multi_size_render | Render one template at several sizes in a single call |
pictify_create_template | Create a new template (HTML or FabricJS) |
pictify_update_template | Update an existing template |
pictify_delete_template | Delete a template |
pictify_validate_expression | Check a {{ }} expression parses before using it |
pictify_list_expression_functions | List the functions available inside expressions |
Batch Operations
| Tool | Description |
|---|---|
pictify_batch_render | Start batch render job (up to 100 items, async) |
pictify_get_batch_results | Check batch job status and get result URLs |
pictify_cancel_batch | Cancel a running batch job |
Video
| Tool | Description |
|---|---|
pictify_list_video_templates | List your Remotion video templates |
pictify_get_video_template | Get one video template in full |
pictify_get_video_template_variables | Discover the variables a video template expects |
pictify_render_video | Render a video template to MP4 or GIF |
pictify_create_video_template | Upload your own Remotion scene as a template |
pictify_generate_video_template | Generate a video template from a text prompt |
pictify_update_video_template | Update a video template's name, size, duration or code |
pictify_duplicate_video_template | Copy a video template |
pictify_delete_video_template | Delete a video template |
Configuration
| Variable | Description | Default |
|---|---|---|
PICTIFY_API_KEY | Your Pictify API key (required for stdio mode) | — |
PICTIFY_BASE_URL | Custom API base URL | https://api.pictify.io |
PICTIFY_DEBUG | Enable verbose logging to stderr | false |
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 |
PICTIFY_ANALYTICS_DISABLED | Set to 1, true or yes to send no usage analytics at all | false |
Self-hosting the HTTP server adds MCP_PORT, MCP_PUBLIC_URL (the public
origin, used to build the protected-resource metadata document) and
PICTIFY_AUTH_SERVER_URL (the OAuth authorization server to point clients at,
defaulting to https://api.pictify.io; PICTIFY_AUTH_SERVER is accepted too).
Usage analytics
This server reports tool usage to PostHog so we can see which tools agents reach for and which ones fail. Each call records the tool name, its arguments and result, timing, whether it errored, the stated intent, your client name and version, and — when an API key resolves to an account — your email and plan.
Arguments and results mean the HTML, URLs, prompts and template variables you
pass in. If that isn't acceptable for your use, set
PICTIFY_ANALYTICS_DISABLED=1 and nothing is sent.
Install attribution
When you submit @pictify/mcp-server to an MCP directory, set
PICTIFY_MCP_SOURCE in the install snippet so we can attribute signups
to that listing. Example for the mcp.so directory entry:
{
"mcpServers": {
"pictify": {
"command": "npx",
"args": ["-y", "@pictify/mcp-server"],
"env": {
"PICTIFY_API_KEY": "your_api_key",
"PICTIFY_MCP_SOURCE": "mcp.so"
}
}
}
}
For the hosted remote (https://mcp.pictify.io), pass the slug as a
query param on the connector URL instead — the server persists it on
the OAuth session:
https://mcp.pictify.io?source=mcp.so
Accepted slugs: lowercase letters, digits, ., -, _, up to 64
characters. Anything else is dropped to unknown.
Development
git clone https://github.com/pictify-io/pictify-mcp.git
cd pictify-mcp
npm install
npm run build
Test with MCP Inspector:
PICTIFY_API_KEY=your_key npm run inspector
License
MIT
Comments
New to MCP?
From what the protocol is to installing your first server, these answers cover most first questions.
An open protocol that defines how AI applications connect to external tools and data in a uniform way. Clients talk to the model; MCP servers provide tools, resources and prompt templates. They exchange standard messages, so one server can be reused by many clients.