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

> AI Prompt & Writing Assistant for Every Text Box

- Site: https://promptdc.com
- Category: Developer Tools & Productivity
- Verdict: **Solid side project** (75/100 vibecodeable)
- Estimated effort: 2-3 weekends of focused work

## Verdict

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.

### 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

## What it 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 — Perfect for writing, from social posts to emails and code
- Enterprise: $15/mo — For power users enhancing everything they write
- Lifetime: $69 — Bring your own API key to enhance any text, post or code

Founded 2025.
Team size: 1 person.

## The hard parts

- 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 vibe code PromptDC

### Prerequisites

- Node.js (free): Required for building the browser extension and running local tooling.
- Google Chrome (free): Required for loading and testing unpacked Manifest V3 browser extensions.
- Supabase Account (free): Provides user authentication, profile storage, and edge function routing.

### Recommended AI tools

- Cursor: AI code editor to rapidly scaffold the extension structure, content scripts, and UI components.
- Claude Code: Agentic terminal coding tool capable of managing multi-file extension manifests, background workers, and DOM injection scripts.

### 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

- 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

1. **Scaffold 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.
```

2. **Build 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.
```

3. **Configure 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.
```

4. **Implement 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.
```

5. **Build 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.
```

6. **Test, 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

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

- Supabase Project: Free 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 the SaaS instead: $9 - $15/mo
- Build time: 16-24 hours
- AI tool credits: $20 (Cursor Pro)
- Break-even: 7 months

## Sources

- [PromptDC Official Website & Documentation](https://promptdc.com)