How to vibe codePromptDC
AI Prompt & Writing Assistant for Every Text Box
promptdc.com ↗Developer Tools & Productivity
The verdict: can you vibe code PromptDC?
Build a personal subset for yourself, but keep paying if you rely on the cross-app production polish and multi-provider BYOK sync.
PromptDC is a well-packaged browser extension wrapper around frontier LLMs. Vibecoding a personal clone is entirely realistic with a modern web extension framework and AI coding agents. The real friction points will not be the AI prompts or Supabase sync, but rather wrestling with Chrome extension manifest v3 background scripts, content security policies on arbitrary third-party websites, and reliably patching contenteditable DOM fields across disparate web apps like Gmail and Notion without breaking their event loops.
Estimated effort: 2-3 weekends of focused work
What you can't replicate
- Pre-tuned platform-aware defaults for 30+ specific web apps maintained over time
- The exact active user base and community-contributed prompt library
Founded
2025
Raised
—
Team
1 person
Cheapest paid tier
$9/mo
What PromptDC does
An AI-powered prompt and writing assistant that operates inline across web and desktop text boxes, featuring a Coding Mode for structured code generation specs and a Writing Mode for grammar and tone adjustments.
Core features
- Chrome extension content script injecting a floating toolbar and inline UI
- DOM-safe text selection capture and in-place replacement
- Dual-mode architecture: Coding mode (implementation-ready specs) and Writing mode (grammar, email, social posts)
- Platform auto-detection (recognizing Cursor, ChatGPT, Claude, Gmail, Notion, etc.)
- Bring-Your-Own-Key (BYOK) multi-provider support (OpenAI, Anthropic, Google, xAI)
- Per-website rules and custom profile configuration
- Keyboard shortcut listener (Cmd+Shift+Space / Ctrl+Shift+Space)
The business
Pricing
- Pro$9/mo
- Enterprise$15/mo
- Lifetime$69
Funding
Unknown / bootstrapped
Pay vs build, cumulative
Break-even at month 3 — after that, every month is money kept.
The hard parts of vibe coding PromptDC
- Injecting floating UI and handling inline DOM replacement across hundreds of third-party web apps (Gmail, Notion, ChatGPT) without breaking host app event listeners or layout styling
- Managing cross-browser extension permissions (scripting, tabs, sidePanel) and secure local storage of user-provided API keys
- Implementing reliable text replacement for both editable inputs (textarea, contenteditable) and read-only text selections
How to vibecode PromptDC
Prerequisites
Node.jsfree
Required for building the browser extension and running local tooling.
Google Chromefree
Required for loading and testing unpacked Manifest V3 browser extensions.
Supabase Accountfree
Provides user authentication, profile storage, and edge function routing.
AI coding tools
Recommended stack
| Frontend | React + Tailwind CSS (bundled via Vite for Chrome Extension side panel and floating UI) |
|---|---|
| Backend | Supabase Edge Functions (Deno-based router to forward requests to LLM providers) |
| Database | Supabase Postgres (storing user settings, custom profiles, and per-website rules) |
| Auth | Supabase Auth (Google OAuth + email sign-in) |
| Payments | None (personal use clone skips payment infrastructure) |
| Other | Vercel AI SDK, Chrome Extension Manifest V3 APIs (contentScripts, storage, scripting, sidePanel) |
Hosting & infrastructure
| Supabase | Database, authentication, and edge functions handling user profiles and API request proxying | $0/mo |
| Cloudflare Pages | Hosting the companion web settings dashboard and account management page | $0/mo |
Build guide
01Scaffold Manifest V3 Extension & Vite Build Setup
Initialize a TypeScript extension project with Vite, configuring build targets for content scripts, background service workers, and the side panel UI.
Create a new TypeScript project using Vite structured for a Chrome Extension Manifest V3. Configure the build output to generate a background service worker (`background.ts`), a content script (`content.ts`), and a React-based side panel application (`sidepanel/`). Set up Tailwind CSS for styling UI components inside the extension shadow DOM to prevent style leakage into host web pages. Include manifest.json with permissions for storage, tabs, scripting, sidePanel, and host permissions for all URLs.02Build Floating Toolbar & DOM Text Injection Content Script
Implement the content script that detects text box focus, displays a floating enhancement toolbar, and safely reads or replaces text in editable elements and contenteditable divs.
Write a robust content script (`content.ts`) that listens for focus events on `input`, `textarea`, and `[contenteditable='true']` elements across web pages. When a user focuses a text box, inject a lightweight floating toolbar containing an 'Enhance' button and mode selector. Implement text extraction from the active element and a safe text replacement function that preserves undo stacks and framework state (like React controlled inputs by firing input/change events). Add support for the keyboard shortcut Cmd+Shift+Space (Mac) / Ctrl+Shift+Space (Windows) to trigger the enhancement directly.03Configure Supabase Backend & Database Schema
Set up Supabase tables for user profiles, custom prompt files, per-website rules, and authentication.
Design and execute a SQL migration for Supabase containing tables for `profiles` (user settings and preferences), `custom_prompts` (saved prompt snippets and markdown files), and `website_rules` (mapping domain patterns to specific writing or coding profiles). Configure Row Level Security (RLS) policies so authenticated users can only access their own records. Set up Supabase Auth with Google OAuth integration.04Implement BYOK and Server-Side LLM Proxy Edge Function
Build a Supabase Edge Function that securely accepts user-provided API keys (or falls back to configured keys), formats system prompts based on Coding vs Writing modes, and streams responses back to the extension.
Create a Supabase Edge Function (`enhance-text`) that receives an enhancement request containing the raw text, active mode (Coding or Writing), selected profile, and optional BYOK credentials (OpenAI, Anthropic, Gemini, or Grok API key). The edge function should construct the appropriate system prompt (injecting rules for code generation specs or grammar/tone fixes), call the designated LLM provider API securely without persisting user API keys on the server, and stream the resulting text back to the extension client.05Build Side Panel Management UI & Profile Customizer
Develop the React side panel interface for managing writing profiles, switching modes, configuring per-website rules, and inputting BYOK API keys.
Build a React-based side panel UI for the Chrome extension that communicates with Supabase and chrome.storage. Include tabs for: (1) Active Mode selector (Coding vs Writing), (2) Profile manager allowing users to create and edit custom system instructions and output formats (Markdown, JSON, XML), (3) Per-website rules configuration where users can bind specific profiles to domains like mail.google.com or cursor.com, and (4) Settings page to securely save user API keys into chrome.storage.local.06Test, Polish, and Package Extension
Perform end-to-end testing across complex web apps like Gmail, ChatGPT, and Notion, handling edge cases and packaging the extension for local loading.
Test the extension build across complex web apps including Gmail, ChatGPT, Notion, and LinkedIn. Fix any edge cases where shadow DOM styling conflicts with host pages or where contenteditable text replacement loses cursor position. Add error handling and loading spinners in the floating toolbar during LLM processing. Provide instructions on how to load the unpacked extension into Google Chrome for personal use.
Cost vs paying for PromptDC
What will you build it with?
Starting total with Cursor$0 one-time
Starting costs (one-time)
- Supabase ProjectFree tier ($0)
- LLM API Credits (BYOK)~$2-5 one-time initial testing
Total~$22 one-time
Ongoing costs (monthly)
- Supabase Hosting$0/mo (Free tier)
- LLM API Usage (Direct provider billing)~$1-3/mo
Total~$2/mo
Paying for PromptDC
$9 - $15/mo
Your time to build
16-24 hours
AI tool credits
$20 (Cursor Pro)
Break-even
7 months
Vibe code PromptDC: FAQ
- Can you vibe code PromptDC yourself?
- Solid side project — 75/100 vibecodeable. Build a personal subset for yourself, but keep paying if you rely on the cross-app production polish and multi-provider BYOK sync.
- How long does it take to vibe code PromptDC?
- 2-3 weekends of focused work — roughly 16-24 hours of hands-on time with an AI coding agent.
- How do you build your own PromptDC?
- Scoped to personal use: React + Tailwind CSS (bundled via Vite for Chrome Extension side panel and floating UI) on the front, Supabase Edge Functions (Deno-based router to forward requests to LLM providers) behind it, Supabase Postgres (storing user settings, custom profiles, and per-website rules) for data. Follow the 6-step build guide on this page — each step has a paste-ready prompt for an AI coding agent.
- How do you code your own PromptDC without being an expert?
- Use an AI coding tool (Cursor or Claude Code) and work in small steps: scaffold, data model, core screens, then deploy. Realistic effort: 2-3 weekends of focused work. The prompts on this page are written so the AI does the heavy lifting.
- How much does it cost to vibe code PromptDC instead of paying?
- About ~$22 one-time to start and ~$2/mo to run, versus $9 - $15/mo for PromptDC. Break-even: 7 months.
- What stack should you use to vibe code PromptDC?
- React + Tailwind CSS (bundled via Vite for Chrome Extension side panel and floating UI); Supabase Edge Functions (Deno-based router to forward requests to LLM providers); Supabase Postgres (storing user settings, custom profiles, and per-website rules); plus Vercel AI SDK, Chrome Extension Manifest V3 APIs (contentScripts, storage, scripting, sidePanel).