Full-fledged Web Editor

Overview

I built the core infrastructure for a full-fledged web editor designed to be AI-native from day one. The key decision was building an AI chat interface backed by the Model Context Protocol (MCP), which gave us a standardized tool layer where adding a new AI feature was as simple as registering a new tool definition.

Every editing capability (text formatting, layout manipulation, asset management) was exposed as an MCP tool, so the AI assistant had the same level of control as the manual UI. This meant AI features could ship in hours instead of weeks, since the tool layer handled all the plumbing between the AI and editor internals.

I also worked heavily on the editing UX, the rendering workflow that turns editor state into visual output, and the state management that keeps everything in sync across AI-initiated and user-initiated changes.

Key Features

AI chat interface with MCP-based tool layer for natural language control over all editor features
Modular tool registration: new capabilities are just MCP tool definitions with minimal boilerplate
Rich editing UX with drag-and-drop, inline formatting, and context-sensitive property panels
Real-time rendering that turns editor state into pixel-perfect visual output
Transactional state management with undo/redo across both AI and manual edits
Asset management with drag-and-drop upload, organization, and search
Collaborative editing with conflict resolution and presence awareness
Plugin architecture for third-party integrations through the same MCP tool interface

Tech Stack

React

Editor UI with virtualized rendering for large documents and optimized update cycles for smooth interactions

TypeScript

Strict types across the codebase with generated types for MCP tool schemas, keeping AI interactions type-safe

MCP

Standardized interface between the AI layer and editor capabilities, making new feature development fast

AI Chat

Conversational interface with streaming responses, context management, and multi-turn support for complex editing tasks

State Management

Custom layer built on immutable data structures with transactional updates, middleware hooks, and full operation history

Architecture

Command-sourced architecture: all mutations, whether from the UI or AI, flow through a unified command bus. The MCP layer wraps each editor capability as a tool with a typed schema, so the AI can discover and invoke any feature programmatically. The rendering pipeline subscribes to state changes and only updates affected visual regions. A middleware layer between the command bus and state store handles validation, normalization, and side effects like analytics and collaboration sync.

Challenges & Solutions

Designing the MCP tool layer for rapid feature velocity

The challenge was making an abstraction powerful enough for any editor operation but simple enough that a new feature could ship in a single PR. I designed a declarative tool registration API where each tool defines its schema, validation rules, and execution handler. The system auto-generates AI-readable descriptions, validates parameters, manages execution context, and reports results back to the chat. Feature developers only write the business logic.

State consistency across AI and manual editing paths

When both a user and an AI can modify the same document at the same time, state consistency gets tricky. AI operations are multi-step and async, while manual edits are immediate. I implemented optimistic updates with conflict detection: manual edits apply instantly, AI operations go through a staging mechanism with automatic rebasing if the document changed during AI processing. This prevents AI edits from overwriting user changes.