toolhive-cloud-ui

ToolHive Cloud UI is a lightweight frontend for visualizing MCP (Model Context Protocol) servers that are running in your own infrastructure. It connects to the ToolHive Registry API to discover MCP servers and presents them in a browsable catalog, enabling easy URL copying and sharing for integration with AI agents. The UI provides a responsive interface to explore server contexts, status, and metadata, making it simpler to manage multiple MCP instances from a single place. To get started locally, install dependencies and run the development server, then open the app in your browser to browse the MCP server catalog and copy integration URLs as needed.

The available tooling centers around the frontend development workflow. Use the standard Node.js-based commands described in the project’s documentation to run the app in development or production-like environments. The UI itself does not host MCP servers; instead, it visualizes servers that are registered in the MCP Registry and provides convenient access points for embedding or connecting to those MCP servers via generated URLs and metadata.

Prerequisites:

• Node.js 20+ (recommended) and a package manager like pnpm
• Git

1. Clone the repository:

git clone https://github.com/stacklok/toolhive-cloud-ui.git
cd toolhive-cloud-ui

2. Install dependencies:

pnpm install

3. Configure environment (optional for development):

• Copy environment variables template if available

cp .env.example .env.local

4. Run the development server:

pnpm dev

5. Open the app in your browser:

http://localhost:3000

Notes:

• The app relies on the ToolHive Registry API for MCP server data. Ensure API endpoints are reachable or adjust environment variables to point to your registry.
• For a production build, use the standard build/start commands listed in the repository’s developer guide.

Tips and considerations:

• This is a frontend visualization tool for MCP servers; it does not host MCP servers itself. Ensure you have access to a functioning MCP Registry API.
• If you use Docker, Kind, or Kubernetes for hosting the registry or related services, consult the registry and deployment docs for integrating ToolHive Cloud UI into your stack.
• Environment variables (when provided) can customize API base URLs, authentication behavior, and feature toggles. Check the README or .env.example for relevant keys.
• If you encounter CORS or network-related issues while developing, verify that the registry API URL is correctly configured and reachable from your development environment.