How spendolas/grip works
Grip lets an MCP agent inspect and edit a Figma canvas: the agent connects to the local bridge, which routes requests to the Figma plugin over WebSocket; the plugin performs the canvas work. The bridge supports both direct HTTP MCP and a local IPC/stdio path, and can serve multiple agents and Figma windows. The graph also preserves installation and update capabilities. Several connections are supported by README statements or source references; unsampled plugin internals and tool-specific execution details are not expanded.
Main entry points: mcp-server.ts MCP sessions · index.ts Bridge startup · ipc-server.ts IPC transport · ws-server.ts Plugin WebSocket
Components 15
Agent access
- MCP agent
Bridge runtime
- Bridge startup
src/bridge/src/index.ts - HTTP transport
src/bridge/src/http-server.ts - IPC transport
src/bridge/src/ipc-server.ts - Stdio proxy
src/bridge/src/proxy.ts - Socket transport
src/bridge/src/socket-transport.ts - MCP sessions
src/bridge/src/mcp-server.ts - Plugin WebSocket
src/bridge/src/ws-server.ts - Bridge contracts
src/bridge/src/types.ts
Figma operations
- Canvas tool catalog
src/bridge/src/tools.ts - Figma plugin
src/plugin/code.ts - Canvas serialization
src/bridge/src/serializer.ts
Install and updates
- Installer
src/bridge/src/install.ts - Update CLI
src/bridge/src/update-cli.ts - Update manager
src/bridge/src/update.ts
Connections 18
- MCP agent → HTTP transport: connects by HTTP
README.md - MCP agent → Stdio proxy: uses stdio
README.md - Bridge startup → HTTP transport: starts
src/bridge/src/index.ts - Bridge startup → IPC transport: starts
src/bridge/src/index.ts - Bridge startup → Plugin WebSocket: starts
src/bridge/src/index.ts - Bridge startup → Stdio proxy: runs
src/bridge/src/index.ts - HTTP transport → MCP sessions: creates sessions
src/bridge/src/http-server.ts - IPC transport → MCP sessions: creates sessions
src/bridge/src/ipc-server.ts - IPC transport → Socket transport: wraps sockets
src/bridge/src/ipc-server.ts - Stdio proxy → IPC transport: forwards MCP traffic
src/bridge/src/proxy.ts - MCP sessions → Canvas tool catalog: reads definitions
src/bridge/src/mcp-server.ts - MCP sessions → Plugin WebSocket: dispatches requests
src/bridge/src/mcp-server.ts - Canvas tool catalog → Figma plugin: defines plugin commands
src/bridge/src/tools.ts - Plugin WebSocket → Figma plugin: exchanges messages
README.md - Plugin WebSocket → Bridge contracts: uses contracts
src/bridge/src/ws-server.ts - MCP sessions → Update manager: checks updates
src/bridge/src/mcp-server.ts - Installer → Update manager: records install
src/bridge/src/install.ts - Update CLI → Update manager: runs update actions
src/bridge/src/update-cli.ts