A real-time collaborative rich text editor built with Next.js 16, Convex, Tiptap 3, and AI assistant capabilities from OpenAI, Anthropic, Google, and xAI.
Working demo here: https://cleo-editor.vercel.app/
- Full WYSIWYG editor powered by Tiptap 3 (ProseMirror-based)
- Formatting toolbar: bold, italic, underline, strikethrough, headings (H1-H3), lists (bullet, ordered, task), blockquote, code blocks, horizontal rules, links, images, tables
- Active state indicators and keyboard shortcuts
- Chat panel with streaming responses
- Multiple AI model support: GPT-5.6 Sol (default), GPT-5.6 Terra, GPT-5.6 Luna, Claude Opus 5, Claude Fable 5, Claude Sonnet 5, Grok 4.5, plus earlier GPT, Claude, and Gemini models
- Per-user model visibility settings; the chat selector defaults to GPT-5.6 Sol, GPT-5.6 Terra, GPT-5.6 Luna, and GPT-4o
- Search/replace and full-document edit formats
- Per-document chat history with clear functionality
- AI lock system to prevent concurrent AI requests
Cmd+K(macOS) /Ctrl+K(Windows, Linux) toggles focus between the document and the chat input
- Operational transformation via
@convex-dev/prosemirror-sync - Multi-user editing with conflict resolution
- Presence indicators showing online collaborators
- Document permissions (owner, editor, commenter, viewer)
- Automatic idle-save with 5-second debounce
- Server-side deduplication of saves
- Version timeline with restore capability
- AI edits tracked separately from manual saves
- Create, open, search, and delete documents
- Share documents by email with role assignment
- Inline title editing
- Text-anchored comments with position tracking
- Threaded replies
- Resolve/delete functionality
- HTML export with full formatting
- Plain text export
| Layer | Technology |
|---|---|
| Framework | Next.js 16 (App Router) |
| React | React 19 |
| Backend / DB / Auth | Convex |
| Auth Provider | Google OAuth (via Convex Auth) |
| Rich Text Editor | Tiptap 3.x |
| Real-time Collaboration | @convex-dev/prosemirror-sync |
| AI Providers | OpenAI, Anthropic, Google, xAI |
| Styling | Tailwind CSS 4 + shadcn/ui |
- Node.js 20.9+
- A Convex account (or use local development)
-
Clone the repository
-
Install dependencies:
npm install
-
Push Convex schema and functions:
npm run convex:push
-
Set up authentication:
npm run setup:auth npx convex env set SITE_URL http://localhost:3000 -
Start Convex development server (in one terminal):
npm run convex:dev
-
Start Next.js development server (in another terminal):
npm run dev
The app supports two auth methods:
- Email/Password — works immediately, no external setup needed
- Google OAuth — requires Google Cloud credentials:
npx convex env set AUTH_GOOGLE_ID <your-google-client-id> npx convex env set AUTH_GOOGLE_SECRET <your-google-client-secret>
Set one or more as Convex environment variables. Each provider's key is read at request time, so a model whose key is missing fails with a message naming the key instead of breaking the other providers:
npx convex env set OPENAI_API_KEY <your-key> # GPT-5.6 Sol / Terra / Luna, GPT-5.x, GPT-4o
npx convex env set ANTHROPIC_API_KEY <your-key> # Claude Opus 5, Fable 5, Sonnet 5, Claude 4.x
npx convex env set GEMINI_API_KEY <your-key> # Gemini 3.x, Gemini 2.5
npx convex env set XAI_API_KEY <your-key> # Grok 4.5/
├── app/ # Next.js App Router pages
│ ├── layout.tsx # Root layout with providers
│ ├── page.tsx # Home / document list
│ ├── sign-in/ # Sign-in page
│ └── editor/[documentId] # Editor page
├── components/
│ ├── ai/ # AI chat panel components
│ ├── editor/ # Tiptap editor components
│ ├── layout/ # Layout components (toolbar, etc.)
│ ├── modals/ # Modal dialogs
│ ├── comments/ # Comment system components
│ └── ui/ # shadcn/ui components
├── convex/
│ ├── schema.ts # Database schema
│ ├── documents.ts # Document CRUD
│ ├── permissions.ts # Permission management
│ ├── ai.ts # AI lock, messages
│ ├── diffs.ts # Version history
│ ├── comments.ts # Comments
│ ├── presence.ts # Presence (online users)
│ ├── prosemirrorSync.ts # Real-time collaboration
│ ├── http.ts # HTTP actions (AI streaming)
│ └── crons.ts # Scheduled jobs
├── hooks/ # React hooks
├── lib/ # Utility libraries
│ ├── ai/ # AI prompts, models, parsing
│ ├── editor/ # Editor configuration
│ └── export.ts # Document export
└── known-issues.md # Known limitations
npm run dev # Start Next.js dev server
npm run convex:dev # Start Convex dev server (local anonymous backend)
npm run convex:push # Push Convex functions once
npm run setup:auth # Generate and set JWT keys for auth
npm run test # Run tests
npm run test:watch # Run tests in watch mode
npm run typecheck # TypeScript type checking
npm run build # Production build
npm run lint # ESLintnpm testThe app has two deployment surfaces: the Convex backend (Convex Cloud) and the Next.js frontend (Vercel).
npx convex deployThen set the required environment variables on the production deployment:
npx convex env set SITE_URL https://<your-app>.vercel.app --prod
npx convex env set OPENAI_API_KEY <your-key> --prod
npx convex env set ANTHROPIC_API_KEY <your-key> --prod
npx convex env set GEMINI_API_KEY <your-key> --prod
npx convex env set XAI_API_KEY <your-key> --prodGenerate auth keys for production:
node scripts/setup-auth-keys.mjsIf using Google OAuth, also set AUTH_GOOGLE_ID and AUTH_GOOGLE_SECRET with --prod.
npm i -g vercel
vercel linkSet the Vercel environment variables (values come from your Convex production deployment):
vercel env add CONVEX_DEPLOYMENT production # prod:<name>
vercel env add NEXT_PUBLIC_CONVEX_URL production # https://<name>.convex.cloud
vercel env add NEXT_PUBLIC_CONVEX_SITE_URL production # https://<name>.convex.siteDeploy:
vercel --prodAfter the first deploy, update the Convex SITE_URL to match the Vercel production URL:
npx convex env set SITE_URL https://<your-app>.vercel.app --prodIf using Google OAuth, also add the production URL as an authorized redirect URI in the Google Cloud Console.
Private