How to vibe codeOrshot

Prerequisites

• Node.jsfree

  Required runtime for building the Next.js full-stack application and MCP server.

• GitHubfree

  Source control and deployment pipeline integration.

• Dockerfree

  Required for running local headless browser rendering containers and Redis job queues.

AI coding 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.

Build guide

1. 01Scaffold 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.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Build 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.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Develop 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.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Implement 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.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Build 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.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Create 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.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Orshot