// ~/Library/Application Support/Claude/claude_desktop_config.json (macOS)
// %APPDATA%\Claude\claude_desktop_config.json (Windows)

{
  "mcpServers": {
    "pictify": {
      "command": "npx",
      "args": ["-y", "@pictify/mcp-server"],
      "env": {
        "PICTIFY_API_KEY": "pk_live_your_api_key"
      }
    }
  }
}

claude mcp add pictify -- npx -y @pictify/mcp-server

export PICTIFY_API_KEY=pk_live_your_api_key

Create a social media card with the title "Hello World" on a purple gradient background, 1200x630 pixels.

Render my blog post template with title "AI in 2026" and author "Jane Smith".

{
  "mcpServers": {
    "pictify": {
      "command": "npx",
      "args": ["-y", "@pictify/mcp-server"],
      "env": {
        "PICTIFY_API_KEY": "pk_live_...",
        "PICTIFY_BASE_URL": "https://api.pictify.io"
      }
    }
  }
}

import Anthropic from '@anthropic-ai/sdk';
import { Pictify } from '@pictify/sdk';

const anthropic = new Anthropic();
const pictify = new Pictify({ apiKey: process.env.PICTIFY_API_KEY! });

const tools = [
  {
    name: 'create_image',
    description: 'Generate an image from HTML content',
    input_schema: {
      type: 'object',
      properties: {
        html: { type: 'string', description: 'HTML content to render' },
        width: { type: 'number', description: 'Image width in pixels' },
        height: { type: 'number', description: 'Image height in pixels' }
      },
      required: ['html', 'width', 'height']
    }
  }
];

async function handleToolCall(name: string, input: any) {
  if (name === 'create_image') {
    const image = await pictify.renderHtml(input);
    return { url: image.url };
  }
}

async function chat(userMessage: string) {
  const response = await anthropic.messages.create({
    model: 'claude-sonnet-4-20250514',
    max_tokens: 1024,
    tools,
    messages: [{ role: 'user', content: userMessage }]
  });

  // Handle tool calls
  for (const block of response.content) {
    if (block.type === 'tool_use') {
      const result = await handleToolCall(block.name, block.input);
      // Continue conversation with tool result...
    }
  }
}

from langchain.tools import Tool
from langchain.agents import initialize_agent
from pictify import Pictify

pictify = Pictify(api_key='pk_live_...')

def create_image(html: str, width: int = 1200, height: int = 630) -> str:
    """Generate an image from HTML content."""
    result = pictify.render_html(html=html, width=width, height=height)
    return result.url

tools = [
    Tool(
        name="create_image",
        func=create_image,
        description="Generate an image from HTML. Input should be HTML string."
    )
]

agent = initialize_agent(tools, llm, agent="zero-shot-react-description")

{
  name: 'render_blog_card',
  description: 'Render a blog post social card. Use for creating Open Graph images for blog posts. Requires title, description, and author name.'
}

async function handleToolCall(name: string, input: any) {
  try {
    return await executeToolCall(name, input);
  } catch (error) {
    return {
      error: true,
      message: `Failed to ${name}: ${error.message}`
    };
  }
}

if (!input.html || !input.width || !input.height) {
  return { error: true, message: 'Missing required parameters' };
}

if (input.width > 4000 || input.height > 4000) {
  return { error: true, message: 'Dimensions exceed maximum (4000x4000)' };
}

const cache = new Map();

async function createImage(options: RenderHtmlOptions) {
  const cacheKey = JSON.stringify(options);

  if (cache.has(cacheKey)) {
    return cache.get(cacheKey);
  }

  const result = await pictify.renderHtml(options);
  cache.set(cacheKey, result);
  return result;
}