Potion Template
Production-ready Notion-like editor with AI features, built on Plate.
What is Potion?
Potion is a comprehensive template built on Plate, offering a Notion-like interface with advanced content management capabilities, enhanced by AI features.
Requirements
- React 19
- TailwindCSS 4
Key Features
-
Production-Ready AI Integration
- GitHub Copilot-style suggestions with word-by-word acceptance
- AI-powered commands for content generation and editing
-
Media Management
- UploadThing integration for efficient file handling
- Advanced image/video features: resize, align, caption
- Clickable media placeholders with upload/embed options
-
Enhanced Navigation
- Sticky TOC sidebar with hover-to-expand
- Extended slash menu with item groups
- Context menu via drag button or three-dot menu
-
Mathematical Content
- LaTeX equation support with real-time rendering
- Toolbar integration for quick equation insertion
Key Benefits
- Launch faster: Skip 100+ hours of development and debugging
- Enterprise-ready: Database persistence, input validation, rate limiting, and type safety
- Full control: Modify any component, extend any feature
- Future-proof: Built on T3 Stack
Tech Stack
Get Started with the Frontend
Need just the editor? Get our decoupled frontend version that works with any backend:
This frontend-only version gives you Potion's powerful editor features without the backend constraints. Perfect for teams with existing infrastructure. Follow our installation guide – a few copy-paste and it's yours.
Perfect For
- Startups building the next-gen content platform
- Enterprises needing a customizable document editor
- Developers creating knowledge bases or documentation sites
- Teams requiring AI-enhanced content creation tools
License
Available under our commercial license. Get full source code access and free updates.
README
Getting Started
Environment Variables
Copy the example env file:
cp .env.example .env.local
Database
There are two options for the database:
- Local Docker Compose
- Remote PostgreSQL
Local Docker Compose
- Launch Docker Desktop
- Set the database environment variables:
DATABASE_URL=postgresql://admin:password@localhost:5432/db?schema=public
POSTGRES_USER=admin
POSTGRES_PASSWORD=password
POSTGRES_DB=db
Remote PostgreSQL
- Remove
dev:db
script from thescripts
inpackage.json
. - Set the database environment variable to your remote database URL:
DATABASE_URL=
Authentication
Create a new GitHub OAuth app with the following settings:
- Application Name:
Potion Local
- Homepage URL:
http://localhost:3000
- Authorization callback URL:
http://localhost:3000/api/auth/github/callback
Then set these environment variables:
GITHUB_CLIENT_ID
GITHUB_CLIENT_SECRET
AI
For AI, create a new OpenAI account and set:
OPENAI_API_KEY
File Uploads
For file uploads, create a new UploadThing account and set:
UPLOADTHING_TOKEN
Development
pnpm install
pnpm dev
pnpm migrate
: db migration in another terminal
Deployment
Potion is deployed on Coolify using a Dockerfile. You could deploy it anywhere you want (Vercel, Fly.io, etc.) without Docker.
Coolify
General settings:
- Build Pack:
Nixpacks
- Direction:
Redirect to non-www.
Build settings:
- Build Command:
pnpm build && pnpm db:deploy
- Start Command:
pnpm start
Advanced settings:
Enable Gzip Compression
: disabled
Environment variables:
- Set each environment variable with
Build Variable?
enabled.
CloudFlare DNS
- SSL/TLS: Full
App Architecture
Frontend
- Routes
app/
- Next.js 15+ App Routerapp/(dynamic)/(main)/
- Main app routesapp/(dynamic)/(public)/
- Public routesapp/(dynamic)/(admin)/
- Admin routes
- Components
components/
- Application-wide componentscomponents/hooks/
- Application-wide hookscomponents/ui/
- Reusable UI componentscomponents/editor/
- Editor components coupled to the applicationregistry/default/
- Core editor components from pro.platejs.orgcomponents/auth/
- Auth components
- Configuration
Backend
-
API tRPC
server/api/
- Default API layer using tRPCserver/api/middlewares/
- tRPC middlewaresserver/api/routers/
- tRPC routerstrpc/hooks.ts
- React query and mutation hooks
-
API Hono
server/hono/
- API layer using Honoserver/hono/middlewares/
- Hono middlewaresserver/hono/routes/
- Hono routes
-
Auth
server/auth/
- Authentication systemserver/auth/findOrCreateUser.ts
- User creationserver/auth/providers/github.ts
- GitHub OAuth
-
Database
prisma/schema.prisma
- Prisma schemaserver/db.ts
- Prisma with PostgreSQLserver/ratelimit.ts
- Rate limiting with Redis