# How to Vibe Code Your Own Orshot (and Stop Paying for It)

> Agent-first creative automation platform

- Site: https://orshot.com
- Category: Creative Automation & Visual Generation API
- Verdict: **Serious undertaking** (42/100 vibecodeable)
- Estimated effort: 6-8 weeks of part-time work

## Verdict

You can build a functional personal image-rendering script over a weekend, but cloning a multi-format canvas editor, MCP server, and asynchronous video/PDF rendering backend is a serious undertaking.

The core value of Orshot isn't just an API wrapper; it's a multi-format composition engine capable of compiling vector layouts into razor-sharp PNGs, multi-page print PDFs with CMYK color profiles, and frame-accurate MP4 videos with karaoke captions. While AI coding tools can rapidly scaffold the Next.js dashboard, database schemas, and basic CRUD routers, you will hit massive engineering walls orchestrating headless rendering workers, configuring precise font layout engines, and writing a robust Model Context Protocol (MCP) server that exposes dozens of precise asset-manipulation tools. If you only need static image banners, build a thin wrapper; if you want the full Orshot clone, prepare for weeks of headless browser debugging and queue orchestration.

### What you can't replicate

- The exact template ecosystem and battle-tested production render volume (949k+ renders)
- Instant social publishing OAuth token maintenance across 15+ third-party platforms
- Low-latency global edge distribution and custom-tuned headless rendering nodes

## What it does

Programmatic graphics, PDF, and video generation backend with visual canvas editor, template import from Figma and Canva, MCP server endpoints, and automated workflows.

### Core features

- Orshot Studio visual canvas editor for layers, shapes, text, and media
- Multi-format headless rendering pipeline (PNG, JPEG, WebP, AVIF, multi-page PDFs, MP4/WebM video with audio)
- Dynamic token parameters and inline styling overrides via dot-notation
- Model Context Protocol (MCP) server providing 60+ tools for AI coding assistants
- Asynchronous workflow execution engine integrating external data sources (Google Sheets, Airtable, Shopify)
- White-label React & Vue embed SDK with JWT session authentication
- Social media cross-publishing integration across 15+ networks

## The business

### Pricing

- Free: Free
- Launch: $39/mo
- Grow: $160/mo
- Scale: $349/mo

Founded 2023.
Team size: Solo-founder.

## The hard parts

- Building a headless multi-format layout rendering engine that translates canvas coordinates into high-fidelity rasters, print-ready vector PDFs, and frame-accurate video containers with audio synchronization
- Implementing deterministic text-autofit, line wrapping, and smart stacking constraints to prevent layout overflow across variable font metrics
- Exposing a robust Model Context Protocol (MCP) server endpoint with 60+ synchronous and asynchronous tool definitions for external coding agents
- Managing distributed asynchronous background queues (via Redis/BullMQ) to process media renders, webhooks, and retry logic without worker starvation

## How to vibe code Orshot

### Prerequisites

- Node.js (free): Required runtime for building the Next.js full-stack application and MCP server.
- GitHub (free): Source control and deployment pipeline integration.
- Docker (free): Required for running local headless browser rendering containers and Redis job queues.

### Recommended AI tools

- Claude Code: Best-in-class coding agent for scaffolding multi-file full-stack architecture, database schemas, and complex rendering pipelines.
- Cursor: Ideal for fine-tuning the interactive canvas editor UI components and React/Vue embed SDKs.

### Stack

- Frontend: Next.js with Tailwind CSS and Fabric.js / Konva for the canvas studio editor
- Backend: Next.js API routes + Node.js background worker pool using Puppeteer/Playwright for headless rendering
- Database: Turso (SQLite at the edge) for workspaces, templates, and render audit logs
- Auth: better-auth for self-hosted TypeScript authentication
- Payments: Stripe
- Other: Vercel AI SDK for AI template generation features, BullMQ + Redis for asynchronous render queue management, Cloudflare R2 for object storage of generated assets

### Hosting

- Vercel (Hosts the Next.js frontend dashboard and serverless API endpoints with zero configuration.): $0-20/mo
- Fly.io (Runs the persistent Docker worker containers needed for headless browser rendering, video compilation, and background job queues.): $10-25/mo

### Build guide

1. **Scaffold Database Schema and Workspace Auth** — Set up the Next.js project with Turso database and better-auth to handle multi-tenant workspaces, team members, and API key management.

```
Initialize a new Next.js 16 project using TypeScript, Tailwind CSS, and App Router. Configure better-auth with email/password authentication and a Turso (SQLite) database client via Drizzle ORM. Create database migrations and tables for `users`, `workspaces`, `workspace_members`, `templates` (storing JSON layer trees), `renders` (tracking execution status, format, and credit consumption), and `api_keys`. Implement workspace creation logic and middleware that validates bearer tokens against the `api_keys` table for incoming REST endpoints. Ensure strict multi-tenant isolation so workspace users can only access their own templates and render logs.
```

2. **Build the Canvas Studio Editor UI** — Implement a visual canvas editor interface using Fabric.js or Konva allowing users to position text, image, shape, and video layers, and parameterize properties into template variables.

```
Build a visual canvas editor page inside the Next.js dashboard using Fabric.js wrapped in a React component. Create a sidebar UI for adding layers (Text, Image, Rectangle, Circle, Video) and a property inspector panel that lets users click any layer and convert its text content, fill color, image URL, or font size into a dynamic parameter token (e.g., `{{title}}` or `{{product_image}}`). Add canvas zoom, pan, layer reordering (zIndex stacking), and group selection tools. Implement a 'Save Template' action that serializes the entire canvas object model into a structured JSON schema stored in the Turso `templates` table.
```

3. **Develop the Headless Rendering Engine Service** — Create a Node.js worker service running Playwright/Puppeteer inside a Docker container to compile template JSON schemas and dynamic modifications into high-resolution PNG, multi-page PDF, and MP4 video assets.

```
Create a separate Node.js background worker service designed to run on Fly.io using Docker, utilizing Playwright with a headless browser instance. Implement a rendering pipeline function that accepts a template JSON schema and a key-value `modifications` payload. The engine must dynamically inject variables into the DOM/canvas representation, apply inline text autofit and wrapping constraints, and export the output based on requested format (`png`, `jpg`, `pdf`, `mp4`). For PDF outputs, configure multi-page pagination and page margins. For video outputs, compile frame sequences into an MP4 file using fluent-ffmpeg. Ensure generated binary files are uploaded directly to Cloudflare R2 object storage, returning a public CDN URL while updating the `renders` table with execution timing and success status.
```

4. **Implement REST API and Asynchronous Queue Processing** — Expose robust REST endpoints for rendering assets and wire up BullMQ with Redis to handle asynchronous job queues and retry logic.

```
Implement REST API routes in Next.js (`POST /v1/studio/render`) protected by workspace API keys. When a request arrives, validate the payload against template parameters, deduct credits from the workspace quota, and enqueue a rendering job into a BullMQ queue backed by Upstash Redis. Build a background worker listener that pulls jobs from the queue, dispatches them to the headless rendering service built in Step 3, and handles automatic retries on failure (up to 3 attempts with exponential backoff). Return either a direct hosted CDN URL, base64 string, or binary response based on the client's `response.type` parameter. Add detailed request logging to an audit log table.
```

5. **Build the Model Context Protocol (MCP) Server Endpoint** — Develop an MCP server endpoint that exposes 60+ tools for AI coding assistants like Claude Code and Cursor to autonomously interact with templates and trigger renders.

```
Build an MCP (Model Context Protocol) server endpoint (`/api/mcp`) using the official Model Context Protocol TypeScript SDK. Expose tools for AI coding assistants such as `list_templates`, `get_template_schema`, `create_template`, `update_template_layers`, `trigger_render`, `list_renders`, and `get_workspace_logs`. Each tool must authenticate incoming requests via workspace API keys or session tokens, execute database operations or trigger render jobs, and return clean JSON tool outputs formatted for LLM consumption. Test the endpoint locally to ensure Claude Code or Cursor can successfully connect via SSE/HTTP transport and autonomously query or render templates from a terminal prompt.
```

6. **Create Workflow Automation Engine and Embed SDK** — Build no-code automation triggers and a white-label React embed SDK for mounting the editor inside third-party apps.

```
Build a workflow automation execution engine that supports cron scheduling and webhook triggers to pull rows from simulated data sources (e.g., JSON payloads) and batch-render assets from templates. Additionally, build a white-label React SDK component (`<OrshotEmbed />`) that embeds the visual canvas editor inside an iframe or React container, communicating via window postMessage events and JWT-scoped session tokens for multi-tenant customer use. Add a billing usage dashboard tracking monthly credit consumption, overage rates, and workspace activity logs.
```

### Cost vs paying

**Starting costs (one-time):**

- Domain name registration: $12
- Initial AI coding tool credits: $40
- Total: ~$52 one-time

**Ongoing costs (monthly):**

- Vercel Hobby/Pro Hosting: $0-20/mo
- Fly.io Headless Render Worker VM: $10/mo
- Turso & Upstash Redis: $0/mo
- Cloudflare R2 Object Storage: $0/mo
- Total: ~$10-30/mo

- Paying for the SaaS instead: $39/mo - $349/mo
- Build time: 60-80 hours
- AI tool credits: $40
- Break-even: Immediate if replacing high-volume commercial API tiers

## Sources

- [Orshot Official Website & Documentation Content](https://orshot.com)
- [Fake Mayo - From Side Hustles to $6.2K MRR: How Rishi Mohan Built Orshot](https://vertexaisearch.cloud.google.com/grounding-api-redirect/AUZIYQE6uOUUaQOkthH9nlVk9PrrVUQj8vXYnKQV2q1kiRcAgiRkkM6v90gn6BeEQ_Ktd1OaWGaPtSa7ECdm8_EfUfFMvWX4gFUzhrMo96iJxCmL8YfvN_qhEmk0ain3kt1ZoztxxxlTLO1GElHCiKcr1z7qe7yT8K4HqlxSzxkTFwgwqPloh5dBqbqsZcDc)
- [Hacker News - Ask HN: What Are You Working On? (December 2025)](https://vertexaisearch.cloud.google.com/grounding-api-redirect/AUZIYQEkMUBuZm6GN91a_9LnO3k85aDfpg0O6M_sa7jUHXBrNiNTEhSlUO4PBJkkq6lDjCmnbgw5rKV_Z0uNOqRVj1hqPWyvJ3mXnixg9BhutcF2PIA8kk2Lc_ekPmVRboN3djSd2v8=)