logoImejis.io

Generate Images in Cursor with MCP

imejis

imejis

@Imejis_io

Generate Images in Cursor with MCP

To generate images in Cursor with MCP, add the Imejis server (https://api.imejis.io/api/mcp) as a remote MCP server in settings, approve the sign-in, and ask Cursor's agent to render a design. No API keys to paste, no context switch to a design tool.

For developers, the interesting part isn't rendering one image. It's that the image lives in your codebase now. An OG image per route, a badge per release, a diagram per doc. The same agent that writes your code can produce the matching image and wire the render into your build.

What you can renderWhat you can render

Cursor's agent talks to the same Imejis components you'd use in the editor. That's 24 component types, from text and images to QR codes, charts, and tables. In practice, the jobs that come up inside an editor are:

  • OG images for each page or blog post, rendered from one template
  • README cards and status badges that update from live data
  • Diagrams and charts built from real numbers, not hand-drawn
  • Certificates, tickets, and receipts generated per record

None of these are generative art. They're structured designs, filled with your data, rendered pixel-perfect and repeatable.

Connect cursor in about a minuteConnect Cursor in about a minute

Cursor supports remote MCP servers on all current tiers, so the setup is the same for everyone.

Open Settings, go to MCP, and add a new server as a remote HTTP endpoint:

https://api.imejis.io/api/mcp

Approve the Imejis sign-in when it appears, and restart Cursor if the tools don't show up right away. The token lives inside Cursor, scoped to your account. There's no key to store in a config file.

Design and render from the editorDesign and render from the editor

Ask the agent in plain language. Start by listing what you have:

List my Imejis designs and templates with their dimensions.

Then build or edit a design:

Duplicate the "Blog OG" template as "OG - MCP post". Set the headline to
"How MCP works" and render it as a PNG.

The finished image comes back in the chat. Iterate the way you would with code: try a darker background, a shorter headline, a different accent color. Because it's a template render, the output is deterministic, so the same design and data always give you the same image.

One thing to know: a design's dimensions are fixed at creation. For a different size, ask the agent to start from a template in that size rather than resizing an existing one. That's why renders stay pixel-perfect.

Wire the render into your codeWire the render into your code

This is where Cursor earns its place in the loop. Once a design is right, have the agent write the code that renders it:

Read the fields on my "Blog OG" design, then write a Next.js route at
/og/[slug] that POSTs to the render endpoint with the post title as the
headline and returns the image. Create an API key named "og-images" for it.

Because the agent reads the design's exact field names and provisions a key over MCP, the route arrives correct instead of being the part you debug for an hour. The same approach works for a CI step that regenerates a badge on every release, or a script that renders a card per row of a CSV. Our Claude MCP guide covers the handoff in depth, and the steps are identical in Cursor.

TroubleshootingTroubleshooting

  • Tools don't appear: restart Cursor after adding the server. Remote MCP tools load on startup.
  • The sign-in never shows: ask the agent to list your designs. The OAuth popup fires on the first tool call.
  • The generated route 401s: confirm it uses the dma-api-key header with the key the agent created, not the OAuth token, which belongs to the editor session only.
  • The wrong fields changed: field names must match the design's component keys. Ask the agent to show the render fields for the design and compare against your code.

Start generatingStart generating

Connect once and Cursor can design, render, and wire real images into your codebase without leaving the editor.

  • New to this? The AI Agents page is the quick tour, with live previews and copy-paste prompts.
  • Want the full workflow? The Claude MCP guide goes deeper on the automation handoff.
  • Prefer to call the API directly? The API docs have tested examples in Node.js, Python, Go, and more.
  • Ready to go? The free plan includes 100 renders a month, no credit card.

Frequently Asked Questions

Yes, once you connect the Imejis MCP server. Cursor's agent can render your templates into real PNG or SVG images: OG images, README cards, diagrams, badges. It designs from a template and returns a finished image, right inside the editor. It does not generate art from a prompt; it renders structured designs you control.

Open Cursor Settings, go to MCP, add a new server as a remote HTTP endpoint, and paste https://api.imejis.io/api/mcp. Approve the OAuth sign-in and restart Cursor if the tools do not appear. Cursor supports remote MCP servers on all current tiers.

Because the image is part of your codebase. An OG image per route, a badge per release, a diagram per doc. Rendering them from Cursor means the agent that writes the code also produces the matching image, and can wire the render call into your build or CI.

Yes. Each image Cursor renders through the Imejis MCP server counts as one API call, the same as a direct request. The free plan includes 100 renders per month with no credit card.

Yes. Since the agent reads a design's exact fields over MCP, it can write the fetch call, the OG-image route, or the CI step with the right field names and a working key. Ask it to read the design, then generate the code that renders it.
See all posts