Web-based Text Editor with MCP

This is a web-based code editor that has a chat interface connected to claude.

I want there to be an MCP interaface that enabled the claude coding agent to interact with the editor.

Architecture

This project uses a local MCP server architecture with three main components:

Browser Editor ←→ GraphQL/HTTP ←→ Editor MCP Server ←→ stdio ←→ Claude Desktop
                                         ↓
                                    MongoDB

Components:

• Browser Editor: Vike + React 19 + Monaco editor with vim mode
• Editor MCP Server: GraphQL API (Apollo Server) + Prisma + MongoDB
• MCP Interface: Exposes editor operations as MCP tools for Claude Desktop integration

The server provides a GraphQL API for the browser client while simultaneously acting as an MCP server that Claude Desktop can connect to via stdio. This enables Claude to read, edit, and manage files in the web editor.

Authentication

Authentication is handled by better-auth using the default schema with email/password support.

REST API Endpoints: Authentication operations are exposed at /api/auth/*:

• Sign up: POST /api/auth/sign-up/email
• Sign in: POST /api/auth/sign-in/email
• Sign out: POST /api/auth/sign-out

GraphQL Integration: GraphQL queries and mutations check context.userId for authorization. The user's session is validated by better-auth and the userId is passed to the GraphQL context.

Environment Variables:

• AUTH_SECRET: Secret key for session signing (required in production)
• CORS_ORIGINS: Comma-separated list of allowed origins for CORS

Client Library: The editor uses better-auth/react for authentication in the browser. See editor/lib/auth-client.ts for configuration.

---

Quick Start

📖 For detailed setup instructions and troubleshooting, see DEV_FLOW.md

Prerequisites

• Node.js 20+
• pnpm
• Docker & Docker Compose (for MongoDB)

Setup

1. Install dependencies:

pnpm install

2. Start MongoDB with Docker:

cd editor-mcp-server/docker
docker-compose up -d
cd ../..

3. Setup database schema:

cd editor-mcp-server
pnpm prisma:generate
pnpm prisma:push
cd ..

4. Run both projects:

pnpm dev

Access

• Editor: http://localhost:5173
• GraphQL Server: http://localhost:4001
• GraphQL Playground: http://localhost:4001/graphql

Available Scripts

• pnpm dev - Run editor + server in development mode
• pnpm build - Build both projects
• pnpm start - Run production builds
• pnpm test - Run server tests

Project Structure

.
├── editor/                  # Vike React 19 web app
│   ├── components/          # React components
│   │   ├── AuthModal.tsx    # Authentication modal
│   │   └── ThemeToggle.tsx  # Dark/light theme toggle
│   ├── lib/                 # Shared libraries
│   │   ├── apollo-client.ts # GraphQL client setup
│   │   ├── auth-client.ts   # Authentication client
│   │   ├── theme-context.tsx# Theme context provider
│   │   └── graphql/         # GraphQL queries & generated types
│   ├── pages/               # Vike pages
│   │   ├── index/           # Landing page
│   │   ├── signin/          # Sign in page
│   │   ├── signup/          # Sign up page
│   │   └── tree/            # Monaco editor with vim mode
│   ├── docker/              # Docker configs
│   └── package.json
│
├── editor-mcp-server/       # GraphQL + MongoDB server
│   ├── src/
│   │   ├── __tests__/       # Jest test suite
│   │   ├── graphql/         # Schema & resolvers
│   │   ├── utils/           # Snowflake IDs, hashing
│   │   ├── auth/            # Authentication config
│   │   └── index.ts         # Server entry
│   ├── prisma/
│   │   └── schema.prisma    # Database schema
│   ├── docker/              # Docker configs
│   │   ├── docker-compose.yml       # Dev MongoDB
│   │   ├── docker-compose.test.yml  # Test MongoDB
│   │   └── test-db.sh               # Test DB management
│   └── package.json
│
└── scratch/                 # Experimental MCP examples

Docker Services

Development Database

MongoDB for development runs on port 27017:

cd editor-mcp-server/docker
docker-compose up -d           # Start
docker-compose down            # Stop
docker-compose down -v         # Stop and remove data

Test Database

MongoDB for testing runs on port 27018 (ephemeral, in-memory):

cd editor-mcp-server/docker
./test-db.sh start    # Start test database
./test-db.sh clean    # Clean up test database

Tests automatically manage the test database lifecycle.