Summary

Deepen the integration with excalidraw-mcp beyond the current minimal config (a single remote URL in route.ts). The goal is to make diagram generation a showcase feature of this template — on par with the todo list — so developers see how MCP Apps work with CopilotKit's agent state pattern.

Current State

The runtime already points to https://mcp.excalidraw.com as a default MCP server (apps/app/src/app/api/copilotkit/route.ts:24-29), but:

• There's no UI affordance showing users they can ask the agent to draw diagrams
• No example prompts or suggestions mention diagramming
• The serverId is a generic "example_mcp_app" rather than something descriptive
• No documentation on what the Excalidraw MCP integration enables

Proposed Changes

1. Rename the MCP server ID from "example_mcp_app" to "excalidraw" for clarity
2. Add diagramming-related chat suggestions in use-example-suggestions.tsx (e.g. "Draw an architecture diagram of this app", "Sketch out a flowchart for the todo lifecycle")
3. Add a section to the README explaining the Excalidraw MCP integration and what users can do with it
4. Optional: local dev support — add instructions or a script for running excalidraw-mcp locally via npx or Docker, so the demo works offline / without the hosted endpoint

Why

This repo is a template for developers evaluating CopilotKit. Showing MCP Apps integration with a compelling visual tool like Excalidraw makes the demo significantly more impressive and helps developers understand the MCP Apps pattern.

References

• excalidraw-mcp repo: https://github.com/excalidraw/excalidraw-mcp
• Hosted endpoint: https://mcp.excalidraw.com