Skip to content

Add Excalidraw MCP integration with inline diagram app rendering#18

Open
Amer-alsayed wants to merge 1 commit intomasterfrom
codex/implement-excalidraw-mcp-in-chat-app
Open

Add Excalidraw MCP integration with inline diagram app rendering#18
Amer-alsayed wants to merge 1 commit intomasterfrom
codex/implement-excalidraw-mcp-in-chat-app

Conversation

@Amer-alsayed
Copy link
Owner

Motivation

  • Enable the assistant to generate interactive Excalidraw diagrams from natural-language prompts by calling a local Excalidraw MCP server and embedding the returned app in chat.
  • Provide a reusable, lightweight stdio MCP client and adapter so the agentic tool flow can call MCP apps the same way other tools are used.
  • Improve UX by rendering MCP App payloads inline (iframe/cards) rather than forcing users to open external links.

Description

  • Add a small stdio MCP JSON-RPC client api/lib/mcp-client.js to spawn MCP servers, frame/unframe Content-Length JSON-RPC, send requests/notifications and capture stderr.
  • Add an Excalidraw MCP adapter api/lib/excalidraw-mcp.js that initializes MCP sessions, discovers/selects diagram tools (create_view / create_diagram fallback), calls the tool with a prompt, and normalizes returned app payloads (URL or HTML) for the frontend.
  • Register a new agent tool create_excalidraw_diagram in api/lib/tools.js and wire its executor to call the Excalidraw adapter via createExcalidrawDiagram.
  • Extend the agentic loop in api/chat.js to allow the new tool, instruct models to use it for diagram/flowchart requests, collect returned MCP app payloads, and emit them to clients via an SSE event mcp_app alongside sources/quality_metrics.
  • Update the frontend assets/js/app.js to parse mcp_app SSE events, persist mcpApps in chat history, and render inline MCP app cards/iframes (with safe URL sanitization and srcdoc fallback).
  • Add UI styles for embedded MCP app cards in assets/css/style.css and document setup/env variables in README.md (EXCALIDRAW_MCP_COMMAND, EXCALIDRAW_MCP_ARGS).

Testing

  • Ran unit/integration test suite with npm test which passed (17 tests, all ok).
  • Performed syntax checks with node -c on api/chat.js, api/lib/tools.js, api/lib/excalidraw-mcp.js, api/lib/mcp-client.js, and assets/js/app.js which reported no syntax errors.
  • Validation steps listed in the PR body (e.g. EXCALIDRAW_MCP_COMMAND/EXCALIDRAW_MCP_ARGS configuration) were exercised during local runs; automated test suite remained green.

Codex Task

@vercel
Copy link

vercel bot commented Feb 19, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
chaqgpt Ready Ready Preview, Comment Feb 19, 2026 1:22am

@chatgpt-codex-connector
Copy link

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant