协作式Markdown编辑器

一个基于MCPL协议的协作式Markdown编辑器,支持实时同步和AI代理编辑。

  • by anima-research
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 anima-research/mcpl-editor

使用说明

mcpl编辑器

一个协作式markdown编辑器,作为 多机组驾驶员执照 服务器。人类在CodeMirror 6 web UI中编写,AI代理通过MCPL连接以观察更改、编辑文档和聊天。

建筑

Browser (CodeMirror 6 + Chat)
    ↕ WebSocket /ws (Chronicle subscription sync)
Editor Server (Express + Chronicle store)
    ↕ WebSocket /mcpl (MCPL protocol)
Host / Agent (any MCPL host)

单流程服务:

  • / --Vue+CodeMirror 6编辑器,带实时同步和聊天面板
  • /ws --浏览器客户端的WebSocket(编辑+聊天)
  • /mcpl --用于MCPL代理连接的WebSocket
  • /api/* -用于文档、检查点和记录查询的REST API
  • /health --健康检查端点

数据模型

每一次编辑都是 编年史 记录。Chronicle分配一个单调的序列号——这是规范的操作顺序。无需OT/CRDT。

记录类型 目的
doc.op 字符级编辑(全文+客户端ID)
doc.checkpoint 完整文档快照(每100次操作)
chat.message 聊天消息(人工或代理)

浏览器客户端通过WebSocket订阅记录。新客户端从最新的检查点赶上。

MCPL功能

功能集 功能
editor.observe pushEvents, stateUpdate --收到更改通知
editor.read tools — get_document, get_outline
editor.write tools — edit_document (支持回滚)
editor.chat channels.publish, channels.observe --与人类聊天
editor.branches branches --从编辑器UI管理主机分支

编辑器使用 不透明检查点 (seq_N)--它管理自己的Chronicle存储,只通过以下方式向主机发送检查点引用 state/update.

本地运行

# Install dependencies
npm install
cd ui && npm install && cd ..

# Build the UI
npm run build

# Start the server
npm start -- --port 3100 --store ./data/my-doc --seed "# Hello World"

# Or with defaults (port 3100, store ./data/editor-store)
npm start

打开 http://localhost:3100 在您的浏览器中。将MCPL主机连接到 ws://localhost:3100/mcpl.

发展

# Terminal 1: backend (auto-reloads via tsx)
npm run dev -- --port 3100 --store ./data/dev --seed "# Dev Document"

# Terminal 2: frontend with hot reload (proxies API/WS to backend)
npm run dev:ui

Vite-dev服务器在端口5173和代理上运行 /api 和 /ws 到端口3100上的后端。

环境变量

变量 默认值 描述
PORT 3100 HTTP服务器端口(Railway会自动设置此端口)
STORE_PATH ./data/editor-store 编年史商店目录

CLI参数(--port, --store, --seed)优先于默认值,但 PORT env-var优先于 --port.

部署到铁路

  1. 将此仓库连接到铁路项目
  2. Railway将自动检测Node.js,运行 npm install + npm run build + npm start
  3. 集 STORE_PATH 到持久卷装载(例如。, /data/editor-store)
  4. 健康检查端点为 /health

注: 这 file: 依赖关系(@connectome/mcpl-core, chronicle)要求这些兄弟存储库在构建时可用。对于铁路,要么:

  • 对所有存款使用单回购结构
  • 将包发布到npm
  • 使用克隆deps的Dockerfile

Dockerfile(替代部署)

FROM node:20-slim

WORKDIR /app

# Clone dependencies (until published to npm)
RUN apt-get update && apt-get install -y git
RUN git clone https://github.com/anima-research/mcpl-core-ts.git /deps/mcpl-core-ts \
 && cd /deps/mcpl-core-ts && npm install && npx tsc
RUN git clone https://github.com/anima-research/chronicle.git /deps/chronicle \
 && cd /deps/chronicle && npm install

# Copy app
COPY package*.json ./
RUN sed -i 's|file:../mcpl-core-ts|file:/deps/mcpl-core-ts|' package.json \
 && sed -i 's|file:../chronicle|file:/deps/chronicle|' package.json
RUN npm install

COPY . .
RUN npm run build

EXPOSE 3100
CMD ["npm", "start"]

依赖项

包 来源 目的
@连接体/mcpl核心 本地 MCPL协议类型+WebSocket传输
编年史 本地 具有订阅的可分支记录存储
express npm HTTP服务器
ws npm WebSocket服务器
CodeMirror 6 npm 浏览器端标记编辑器
Vue 3 npm 前端框架

相关