Ridvay MCP: Free AI Design Generation From Claude Code
This morning, a TikTok promo video went from "doesn't exist" to "sitting in my drafts" without me opening a single design tool. Claude Code composed the three-page layout, added the motion, rendered the MP4, and uploaded it. My total contribution was one sentence of instructions. The thing doing the actual work was ridvay-mcp — an MCP server that gives AI agents real design capabilities.
If you use Claude Code, Claude Desktop, Cursor, or GitHub Copilot's agent mode, this post shows you how to plug it in and what it can do. Setup is one command, and the core workflow is free.
What is ridvay-mcp?
ridvay-mcp is an open MCP (Model Context Protocol) server, published on npm, that lets any MCP-compatible AI assistant create, edit, animate, and export Ridvay Studio designs — posters, flyers, social posts, slides — directly from a chat conversation.
The key idea: your AI agent is the designer, Ridvay is the save/render/share backend. The agent composes the design itself — every text layer, font, color, and shape — and Ridvay stores it, renders it, and hands back three things:
- a share link (
ridvay.com/d/…) anyone can open - an edit link that opens the design in the Studio editor, where every layer stays editable
- a live image URL (
ridvay.com/img/{id}.png) that re-renders on every fetch
That last point matters. The output isn't a flat AI image you'd have to regenerate to change. It's a real design document — the same format you'd get building by hand in Studio. Your agent makes it; you (or the agent, or a teammate) refine it later. If you've read how to edit an AI-generated design, everything there applies to designs your agent creates too.
Setup: one command
Get an API key at ridvay.com/user/api-keys, then for Claude Code:
claude mcp add --scope user ridvay --env RIDVAY_API_KEY=sk-ridvay-… -- npx -y ridvay-mcp
For Claude Desktop, Cursor, or VS Code, add the equivalent entry to your MCP config:
{
"mcpServers": {
"ridvay": {
"command": "npx",
"args": ["-y", "ridvay-mcp"],
"env": { "RIDVAY_API_KEY": "sk-ridvay-…" }
}
}
}
That's the whole install. Designs your agent creates show up in your own My designs on ridvay.com.
The nine tools
| Tool | What it does |
|---|---|
get_design_guide |
The design-format spec that teaches the agent to compose layouts itself |
create_poster |
The main path: agent-composed design → stored, rendered, shared. Free |
generate_poster |
Fallback: Ridvay's own AI designs from a text brief (uses generation credits) |
recreate_poster |
Turn an existing poster image or screenshot into an editable design |
refine_poster |
Natural-language edits to an existing design |
check_poster |
Render status, links, and view count |
export_poster |
Download a PNG/JPEG at real pixel dimensions |
animate_poster |
Add motion — entrances, transitions, morphs between pages |
export_video |
Render the animated design to an H.264 MP4 |
The free/paid split is simple: when the agent does the design thinking (create_poster), it's free — Ridvay just stores and renders. When Ridvay's AI does the design thinking (generate_poster, recreate_poster), it draws from the account's generation credits. A capable agent like Claude Code almost never needs the fallback.
Sizes are flexible: 1080x1080 by default, 1080x1920 for stories and TikTok, a4, slide, or any custom WxH.
The worked example: a TikTok video with zero clicks
Here's the exact pipeline behind the video I mentioned in the opening — reproducible in any Claude Code session with ridvay-mcp installed. The prompt:
Using the ridvay MCP, create a 3-page 1080x1920 promo video design about [my topic]. Page 1: a bold hook. Page 2: three or four key points with accent bars. Page 3: a worked example plus a call to action. Dark navy background, blue accents, Poppins headlines. Then animate it with snappy staggered entrances and morph transitions, and render it to MP4.
What the agent actually does with that:
create_poster— composes all three pages as one multi-page design: headline layers, accent shapes, a terminal-style code card, everything positioned deliberately.export_posteron the key page — spot-checks its own layout as a PNG before committing to a long video render. Agents reviewing their own design work is one of those things that sounds gimmicky until you watch it catch a text overflow.animate_poster— describes the motion in plain language: "headline lines punch up in sequence, rows stagger top-to-bottom, fast morph transitions."export_video— kicks off the MP4 render, polls until done, downloads the file.
End result: a 1080×1920 video, editable at every layer if I want to tweak it by hand, with a share link. Total human input: the topic.
Live image URLs: designs that update themselves
Every shared design gets an always-current image endpoint:
https://ridvay.com/img/{designId}.png
Each fetch re-resolves the design's live data bindings — current time, countdowns, values pulled from a JSON feed, or declared variables filled from query params. Embed one URL in an email template with your ESP's merge tags (?name=*|FNAME|*) and every recipient gets a personalized image. Your agent can set all of this up in the same conversation.
Why this beats "generate an image"
Plenty of tools let an AI produce a picture. The difference here is what comes back:
- Editable layers, not pixels. Fix a typo in three seconds instead of re-rolling a generation and hoping.
- Real share infrastructure. Links, view counts, live URLs — not a file you have to host somewhere.
- Motion and video included. The same design becomes an animated MP4 with two more tool calls.
- A design you can hand off. Open the edit link and continue in the Studio editor like any design — the fundamentals from how to make a poster with AI apply unchanged.
Don't have an MCP client? You can get the same editable-design output by typing a prompt into Studio directly — try it: describe a launch poster and refine it in the editor.
FAQ
What is ridvay-mcp?
An MCP server on npm (npx ridvay-mcp) that lets AI assistants create, edit, animate, and export Ridvay Studio designs from chat.
Is it free?
Installing the server is free, and the primary workflow — the agent composing designs via create_poster, plus rendering, sharing, PNG export — doesn't consume generation credits. Only the AI-generation fallback tools (generate_poster, recreate_poster) draw credits.
Which AI clients work with it? Claude Code, Claude Desktop, Cursor, GitHub Copilot agent mode in VS Code, and any other MCP-compatible client.
Does it output images or editable designs? Editable designs — real text, font, color, and shape layers you can open in the Ridvay Studio editor. PNG/JPEG and MP4 exports are generated from those designs on demand.
Can it really make videos?
Yes. animate_poster adds motion to any design and export_video renders an H.264 MP4. The TikTok video in this post's example was produced exactly that way.
Try it in the next five minutes
claude mcp add --scope user ridvay --env RIDVAY_API_KEY=sk-ridvay-… -- npx -y ridvay-mcp
Then ask your agent for something real: a poster for your next launch, a story-format promo, a three-page video. Or skip the terminal entirely and start from a prompt in Ridvay Studio — same editable output, no setup.
Either way, the interesting part isn't that an AI made a graphic. It's that the graphic is a living design you can edit, animate, share, and keep.