Content
# PromptHub
> A prompt library for AI heavy users: visual management + classification search + MCP direct connection to Cursor/VS Code/Cline.
> **Goal: Turn "prompts scattered in chat records" into reusable assets.**
[](https://vercel.com/new/clone?repository-url=https://github.com/baize7815/prompthub-app)
---
## Online Demo (Please replace with your address)
- 🌐 Web App: `https://your-project.vercel.app`
- 🔌 MCP Endpoint: `https://your-project.vercel.app/api/mcp`
> After deployment, replace the above two addresses with your own Vercel domain.
---
## What You'll Get
- Prompt library management (classification / search / sorting / card view)
- New drawing workspace (model, size, number of generated images, reference image)
- Built-in MCP access configuration generator (Cursor / VS Code / Cline / Windsurf / Trae)
- PostgreSQL persistent storage (Supabase free version available)
---
## Project Screenshots
### Prompt Library Homepage
### New Drawing Page
### MCP Settings Popup
---
## Architecture Diagram (Mermaid)
```mermaid
flowchart LR
U[User Browser] --> V["PromptHub Web UI<br/>Vercel Static"]
A["AI Editor<br/>Cursor/VS Code/Cline"] --> M["/api/mcp"]
V --> API["/api/*<br/>Vercel Function<br/>Express"]
M --> API
API --> DB[(Supabase PostgreSQL)]
API --> H["/api/healthz"]
API --> K["/api/keepalive"]
```
---
## 10-Minute Deployment Guide for Beginners (Vercel + Supabase Free Plan)
> You don't need to know backend or database management. Just follow the steps.
### 0. Prepare Accounts and Tools
You need:
1. GitHub account
2. Vercel account (can be logged in with GitHub)
3. Supabase account (free)
4. Node.js >= 18 (required for local database initialization)
5. `pnpm` (project uses pnpm)
Install pnpm (if not installed):
```bash
npm i -g pnpm
```
---
### 1. Create a Supabase Free Database
1. Log in to Supabase and create a new **free** project.
2. Wait for project creation (usually a few minutes).
3. Go to **Project Settings → Database → Connection string**.
4. Find the **Transaction pooler** (recommended) connection string and copy it (usually port 6543).
You'll get a `DATABASE_URL` like this:
```text
postgresql://postgres.xxxxx:[YOUR-PASSWORD]@aws-0-xxx.pooler.supabase.com:6543/postgres
```
---
### 2. Initialize Database Tables Locally (do this once)
Run on your computer:
```bash
pnpm install
```
Then set `DATABASE_URL` and push tables:
**macOS / Linux (bash)**
```bash
export DATABASE_URL='your Supabase connection string'
pnpm --filter @workspace/db run push
```
**Windows PowerShell**
```powershell
$env:DATABASE_URL='your Supabase connection string'
pnpm --filter @workspace/db run push
```
See successful output.
---
### 3. Deploy to Vercel (free) with One Click
1. Click the **Deploy with Vercel** button at the top of this page (or manually import the repository to Vercel).
2. Add the following environment variables during project configuration:
| Variable Name | Required | Example | Description |
|---|---|---|---|
| `DATABASE_URL` | ✅ | `postgresql://...` | Supabase Transaction Pooler connection string |
| `SESSION_SECRET` | ✅ | `a-very-long-random-string` | Session signature key, recommend 32+ characters |
| `OWNER_PASSWORD` | ✅ | `your-admin-password` | Admin login password |
| `NODE_ENV` | ✅ | `production` | Production environment identifier |
| `LOG_LEVEL` | Optional | `info` | Log level |
| `AI_INTEGRATIONS_OPENAI_BASE_URL` | Optional | `https://api.openai.com/v1` | Compatible OpenAI interface address |
| `AI_INTEGRATIONS_OPENAI_API_KEY` | Optional | `sk-...` | AI generation capability API Key |
3. Click Deploy and wait for completion.
---
### 4. Verify Deployment (very important)
Replace `your-project.vercel.app` with your actual domain:
1. Health check:
```text
https://your-project.vercel.app/api/healthz
```
Expected response:
```json
{"status":"ok"}
```
2. Open the homepage, log in with your set `OWNER_PASSWORD`.
3. Go to **Settings → MCP**, copy the token and configuration snippet.
MCP quick test (optional):
```bash
curl -X POST "https://your-project.vercel.app/api/mcp?token=YOUR_MCP_TOKEN" \
-H "Content-Type: application/json" \
-H "Accept: application/json, text/event-stream" \
-d '{"jsonrpc":"2.0","id":1,"method":"tools/list","params":{}}'
```
If you see the tools list, MCP access is normal.
---
## Connect MCP in Cursor / VS Code
After deployment, no need to write configurations manually:
1. Open PromptHub webpage
2. **Settings → MCP** in the bottom left corner
3. Choose your editor tab (Cursor / VS Code / Cline / Windsurf / Trae)
4. Copy JSON directly
---
## Frequently Asked Questions (must-read for beginners)
### Q1: Page reports "OWNER_PASSWORD not configured"
**Cause**: Vercel didn't fill `OWNER_PASSWORD`.
**Solution**: Go to Vercel Project Settings → Environment Variables and add it before redeploying.
### Q2: MCP call returns 401 or 406
**Cause**:
- 401: token is incorrect or not provided.
- 406: request header lacks `Accept: application/json, text/event-stream`.
**Solution**: Use the token provided in the settings page and add the Accept header.
### Q3: Database-related errors (table does not exist)
**Cause**: Did not execute `pnpm --filter @workspace/db run push`.
**Solution**: Follow step 2 to push tables once.
### Q4: Login status lost after restart
**Cause**: `SESSION_SECRET` changed or not fixed.
**Solution**: Set a stable `SESSION_SECRET` (don't change it every redeploy).
### Q5: Will the free version go to sleep?
**Description**: Supabase Free may go to sleep. The project has a built-in `/api/keepalive` Vercel Cron to reduce sleep probability, but it's not 100% guaranteed.
---
## Local Development
```bash
pnpm install
pnpm --filter @workspace/db run push
pnpm --filter @workspace/api-server run dev
pnpm --filter @workspace/prompthub run dev
```
Common addresses:
- API: `http://localhost:8080/api/...`
- Web: `http://localhost:5173`
---
## Monorepo Structure
```text
artifacts/
prompthub/ # Frontend (Vite + React)
api-server/ # API + MCP (Express)
lib/
db/ # Database schema and access layer
api-spec/ # OpenAPI definition
api-client-react/ # React API client
api-zod/ # Zod type and schema
```
