oJo MCP Server
OfficialClick on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@oJo MCP Servercreate a preview link for this HTML: Hello world"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
@ojodotso/mcp-server
A Model Context Protocol server that lets an
AI agent turn HTML into images. Live previews are free and need no account; an
oJo API key adds hosted PNG URLs and reusable templates through the user's own
account. Transport is local stdio; the API boundary is HTTP to
https://api.ojo.so/v1 only.
Quick start — no account needed
Point your MCP client at the package. With no API key the server starts in
preview-only mode: create_preview_link renders HTML into a live,
full-resolution image preview, free and unlimited, with no oJo account.
{
"mcpServers": {
"ojo": {
"command": "npx",
"args": ["-y", "@ojodotso/mcp-server"]
}
}
}claude mcp add ojo -- npx -y @ojodotso/mcp-serverAdding a key
A key unlocks the permanent PNG URL — the thing you can put in an email, a
social card or an API response — plus reusable templates. Create one at
https://ojo.so/dashboard/api and pass it as OJO_API_KEY:
{
"mcpServers": {
"ojo": {
"command": "npx",
"args": ["-y", "@ojodotso/mcp-server"],
"env": { "OJO_API_KEY": "sk_..." }
}
}
}claude mcp add ojo -e OJO_API_KEY=sk_... -- npx -y @ojodotso/mcp-serverWorks the same for Claude Desktop, Cursor, and Claude Code.
Related MCP server: RendShot MCP Server
Tools
Only create_preview_link is registered without an API key; the rest talk to
the oJo API, so advertising them keyless would offer tools that can only fail.
Tool | Purpose | Credit | Needs a key |
| Build a free, full-resolution | — | no |
| Render plain HTML (with inline CSS) to a PNG; returns its public URL. | 1 | yes |
| Render an existing template, optionally overriding variables via | 1 | yes |
| List the templates available to the account. | — | yes |
| Fetch one template's decoded HTML and variable defaults. | — | yes |
| Create a reusable template from plain HTML/Handlebars. | — | yes |
The design loop
Iterate with create_preview_link, then render. It returns an
https://ojo.so/preview#draft=… URL that renders the draft live in the browser
through the same engine as the final PNG, at full resolution. The draft is
gzipped into the URL hash, so it never reaches a server and nothing is stored
— the link is self-contained and shareable with a human reviewer.
Both generate tools also accept inspect: true, which returns a 512px-wide
downscaled thumbnail alongside the URL. That is a confirmation that the render
succeeded, not a design surface — it is too small to judge layout or typography.
Guiding prompt
author_ojo_template — teaches the Handlebars helper catalog, the Template
Variables (schema/defaults) vs Modify Payload (per-render data) model,
viewport conventions, and the preview-first design loop.
Configuration
OJO_API_KEY(optional) — your oJo API key. Without it the server runs in preview-only mode; with it the full tool surface is registered.OJO_API_BASE_URL(optional) — defaults tohttps://api.ojo.so/v1.OJO_WEB_BASE_URL(optional) — the web app that serves/previewforcreate_preview_link. Defaults tohttps://ojo.so; point it at a localhttp://localhost:3000when developing against a self-hosted web app.
Develop
pnpm install
pnpm build
pnpm test
pnpm checkMaintenance
Resources
Unclaimed servers have limited discoverability.
Looking for Admin?
If you are the server author, to access and configure the admin panel.
Tools
Related MCP Servers
- AlicenseAqualityBmaintenanceCapture screenshots, generate PDFs, and render HTML to images via AI agents. Supports batch capture, geo-targeting, async webhooks, and CSS/JS injection.111307MIT
- Flicense-qualityDmaintenanceEnables AI agents to generate images from HTML/CSS, capture URL screenshots, and manage reusable templates through the RendShot API. Provides tools for rendering visual content programmatically within AI workflows.11
- Alicense-qualityCmaintenanceEnables AI to generate images by describing them with HTML using Tailwind CSS and DaisyUI, which are rendered to PNG images.111MIT
- AlicenseAqualityAmaintenanceEnables AI agents to render and screenshot isolated UI components instantly across multiple browsers without a dev server or Storybook.226601MIT
Related MCP Connectors
Generate images, GIFs, and PDFs from HTML, URLs, or templates — from your AI agent.
Image + screenshot API for agents: HTML/CSS to images or PDF, screenshot any URL, verify text.
Screenshots, PDFs and Markdown from any URL or HTML for AI agents, via the SnapForge API
Latest Blog Posts
- Who's Calling? MCP Hosts Are an Identity Blind Spot (And the Spec Knows It)By Om-Shree-0709 on .mcpAgent IdentityOAuth 2.1
- Your AI Chatbot Just Exposed Your CEO's Salary to an InternBy Om-Shree-0709 on .Agent IdentityMCP SecurityOAuth Delegation
- Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)By Om-Shree-0709 on .Agentic AiPrompt InjectionWebAssembly
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/ojodotso/mcp-server'
If you have feedback or need assistance with the MCP directory API, please join our Discord server