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 checkAvailable Tools
1 toolcreate_preview_linkCreate preview linkA
Render HTML/Handlebars into a live, full-resolution image preview — free, unlimited, and with no oJo account. Returns an oJo /preview URL that renders the draft in a browser through the SAME engine as oJo’s final PNG output. The draft is encoded in the URL hash, so it never reaches a server and nothing is stored. Open it and screenshot it, or hand the link to a human for review. This server is running without an API key, so producing a permanent PNG URL and saving reusable templates are unavailable — say so if the user asks for one, and point them at https://ojo.so/dashboard/api.
| Name | Required | Description | Default |
|---|---|---|---|
| html | Yes | Plain HTML/Handlebars to preview, using {{variable}} placeholders. Do NOT base64-encode it. | |
| variables | No | Modify Payload: values to fill the placeholders for this preview render. | |
| viewportWidth | No | Viewport width in pixels (default 1280). | |
| viewportHeight | No | Viewport height in pixels (default 800). |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description carries the full burden and excels: it discloses that the draft is encoded in the URL hash, never reaches a server, nothing is stored, and the server lacks an API key (so permanent PNG URLs and template saves are unavailable). This is exemplary transparency beyond what any annotations would provide.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a bit long (five sentences) but every sentence earns its place, covering mode, output, privacy, and limitations. It is front-loaded with the core purpose and returns. It could be tightened slightly but remains readable and efficient.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Despite no output schema, the description fully explains the return value (a `/preview` URL), the behavior (renders in the same engine), privacy (hash encoding), and available actions (open/screenshot/share). It also addresses the API key limitation and provides next steps, making it complete for an agent to decide and invoke.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so the baseline is 3. The description does not add significant parameter-level meaning beyond what the schema already states (e.g., the HTML format and viewport defaults are already in the schema). It adds context about the URL hash encoding but not about any parameter specifics.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description uses a specific verb ('Render') and resource ('HTML/Handlebars into a live, full-resolution image preview'), and clearly states it returns an oJo `/preview` URL. It distinguishes itself from the final PNG output by emphasizing it uses the same engine but is only a preview.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides clear context: it is for previewing and sharing for review, not for permanent PNG generation. It also explicitly instructs to inform users when permanent output is unavailable and to point them to the dashboard. However, it does not explicitly name alternatives or state when not to use this tool, which keeps it just below a 5.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
TDQS
With only a single tool, there is no possibility of confusion or overlap. The tool's purpose is clearly defined and distinct.
The tool name 'create_preview_link' follows a clear verb_noun pattern. With only one tool, there are no inconsistencies to evaluate.
One tool is too few for the apparent scope of an oJo integration, especially as the description references additional features (permanent PNG, template saving) that are unavailable. The toolset feels thin and limited.
The tool covers live preview creation, but lacks operations for permanent image generation and template management, which are part of the broader oJo domain. These gaps require agents to work around missing functionality.
Maintenance
Resources
Unclaimed servers have limited discoverability.
Looking for Admin?
If you are the server author, to access and configure the admin panel.
Related MCP Connectors
Generate images, GIFs, and PDFs from HTML, URLs, or templates — from your AI agent.
Screenshots, PDFs and Markdown from any URL or HTML for AI agents, via the SnapForge API
Give agents instant OG image generation, social metadata audits, and rendering guidance.
Instant web publishing for AI agents. POST HTML, get a live URL. No account needed.
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.11907MIT
- FlicenseNot gradedqualityDmaintenanceEnables 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.14
- AlicenseNot gradedqualityDmaintenanceEnables AI to generate images by describing them with HTML using Tailwind CSS and DaisyUI, which are rendered to PNG images.161MIT
- AlicenseAqualityAmaintenanceEnables AI agents to render and screenshot isolated UI components instantly across multiple browsers without a dev server or Storybook.226601MIT
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