How zseven-w/openpencil works
OpenPencil is an AI-native vector design editor centered on creating and modifying .op canvas documents. The principal workflow is a user prompt or selection-driven request, routed through chat-agent orchestration to a model, then applied to the editor and rendered on the canvas. Major documented branches include multi-agent work, style guides, code export, CLI/MCP access, design-system kits, and real-time collaboration. Paths for several documented subsystems are only supported at crate-directory level; the excerpts do not establish every runtime call between them.
Main entry points: chat_agent_loop.rs Agent orchestration · src Editor state · chat.rs Chat interface · runtime.rs Session host
Components 20
AI creation
- Agent orchestration
crates/op-chat-agent/src/chat_agent_loop.rs - Canvas tools
crates/op-chat-agent/src/chat_canvas_tools.rs - Agent teams
crates/op-chat-agent/src/design_agent_tools.rs
Canvas editor
- Chat interface
crates/op-editor-core/src/chat.rs - Editor engine
crates/op-engine-ffi/include/op_engine.h - Editor state
crates/op-editor-core/src - OP document
crates/op-collab/src/snapshot.rs
Design resources
- Style guides
crates/op-ai-skills/src/style_guide - Design systems
crates/op-ai-skills/src/design_systems.rs
Export and access
- Code generation
crates/op-codegen/src/ai/pipeline.rs - Platform export
crates/op-codegen/src/codegen_targets.rs - CLI and MCP
crates/op-cli/src
Live collaboration
- Collaboration controls
crates/op-editor-core/src/collab_routes.rs - Session host
crates/op-collab-host/src/runtime.rs - Sync protocol
crates/op-collab/src/protocol.rs - Relay service
crates/op-collab-relay-server/src/server.rs
Other components
- Designer
- Model provider
- External agent
- Collaborator
Connections 22
- Designer → Chat interface: prompts or selects
- Chat interface → Agent orchestration: starts requests
- Agent orchestration → Model provider: streams requests
- Model provider → Agent orchestration: returns tokens
- Agent orchestration → Canvas tools: invokes tools
- Canvas tools → Editor engine: modifies canvas
- Editor engine → Editor state: updates state
- Editor state → OP document: serializes document
- Agent orchestration → Agent teams: decomposes tasks
- Agent teams → Model provider: dispatches subtasks
- Chat interface → Style guides: applies styles
- Editor state → Design systems: uses kits
- Designer → CLI and MCP: runs commands
- External agent → CLI and MCP: requests design tools
- CLI and MCP → Editor state: controls editor
- Designer → Code generation: requests export
- Code generation → Platform export: produces code
- Designer → Collaboration controls: starts or joins
- Collaboration controls → Session host: controls session
- Session host → Sync protocol: synchronizes edits
- Session host → Relay service: connects through
- Collaborator → Relay service: joins session