MCPgee
MCPgee
MCPgeeMCPgee

Tool UI

v1.0.0•Developer Tools•stable

UI components for AI interfaces

aichatcomponentsllmmcp
Share:
691
Stars
0
Downloads
0
Weekly
0/5
View on GitHub

What is Tool UI?

Tool UI is a Model Context Protocol (MCP) server that allows AI assistants like Claude, Cursor, and VS Code to ui components for ai interfaces

UI components for AI interfaces

This server falls under the Developer Tools category on MCPgee, the world's largest MCP server directory with 33,000+ servers.

Features

  • UI components for AI interfaces

Use Cases

UI components for AI interfaces
Chat and LLM integration components
Customizable agent UI elements
assistant-ui

Maintainer

LicenseMIT
Languagetypescript
Versionv1.0.0
UpdatedMay 22, 2026
Statushealthy
Maintenanceactive

Works with

ClaudeOpenAIwindowsmacoslinux
View SourceBrowse All Servers

Installation

Manual Installation

npx tool-ui

Configuration

Configuration Details

Config File

claude_desktop_config.json

Performance

Response Metrics

Response Time< 200ms
ThroughputMedium

Resource Usage

Memory UsageLow
CPU UsageLow

How to Set Up and Use Tool UI

Tool UI is a component library for building rich AI chat interfaces, following a copy-paste model (similar to shadcn/ui) where components live directly in your codebase rather than as a versioned dependency. It provides schema-validated, Zod-typed React components that render structured AI tool call outputs — turning raw JSON payloads into interactive UI elements like data tables, code diffs, geo maps, approval cards, audio players, and social media post previews. Frontend developers building custom AI chat applications or agent UIs can use Tool UI to accelerate the visualization layer without hand-rolling every output renderer.

Prerequisites

  • Node.js 18 or later and npm or pnpm
  • A React project (Next.js, Vite, or similar) with Tailwind CSS configured
  • shadcn/ui initialized in the project (Tool UI builds on shadcn primitives)
  • An MCP-compatible client if using the server component, or a direct React integration for UI-only usage
1

Initialize shadcn/ui in your project

Tool UI builds on shadcn/ui. If not already initialized, set it up first.

npx shadcn@latest init
2

Browse the Tool UI component gallery

Visit the Tool UI GitHub repository or gallery to find the components you need. Each component has a copy-paste snippet — there is no global install command.

3

Copy a component into your project

Copy the desired component file (e.g. DataTable, CodeDiff, GeoMap) into your project's components directory. Each component is self-contained with its Zod schema.

# Example: copy the DataTable component
cp path/to/tool-ui/components/DataTable.tsx src/components/tool-ui/DataTable.tsx
4

Install required Radix and utility packages

Each component declares its peer dependencies. Install any missing Radix UI primitives and zod if not already present.

npm install zod @radix-ui/react-dialog @radix-ui/react-slot
# Or install all at once if starting fresh:
npm install zod @radix-ui/react-dialog @radix-ui/react-slot @radix-ui/react-tooltip
5

Add the MCP server to your client config

If using the Tool UI MCP server to expose components programmatically to an AI agent, add it to your claude_desktop_config.json.

{
  "mcpServers": {
    "tool-ui": {
      "command": "npx",
      "args": ["tool-ui"]
    }
  }
}
6

Render tool call outputs with components

Pass AI tool call JSON payloads to the appropriate Tool UI component. The Zod schema will validate the payload and the component will render the appropriate UI.

Tool UI Examples

Client configuration

claude_desktop_config.json entry for the Tool UI MCP server.

{
  "mcpServers": {
    "tool-ui": {
      "command": "npx",
      "args": ["tool-ui"]
    }
  }
}

Prompts to try

Example prompts and development tasks that leverage Tool UI components for AI chat interfaces.

- "Render the search results as a DataTable with sortable columns."
- "Show the code changes as a CodeDiff component with syntax highlighting."
- "Display the location data on a GeoMap component."
- "Use an ApprovalCard component to ask the user to confirm before proceeding."
- "Render the API response statistics in a StatsDisplay component."

Troubleshooting Tool UI

Zod schema validation errors when rendering a component

Check that the JSON payload from the AI tool call matches the component's Zod schema exactly. Tool UI components are strict about required fields — add any missing fields or use .optional() in a local schema fork.

Tailwind styles not applying to Tool UI components

Add the Tool UI component directory to the content array in your tailwind.config.js so Tailwind includes the classes used by those files during purge.

shadcn/ui primitives conflict with existing component versions

Tool UI is built on shadcn/ui's Radix primitives. Align the Radix package versions used by your existing shadcn components with those required by the Tool UI component to avoid duplicate context providers.

Frequently Asked Questions about Tool UI

What is Tool UI?

Tool UI is a Model Context Protocol (MCP) server that ui components for ai interfaces It connects AI assistants to external tools and data sources through a standardized interface.

How do I install Tool UI?

Follow the installation instructions on the Tool UI GitHub repository. Clone the repo, install dependencies, and add the server config to your AI client.

Which AI clients work with Tool UI?

Tool UI works with all major MCP-compatible AI clients including Claude Desktop, Claude Code, Cursor, VS Code (GitHub Copilot), Windsurf, and Cline.

Is Tool UI free to use?

Yes, Tool UI is open source and available under the MIT license. You can use it freely in both personal and commercial projects.

Learn More About MCP Servers

Getting Started with MCP

Set up your first MCP server in minutes

MCP Setup Guide

Configure MCP in Claude, Cursor & VS Code

All MCP Tutorials

18+ hands-on guides for developers

MCP FAQ

40+ answers about Model Context Protocol

Tool UI Alternatives — Similar Developer Tools Servers

Looking for alternatives to Tool UI? Here are other popular developer tools servers you can use with Claude, Cursor, and VS Code.

Ecc

★ 188.2k

The agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.

Javaguide

★ 155.8k

Java 面试 & 后端通用面试指南，覆盖计算机基础、数据库、分布式、高并发、系统设计与 AI 应用开发

Gemini CLI

★ 104.5k

A secure MCP server that wraps the Google Gemini CLI, allowing clients to query Gemini models using local OAuth sessions without requiring an API key. It provides tools for model interaction and diagnostics with built-in protection against command in

Awesome MCP Servers

★ 87.3k

⭐ Curated list of Model Context Protocol (MCP) servers - tools that extend Claude Desktop, Cursor, Windsurf, and other MCP clients with custom capabilities.

MCP Servers

★ 86.0k

Model Context Protocol Servers

CC Switch

★ 77.5k

A cross-platform desktop All-in-One assistant for Claude Code, Codex, OpenCode, OpenClaw, Gemini CLI & Hermes Agent. Only official website: ccswitch.io

Browse More Developer Tools MCP Servers

Explore all developer tools servers available in the MCPgee directory. Each server includes setup guides for Claude, Cursor, and VS Code.

Developer ToolsBrowse All Servers

Quick Config Preview

{ "mcpServers": { "tool-ui": { "command": "npx", "args": ["-y", "tool-ui"] } } }

Add this to your claude_desktop_config.json or .cursor/mcp.json

Read the full setup guide →

Ready to use Tool UI?

Browse our complete directory of 33,000+ MCP servers, read setup guides for your editor, and start building with the Model Context Protocol.

33,000+ ServersFree & Open SourceStep-by-Step Guides
Explore All ServersRead Our Guides