MCP UI by Flowbite

Build apps for ChatGPT, Gemini, Claude and any MCP clients (Cursor, Windsurf)

This is an open-source library of UI components, widgets and examples that you can use to build MCP apps that can work as ChatGPT apps, Gemini apps, Claude apps, and any other MCP client like Cursor or Windsurf. The examples include basic text components, radio, checkbox selection prompts, charts, e-commerce examples, qr code generation, tables, and more.

The components are based on the Flowbite UI framework and the SkyBridge framework for building MCP apps.

mcp-ui.mp4

• Live demo

MCP UI components

This is the full list of open-source components and widgets available:

• Basic text
• Radio group
• Checkbox group
• Line chart
• E-commerce products
• QR code
• Table data

Getting Started

To start developing locally, you need to have Node and Ngrok installed.

Prerequisites

• Node.js 24+
• HTTP tunnel such as ngrok

Local Development

Getting started locally is as easy as running the install command with your favourite package manager.

1. Install the local packages:

npm install

You can also use bun, pnpm or yarn.

2. Start a local server by running the following command:

npm run dev

This command starts an Express server on port 3000. This server packages:

• an MCP endpoint on /mcp (the app backend)
• a React application on Vite HMR dev server (the UI elements to be displayed in the host)
• a set of widget examples built with Flowbite UI components

3. Create a connector with Ngrok

Using Ngrok you need to create an accessible connector:

ngrok http 3000

This will create a NGROK_FORWARDING_URL like this:

https://3785c5ddc4b6.ngrok-free.app/mcp

Note: make sure you add the /mcp folder to the URL when registering an app.

4. Connect to AI clients like ChatGPT, Gemini, and Claude

Check out the following guides to learn how to integrate with each AI client:

Install in ChatGPT

1. Navigate to Settings > Connectors
2. Scroll down and click on Advanced Settings
3. Enable Developer mode
4. Go back to the Settings > Connectors page, and click on Create in the Browser Connectors section
5. Add a custom connector with the MCP Server URL: [NGROK_FORWARDING_URL]/mcp
6. Click on Create to add the MCP server as a Connector
7. To use your newly created connector in the chat, click + then More and select it.

Install in Claude Web

1. Navigate to Settings > Connectors
2. Locate the Connectors section
3. Click Add custom connector at the bottom of the section
4. Add your connector's remote MCP server URL: [NGROK_FORWARDING_URL]/mcp
5. Finish configuring your connector and click Add
6. To enable connectors, use the Search and tools button on the lower left of the chat.

Install in Gemini CLI

Option 1 — Configure via the Gemini CLI

Run the following command in your terminal:

gemini mcp add --transport http <server-name> "[NGROK_FORWARDING_URL]/mcp"

Use /mcp in the Gemini CLI terminal to view your recently added MCP server status and discovered tools.

Option 2 — Configure via settings.json directly

MCP servers used by Gemini CLI are configured in settings.json. More details here.

1. Open ~/.gemini/settings.json (user) or .gemini/settings.json (project).
2. Add your server under mcpServers:

{
  "mcpServers": {
    "<server-name>": {
      "httpUrl": "[NGROK_FORWARDING_URL]/mcp"
    }
  }
}

3. Restart the Gemini CLI (or start a new session), then run /mcp to confirm it's connected.

Install in Cursor

Cursor stores MCP servers configuration through a mcp.json file. More details here.

1. Open (or create) your mcp.json file.
2. Add this MCP server right under mcpServers:

{
  "mcpServers": {
    "<server-name>": {
      "type": "http",
      "url": "[NGROK_FORWARDING_URL]/mcp"
    }
  }
}

3. Once saved, Cursor Agent automatically uses this MCP server tools when relevant.

Install in VS Code

VS Code stores MCP servers configuration in a mcp.json file. More details here.

1. Open (or create) your .vscode/mcp.json file.
2. Add this MCP server under servers:

{
  "servers": {
    "<server-name>": {
      "type": "http",
      "url": "[NGROK_FORWARDING_URL]/mcp"
    }
  }
}

3. Once you have added the MCP server, you can use its tools in the Chat view (⌃⌘I).

Install in Claude Code

MCP servers added to Claude Code are stored in ~/.claude.json. More details here.

To install this MCP server, run the following command in your terminal:

claude mcp add --transport http <server-name> "[NGROK_FORWARDING_URL]/mcp"

In the Claude Code terminal UI, use /mcp to view actively connected MCP servers. You should see your recently connected MCP server and can use it right away.

Install in Mistral AI

1. Open the side panel and expand Intelligence > Connectors
2. Click + Add Connector on the right side of the page
3. In the MCP Connectors directory, click the Custom MCP Connector tab
4. Enter a Connector Name and the following Connector Server URL: [NGROK_FORWARDING_URL]/mcp
5. Finish configuring your connector and click Create
6. To use the connector, click the Tools button below the chat input and enable it in the Connectors section.

Install in Codex

MCP configuration for Codex is stored in ~/.codex/config.toml and is shared between the CLI and the IDE extension.

Option 1 — Configure via the Codex CLI

Run the following command in your terminal:

codex mcp add <server-name> --url "[NGROK_FORWARDING_URL]/mcp"

Option 2 — Modify the Codex config file directly

1. Open ~/.codex/config.toml.
2. Add the following snippet to your config.toml file:

[mcp_servers."<server-name>"]
url = "[NGROK_FORWARDING_URL]/mcp"

In the Codex terminal UI, use /mcp to view actively connected MCP servers. You should see your recently connected MCP server and can use it right away.

Theming

Flowbite theming allows you to update the appearance of the UI components by updating the index.css styles.

Here are a couple of predefined styles (default, minimal, enterprise, playful, and mono) from Flowbite:

/* choose one of the following */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
@import "flowbite/src/themes/default";

/* MINIMAL THEME
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import "flowbite/src/themes/minimal";
*/

/* ENTERPRISE THEME
@import url('https://fonts.googleapis.com/css2?family=Shantell+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import "flowbite/src/themes/enterprise";
*/

/* PLAYFUL THEME
@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Code:ital,wght@0,300..800;1,300..800&display=swap');
@import "flowbite/src/themes/playful";
*/

/* MONO THEME
@import "flowbite/src/themes/mono";
*/

Resources

• Apps SDK Documentation
• Model Context Protocol Documentation
• Alpic Documentation
• Flowbite UI components
• Tailwind CSS