Prompt Copilot keeps a developer's reusable AI prompts in one versioned, searchable library and inserts them wherever they work. A Next.js 15 dashboard handles CRUD, hierarchical categories and search; a Chrome MV3 extension injects prompts into ChatGPT, Claude, Gemini and Perplexity with offline-first caching; and a VS Code extension inserts them (with {{variable}} substitution) at the cursor. All three share one Zod-validated Prisma/PostgreSQL API, authenticated by NextAuth sessions for the web and per-user API keys for the extensions.
FeaturedActive
Prompt Copilot - Cross-Surface AI Prompt Manager
Solo Developer — end-to-end
A cross-surface prompt-management ecosystem — a Next.js 15 dashboard, a Chrome MV3 extension, and a VS Code extension on one Prisma/PostgreSQL API — that lets developers organise, version, and one-click-insert reusable AI prompts into ChatGPT, Claude, Gemini, Perplexity, and the IDE.
Role & Context
Solo, end-to-end portfolio project: SRS authoring → relational schema → REST API contract → multi-modal auth → three independently bundled clients (web, Chrome, VS Code) → Chrome Web Store and VS Code Marketplace listings.
Problem
Working across ChatGPT, Claude, Gemini and VS Code, the best prompts a developer writes end up scattered across Notion, screenshots and chat scrollback. Every reuse means alt-tabbing out of flow, re-finding the prompt, re-typing template variables, and losing the version history of what worked. No existing tool indexed prompts across all four AI sites and the IDE under one searchable, versioned library with template-variable substitution.
Approach & Architecture
Loading diagram…
Best Practices Followed
- End-to-end type safety: TypeScript strict across all three clients, Zod runtime schemas at every API boundary, and Prisma-generated types from one schema
- Multi-modal authentication: NextAuth.js v5 JWT sessions for the dashboard plus a separate x-api-key channel for the extensions, so they never host an OAuth redirect flow
- Soft deletes + automatic version history: deletedAt columns give recovery and a Version snapshot row is written on every prompt mutation
- Offline-first browser extension: chrome.storage.local cache, an offline write queue, and chrome.alarms background sync every 15 minutes
- Separation of concerns across surfaces: web, Chrome and VS Code are three independent bundles (Next.js / esbuild / webpack) sharing only the REST contract
- Per-tenant data scoping by construction: every Prisma query is scoped to a userId resolved from session or API key before RBAC is layered on
Challenges & Resolution
ChallengeReliably inserting text into the diverse inputs used by ChatGPT, Claude, Gemini and Perplexity — each uses a different element (textarea vs contenteditable vs Lexical/ProseMirror), and a naive value/innerText write doesn't trigger React's synthetic events, so the controlled input never re-renders and Send stays disabled.
FixBuilt a per-platform selector table with explicit fallbacks (data-id, role, contenteditable), then fired native input and change events on the target after writing so React/Lexical pick up the value and enable submit.
ChallengeThree clients with three storage models had to share one auth model without forcing the extensions to host an OAuth redirect flow.
FixAdded a per-user apiKey to the User model and a second auth path that resolves a user from an x-api-key header before falling back to the session; users mint a key in settings and paste it into each extension once.
Outcomes
- Three integrated client surfaces shipped on one backend: a Next.js 15 dashboard (OAuth + credentials, prompt CRUD, hierarchical categories, fuzzy + SQL search, soft delete + version history, per-user API keys), a Chrome MV3 extension (one-click insert into ChatGPT/Claude/Gemini/Perplexity, offline cache, 15-min sync), and a VS Code extension ({{variable}} substitution, editor/clipboard insert)
- Prisma schema with User, Prompt, Category (self-referencing hierarchy) and Version; soft deletes, per-user API keys, and usageCount updated from every surface
- Seeded 11 default categories with subcategories available on first sign-in
- Published to the Chrome Web Store and VS Code Marketplace
Tech Stack
TypeScriptNext.jsReactPrismaPostgreSQLSupabaseNextAuth.jsZodChrome Extension (MV3)VS Code ExtensionTailwind CSSshadcn/uiTanStack QueryZustandfuse.js
Concepts & Skills Learnt
Chrome Manifest V3 (service worker + content scripts)VS Code Webview API (postMessage to extension host)Next.js 15 App Router with React 19 Server ComponentsPrisma ORM on PostgreSQL (Supabase), self-referencing hierarchiesOAuth 2.0 / OIDC via NextAuth.js v5 (GitHub + Google)JWT sessions + API-key (x-api-key) authenticationZod schema validation at every API boundarySoft deletes & append-only version-snapshot tablesContent-script injection into React/Lexical/ProseMirror inputsOffline-first sync (chrome.alarms, chrome.storage.local, write queue)Template-variable ({{variable}}) substitutionFuse.js fuzzy search + PostgreSQL filtering/paginationTanStack Query (stale-while-revalidate) + ZustandThree independent build pipelines (Next.js, esbuild, webpack)