MCP Ui Components

Flowbite的MCP用户界面

为ChatGPT、Gemini、Claude和任何MCP客户端（Cursor、Windsurf）构建应用程序

这是一个开源的UI组件、小部件和示例库，可用于构建MCP应用程序，这些应用程序可以作为ChatGPT应用程序、Gemini应用程序、Claude应用程序和任何其他MCP客户端（如Cursor或Windsurf）使用。示例包括基本文本组件、收音机、复选框选择提示、图表、电子商务示例、二维码生成、表格等。

https://github.com/user-attachments/assets/ae139fb3-a2ec-436b-b4a6-9b25064918cd

• 现场演示

MCP UI组件

以下是可用的开源组件和小部件的完整列表：

• 基本文本
• 单选按钮组
• 复选框组
• 折线图
• 电子商务产品
• 二维码
• 表格数据

入门指南

要开始在本地开发，您需要安装Node和Ngrok。

先决条件

• Node.js 24+
• HTTP隧道，例如 吸烟

本地开发

在本地开始就像使用您最喜欢的软件包管理器运行install命令一样简单。

1.安装本地软件包：

npm install

你也可以使用包子、pnpm或纱线。

2.运行以下命令启动本地服务器：

npm run dev

此命令在端口3000上启动Express服务器。此服务器打包：

• MCP端点位于 /mcp （应用程序后端）
• Vite HMR开发服务器上的React应用程序（要在主机中显示的UI元素）
• 一组使用Flowbite UI组件构建的小部件示例

3.使用Ngrok创建连接器

使用Ngrok，您需要创建一个可访问的连接器：

ngrok http 3000

这将创建一个NGROK_FORWARDING_URL，如下所示：

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

注意：请确保添加 /mcp 注册应用程序时，将文件夹添加到URL。

4.连接到ChatGPT、Gemini和Claude等AI客户端

查看以下指南，了解如何与每个AI客户端集成：

Install in ChatGPT

1. 导航到 设置>连接器
2. 向下滚动并单击 高级设置
3. 启用 开发者模式
4. 回到 设置>连接器 页面，然后单击 创建 在“浏览器连接器”部分
5. 使用MCP服务器URL添加自定义连接器： [NGROK_FORWARDING_URL]/mcp
6. 点击 创建 将MCP服务器添加为连接器
7. 要在聊天中使用新创建的连接器，请单击 + 然后 更多 并选择它。

Install in Claude Web

1. 导航到 设置>连接器
2. 定位 连接器 部分
3. 点击 添加自定义连接器 在该部分的底部
4. 添加连接器的远程MCP服务器URL： [NGROK_FORWARDING_URL]/mcp
5. 完成连接器配置并单击 添加
6. 要启用连接器，请使用 搜索和工具 聊天室左下角的按钮。

Install in Gemini CLI

选项1——通过Gemini CLI进行配置

在终端中运行以下命令：

gemini mcp add --transport http  "[NGROK_FORWARDING_URL]/mcp"

使用 /mcp 在Gemini CLI终端中查看最近添加的MCP服务器状态和发现的工具。

选项2——直接通过settings.json配置

Gemini CLI使用的MCP服务器在settings.json中配置。更多详情 这里.

1. 打开 ~/.gemini/settings.json （用户）或 .gemini/settings.json （项目）。
2. 在下面添加您的服务器 mcpServers:

{
  "mcpServers": {
    "": {
      "httpUrl": "[NGROK_FORWARDING_URL]/mcp"
    }
  }
}

1. 重新启动Gemini CLI（或启动新会话），然后运行 /mcp 确认它已连接。

Install in Cursor

Cursor通过以下方式存储MCP服务器配置 mcp.json 文件。更多详情 这里.

1. 打开（或创建）您的 mcp.json 文件。
2. 在下面添加此MCP服务器 mcpServers:

{
  "mcpServers": {
    "": {
      "type": "http",
      "url": "[NGROK_FORWARDING_URL]/mcp"
    }
  }
}

1. 保存后，Cursor Agent会在相关时自动使用此MCP服务器工具。

Install in VS Code

VS Code将MCP服务器配置存储在 mcp.json 文件。更多详情 这里.

1. 打开（或创建）您的 .vscode/mcp.json 文件。
2. 在以下位置添加此MCP服务器 servers:

{
  "servers": {
    "": {
      "type": "http",
      "url": "[NGROK_FORWARDING_URL]/mcp"
    }
  }
}

1. 添加MCP服务器后，您可以在聊天视图（⌘I）中使用其工具。

Install in Claude Code

添加到Claude Code的MCP服务器存储在 ~/.claude.json.更多详情 这里.

要安装此MCP服务器，请在终端中运行以下命令：

claude mcp add --transport http  "[NGROK_FORWARDING_URL]/mcp"

在Claude Code终端UI中，使用 /mcp 查看活动连接的MCP服务器。您应该看到最近连接的MCP服务器，并可以立即使用它。

Install in Mistral AI

1. 打开侧板并展开 智能>连接器
2. 点击 +添加连接器 在页面的右侧
3. 在MCP连接器目录中，单击 定制MCP连接器 标签
4. 输入连接器名称和以下连接器服务器URL： [NGROK_FORWARDING_URL]/mcp
5. 完成连接器配置并单击 创建
6. 要使用连接器，请单击 工具 单击聊天输入下方的按钮，然后在连接器部分启用它。

Install in Codex

Codex的MCP配置存储在 ~/.codex/config.toml 并且在CLI和IDE扩展之间共享。

选项1——通过Codex CLI进行配置

在终端中运行以下命令：

codex mcp add  --url "[NGROK_FORWARDING_URL]/mcp"

选项2——直接修改Codex配置文件

1. 打开 ~/.codex/config.toml.
2. 将以下代码段添加到您的 config.toml 文件：

[mcp_servers.""]
url = "[NGROK_FORWARDING_URL]/mcp"

在Codex终端UI中，使用 /mcp 查看活动连接的MCP服务器。您应该看到最近连接的MCP服务器，并可以立即使用它。

支持主题

Flowbite主题 允许您通过更新来更新UI组件的外观 index.css 风格。

以下是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";
*/

资源

• 应用SDK文档
• 模型上下文协议文档
• Alpic文档
• Flowbite UI组件
• 顺风 CSS