Tool UI is a collection of React components designed to render tool payloads that models pass into AI chat interfaces. Instead of dumping raw JSON into a conversation, these components present approvals, forms, data tables, charts, media cards, receipts, and other interactive UI elements that make tool interactions understandable and actionable within chat contexts. This MCP server would host or serve the UI assets and provide endpoints or a front-end bundle that the MCP runtime can render alongside other tools. The emphasis is on transforming tool payloads into user-friendly interfaces that support validation, composition, and guided user actions.

To use these capabilities, integrate the server's UI bundle into your MCP-enabled environment. The UI will interpret incoming tool payloads, render appropriate components (e.g., Option List, Question Flow, Data Table, Chart, Image Gallery, Plan/Progress components), and handle user input back to the tool or agent. Look for the built-in presets and Zod schemas that validate payloads, ensuring that tool invocations present consistent structures and validation feedback to users. When a model suggests a tool call, the UI will render the corresponding component set, collect user input where needed (approval, configuration, or data entry), and return the result to the tool or agent pipeline.

Prerequisites:

• Node.js (v14+ or newer) and npm/yarn installed
• Basic familiarity with MCP workflows and tool calls

1. Install dependencies

• If this project is published as a package, install via npm or yarn in your workspace (example): npm install

  or

  yarn install

2. Configure environment

• Ensure port and environment variables are set as needed. Example: PORT=3000 NODE_ENV=production

3. Start the server

• Run the server using Node.js (as defined in the repository): node server.js

4. Verify the server is running

• Open http://localhost:3000 in a browser or run a quick curl check: curl -sI http://localhost:3000

5. Integrate with MCP runtime

• Point your MCP runtime to use the provided mcp_config entry and ensure your chat UI or agent can render the tool payloads via this server.

Note: If the project provides a build step (e.g., npm run build), run that prior to starting the server to produce static assets or a distributable bundle.

Tips and considerations:

• The UI components rely on payload schemas (e.g., Zod) for validation; ensure your tool payloads conform to these schemas to avoid rendering errors.
• Explore the Gallery and Documentation links in the repository or project site to understand available components (Option List, Question Flow, Data Table, Chart, Image Gallery, Plan, etc.).
• If you encounter CORS issues when embedding in a chat interface, enable appropriate CORS headers on the server or configure a proxy in your MCP environment.
• Keep the PORT and environment variables aligned with your deployment environment (production vs. development).
• For debugging, check server logs for payload validation errors and adjust your tool payloads accordingly.