OG Image Generator
No credit card required
OG Image Generator
No credit card required
OG Image Generator is a tool that lets you dynamically create OG images from your HTML templates via an API. The tool is flexible, allowing you to use the default template or create fully custom templates.
Daniil PoletaevActor Metrics
8 Monthly users
5.0 / 5 (1)
2 bookmarks
>99% runs succeeded
Created in Jan 2025
Modified 21 days ago
You can access the OG Image Generator programmatically from your own applications by using the Apify API. You can also choose the language preference from below. To use the Apify API, you’ll need an Apify account and your API token, found in Integrations settings in Apify Console.
1# Start Server-Sent Events (SSE) session and keep it running
2curl "https://actors-mcp-server.apify.actor/sse?token=<YOUR_API_TOKEN>&actors=daniil.poletaev/og-image-generator"
3
4# Session id example output:
5# event: endpoint
6# data: /message?sessionId=9d820491-38d4-4c7d-bb6a-3b7dc542f1faUsing OG Image Generator via Model Context Protocol (MCP) server
MCP server lets you use OG Image Generator within your AI workflows. Send API requests to trigger actions and receive real-time results. Take the received sessionId and use it to communicate with the MCP server. The message starts the OG Image Generator Actor with the provided input.
1curl -X POST "https://actors-mcp-server.apify.actor/message?token=<YOUR_API_TOKEN>&session_id=<SESSION_ID>" -H "Content-Type: application/json" -d '{
2 "jsonrpc": "2.0",
3 "id": 1,
4 "method": "tools/call",
5 "params": {
6 "arguments": {
7 "html": "<!DOCTYPE html>\\n<html lang=\\"en\\">\\n<head>\\n <meta charset=\\"UTF-8\\">\\n <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\">\\n <script src=\\"https://cdn.tailwindcss.com\\"></script>\\n</head>\\n<body class=\\"bg-gray-100 text-gray-900 flex items-center justify-center h-screen\\">\\n\\n <!-- OG Image Container -->\\n <div class=\\"relative bg-white w-[1200px] h-[630px] rounded-lg shadow-xl border border-gray-200 overflow-hidden\\">\\n \\n <!-- Background Accent -->\\n <div class=\\"absolute inset-0 bg-gradient-to-r from-indigo-100 via-pink-100 to-yellow-100 opacity-50\\"></div>\\n\\n <!-- Logo -->\\n <div class=\\"absolute bottom-6 left-6\\">\\n <img src=\\"{{logoUrl}}\\" alt=\\"Blog Logo\\" class=\\"h-10\\">\\n </div>\\n\\n <!-- Content Wrapper -->\\n <div class=\\"relative flex flex-col h-full p-16\\">\\n \\n <!-- Blog Category -->\\n <div class=\\"text-base uppercase tracking-wider text-indigo-500 font-semibold mb-6\\">{{category}}</div>\\n \\n <!-- Blog Title -->\\n <h1 class=\\"text-6xl font-bold leading-tight text-gray-800 mb-8\\">{{title}}</h1>\\n \\n <!-- Author and Date -->\\n <div class=\\"flex items-center space-x-6 text-gray-600 text-xl\\">\\n <div class=\\"flex items-center space-x-3\\">\\n <img class=\\"w-12 h-12 rounded-full\\" src=\\"{{authorImage}}\\" alt=\\"{{author}}\\">\\n <span>{{author}}</span>\\n </div>\\n <span>•</span>\\n <span>{{date}}</span>\\n </div>\\n </div>\\n </div>\\n\\n</body>\\n</html>\\n",
8 "templateData": {
9 "category": "Technology",
10 "title": "How to create dynamic OG title for your web",
11 "logoUrl": "https://w7.pngwing.com/pngs/243/698/png-transparent-apify-logo-tech-companies.png",
12 "date": "January 3, 2025",
13 "author": "Daniil Poletaev",
14 "authorImage": "https://images.apifyusercontent.com/rO00zibE4A243KKKW3pwsdT-IXjgOFWuA2s4RJV_7VM/rs:fill:70:70/aHR0cHM6Ly9saDMuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2EvQUNnOG9jSWRPZ1QxMHAxblVSbGhKZUswSlZUdXpLZzJmVWN6MkEtNGZka1hwVWRSX1NtOVFSZw"
15 }
16},
17 "name": "daniil.poletaev/og-image-generator"
18 }
19}'The response should be: Accepted. You should received response via SSE (JSON) as:
1event: message
2data: {
3 "result": {
4 "content": [
5 {
6 "type": "text",
7 "text": "ACTOR_RESPONSE"
8 }
9 ]
10 }
11}Configure local MCP Server via standard input/output for OG Image Generator
You can connect to the MCP Server using clients like ClaudeDesktop and LibreChat or build your own. The server can run both locally and remotely, giving you full flexibility. Set up the server in the client configuration as follows:
1{
2 "mcpServers": {
3 "actors-mcp-server": {
4 "command": "npx",
5 "args": [
6 "-y",
7 "@apify/actors-mcp-server",
8 "--actors",
9 "daniil.poletaev/og-image-generator"
10 ],
11 "env": {
12 "APIFY_TOKEN": "<YOUR_API_TOKEN>"
13 }
14 }
15 }
16}You can further access the MCP client through the Tester MCP Client, a chat user interface to interact with the server.
To get started, check out the documentation and example clients. If you are interested in learning more about our MCP server, check out our blog post.
