Prmbr/CLAUDE.md

# CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

## Development Commands

**Development server:**
```bash
npm run dev        # Start development server on http://localhost:3000
```

**Build and deployment:**
```bash
npm run build      # Build production application
npm run start      # Start production server
npm run lint       # Run ESLint for code quality checks
```

**Database operations:**
```bash
npm run db:generate    # Generate Prisma client after schema changes
npm run db:push        # Push schema changes to database (development)
npm run db:migrate     # Create and apply migrations (production)
npm run db:studio      # Open Prisma Studio database GUI
npm run db:reset       # Reset database and apply all migrations
```

**Development setup:**
```bash
# First time setup
npm install
chmod +x scripts/setup-db.sh
./scripts/setup-db.sh

# Or use the automated check
node scripts/dev-check.js

# Daily development
npm run dev            # Automatically generates Prisma client and starts dev server
```

## Architecture Overview

This is a **Next.js 15** application with **App Router** using:

- **Authentication**: Supabase Auth with custom UI components
- **Database**: PostgreSQL via Supabase with Prisma ORM
- **Styling**: TailwindCSS v4 with custom theme system
- **State Management**: React Context for auth and theme
- **File Storage**: Configured for Cloudflare R2 (images)
- **Deployment**: Configured for Vercel

### Key Architectural Decisions

1. **Authentication Flow**: Supabase handles auth, middleware manages sessions, useAuth hook provides client state
2. **Database Design**: Prisma schema defines relationships between Users, Prompts, Versions, Tags, Albums, and TestRuns
3. **Theme System**: Custom ThemeProvider with localStorage persistence and system preference detection
4. **Component Structure**: Reusable UI components in `/components/ui/`, layout components in `/components/layout/`

### Core Data Models

The application centers around these main entities:
- **User**: Profile information and authentication
- **Prompt**: AI prompts with versioning and organization features
- **PromptVersion**: Version control for prompt iterations
- **PromptTag**: Categorization system
- **PromptAlbum**: Collection/organization system
- **PromptTestRun**: Testing and validation results

### Environment Setup

Required environment variables:
- `NEXT_PUBLIC_SUPABASE_URL`
- `NEXT_PUBLIC_SUPABASE_ANON_KEY`
- `DATABASE_URL`

### Component Patterns

- Use `'use client'` directive for interactive components
- Theme-aware components should use TailwindCSS dark mode classes
- Authentication state accessed via `useAuth()` hook
- Navigation handled through the Header component with mobile responsiveness

## 项目概况
- Github: Prmbr
- Domain: prmbr.com
- Name: Prmbr - AI Prompt Studio
- Languages Support
  - Chinese
  - English

# 功能清单
- [x] Homepage
- [ ] User Manager
  - [x] Sign in and Sign up
    - [x] username and password
    - [x] email and password
    - [x] google sign in
  - [x] Person Profile Setting
  - [x] Fields
    - [x] Username
    - [x] Password
    - [z] Email
    - [z] Avatar
    - [z] Bio
    - [z] Language
    - [ ] Version Limit (Max By Subscribe)
    - [ ] Credit (Max By Subscribe)
    - [ ] Subscribe Plan (Free, Pro)
- [x] AI Prompt Studio
  - [x] Manager
    - [x] CRUD
    - [x] Search
    - [x] Filter
    - [x] Sort
    - [x] Pagination
    - [x] Bulk Actions
  - [x] DB Fields
    - [x] ID
    - [x] Name
    - [x] Content
    - [x] Album
    - [x] Tag
    - [x] Version
    - [x] Created At
    - [x] Updated At
    - [x] Primissions (Set By User)
      - [x] Private
      - [x] Public
    - [ ] Visibility (Set by admin when User Share)
      - [ ] Under Review
      - [ ] Published
    - [ ] View Count
  - [ ] Prompt Debugger
    - [x] Prompt Version Controll
      - [x] Generate a new version when save
      - [x] Save last [LIMIT] versions
      - [x] [LIMIT] can setting in use profile
      - [ ] [LIMIT] max is by Subscribe
      - [ ] Delete Version Button
    - [ ] Prompt Debugger run
      - [ ] Select AI Model
      - [ ] Input Prompt Content
      - [ ] Show Test Result
      - [ ] Need to User Credit
- [ ] Subscribe
  - [ ] Free
    - [ ] 20 Prompt Limit
    - [ ] 3 Version Each Prompt Limit
    - [ ] 5 USD Credit Once Time. Timeout After 1 Mounth.
    - [ ] 0 USD Credit Every Month.
  - [ ] 19.9 USD Paid Monthly
    - [ ] 500 Prompt Limit
    - [ ] 10 Version Each Prompt Limit
    - [ ] 20 USD Credit Every Month. Valid 1 Month.
- [ ] AI Prompt Showcase
  - [ ] User Can Share
  - [ ] Admin Can Review
  - [ ] Share and Reviewed Prompt Show in Showcase
  - [ ] Everything Can View Showcase
  - [ ] User can Duplicate Prompt from Showcase
- [ ] AI Prompt Share to Public Showcase

# Keyword
- prompt builder
- prompt master builder
- prompt manager builder
- ai prompt builder
- ai prompt studio

# Tech Stack
- Framework: Next.j
- CSS: Tailwind CSS
- DB: Prisma
- DB && Auth: Supabase
- i18n: next-intl
- S3: Cloudflare R2
- Stripe
- AI: OpenRoute

# Deployment
- Vercel/Cloudflare
- Cloudflare R2
- Supabase

#  整体要求
- SSR
- 移动设备友好
- SEO 友好
- 支持夜间模式，采用 Tailwindcss 最佳实践
- 避免采用强制样式，尽量采用全局定义样式，采用 TailwindCSS 最佳实践推荐的样式实现

# 代码生成原则

1. 暂停思考的习惯 - 在行动前先分析现有结构
2. 质量优先的价值观 - 宁可慢一点也要做对
3. 整体设计思维 - 考虑代码的可维护性和一致性
4. 优先按照最佳实践完成工作
5. 完成一个模块后执行 build 查看是否有报错，确保能够成功构建后移除调试代码。
6. 时刻保证布局友好和界面美观

# 模型管理系统

## 支持的服务提供者
- **OpenRouter**: 用于文本生成模型，输出类型为 text
- **Replicate**: 用于多媒体生成模型，支持 image、video、audio 输出类型

## 环境变量配置
- `OPENROUTER_API_KEY`: OpenRouter API 密钥
- `REPLICATE_API_TOKEN`: Replicate API 令牌

## 数据库字段
- `serviceProvider`: 服务提供者 (openrouter/replicate)
- `outputType`: 输出类型 (text/image/video/audio)
- `provider`: 模型提供商 (如 OpenAI, Anthropic 等)