Learn how create and install an MCP application that can be used to build apps for ChatGPT, Claude, Gemini, and any other MCP client and leverage the UI components from Flowbite
MCP UI is the standard SDK that you can use to deliver MCP apps which can be used as applications for ChatGPT, Gemini, Claude, and other MCP clients like Cursor or Windsurf. Model Context Protocol (MCP) is part of the Agentic AI Foundation donated by Anthropic in 2025 and it is one of the fastest growing open-source projects in the AI category with over 100 million monthly SDK downloads.
In this guide you will learn how to create an MCP app using Flowbite and Skybridge and start developing application for ChatGPT, Claude, Gemini and any other AI client that uses the MCP standard. After setting up the project you’ll be able to integrate any UI component and theme from the Flowbite documentation inside your MCP application.
We decided to use the Skybridge framework to build MCP apps and we are using the UI components from Flowbite.
Create new MCP app
#
The first step is to create a new MCP application and start developing locally:
- Download or clone the MCP UI Starter repository:
git clone https://github.com/themesberg/mcp-ui-starter.git
- Install dependencies using NPM, PNPM, Yarn or Bun:
- Run a local development server:
npm run dev --use-forwarded-host
This command will run a local server on http://localhost:3000 and will create the following:
- the main MCP server on the
/mcpendpoint - a collection of widgets built with Flowbite and React used as tools
Connect with NGROK
#
In order to expose the server to AI clients such as ChatGPT, Gemini or Claude we need to host the MCP server.
Install ngrok on your computer using Homebrew and run the following command:
This will host the MCP server on a URL similar to this one:
# this is just an example
https://3785c5ddc4b6.ngrok-free.app/mcp
You will now be able to use this URL to create an application for ChatGPT, Claude, Gemini, and for any MCP clients.
Don’t forget to add the /mcp endpoint to the URL generated by NGROK.
Install on AI providers
#
Use the following guides to connect your MCP app to major AI providers like ChatGPT, Claude, and Gemini.
ChatGPT apps
#
Make sure that you have a paid plan to create an application on ChatGPT.
- Go to Settings > Connectors
- Scroll down and click on “Advanced Settings”
- Enable Developer mode
- Go back to the Settings > Connectors page, and click on “Create in the Browser Connectors”
- Add a custom connector with the MCP Server URL:
[NGROK_FORWARDING_URL]/mcp - Click on “Create to add the MCP server as a Connector”
- To use your connector in the chat, click “+”” then “More” and select it.
Claude Web
#
Make sure that you have a paid plan to create an application on Claude.
- Go to Settings > Connectors
- Find the “Connectors” section
- Click on “Add custom connector” at the bottom of the section
- Add your connector’s remote MCP server URL: [NGROK_FORWARDING_URL]/mcp
- Finish configuring your connector and click “Add”
- To enable connectors, use the “Search and tools button” on the lower left of the chat interface.
Gemini CLI
#
Run the following command in your terminal:
gemini mcp add --transport http
Use /mcp in the Gemini CLI terminal to view your recently added MCP server status and discovered tools.
Cursor
#
Add your MCP server to Cursor by opening the mcp.json file and configure it using mcpServers.
{
"mcpServers": {
"
"type": "http",
"url": "[NGROK_FORWARDING_URL]/mcp"
}
}
}
VS Code
#
To add your MCP server to VS Code you need to open the .vscode/mcp.json file and configure servers.
{
"servers": {
"
"type": "http",
"url": "[NGROK_FORWARDING_URL]/mcp"
}
}
}
Claude Code
#
MCP servers are stored at ~/.claude.json in Claude Code. Use the CLI to add your MCP app:
claude mcp add --transport http
Mistral AI
#
- Open the side panel and expand Intelligence > Connectors
- Click “+ Add Connector” on the right side of the page
- In the MCP Connectors directory, click the “Custom MCP Connector tab”
- Enter a name for the connector and the following server URL:
[NGROK_FORWARDING_URL]/mcp - Finish configuring your connector and click “Create”
- To use the connector, click the “Tools” button below the chat input and enable it in the “Connectors” section.
Codex
#
MCP servers in Codex are located at ~/.codex/config.toml and you can install your MCP app using the CLI:
codex mcp add
Create a widget
#
Creating a new widget means setting up the server side where we can set up the input data that comes from the AI client (which is the user prompt itself) and the web component which is the front-end widget where we show the output (such as a chart, data table, or just text).
Server component
#
If you want to create a new widget yourself, then first create a new file inside the server/src/widgets folder and add the following code that creates a basic server side tool which returns a string as output:
-
widgets/basic-text-server.tsx
import { z } from "zod";
// Basic Answer widget configuration
export const basicTextWidget = {
name: "basic-text" as const,
metadata: {
description: "Basic Text",
},
toolConfig: {
description: "Show a text message based on a question.",
inputSchema: {
question: z.string().describe("The user's question."),
},
},
handler: async () => {
try {
const answer = "Hello, world!";
return {
structuredContent: { answer },
content: [],
isError: false,
};
} catch (error) {
return {
content: [{ type: "text" as const, text: `Error: ${error}` }],
isError: true,
};
}
},
};
Web component
#
Then create the front-end part of the widget inside the web/src/widgets folder where you can use React code to create the markup of the widget and use the server data, which in this case is a basic text coming from our server component:
-
web/src/widgets/basic-text.tsx
import "@/index.css";
import { mountWidget } from "skybridge/web";
import { useToolInfo } from "../helpers";
function BasicTextWidget() {
const { input, output } = useToolInfo();
if (!output) {
return (
);
}
return (
Question: {input.question}
Answer: {output.answer}
);
}
export default BasicTextWidget;
mountWidget(
Finally, register the widget in the server.ts file:
import { McpServer } from "skybridge/server";
import { basicTextWidget } from "./widgets/basic-text-server.js";
const server = new McpServer(
{
name: "mcp-ui-components",
version: "0.0.1",
},
{ capabilities: {} }
)
.registerWidget(
basicTextWidget.name,
basicTextWidget.metadata,
basicTextWidget.toolConfig,
basicTextWidget.handler
)
Customize theming
#
Flowbite allows you to easily customize the appearance of the UI components from the MCP apps by using the theming options based on CSS variables from Tailwind.
Select one of the predefined themes from Flowbite or customize the variables yourself in the index.css file:
/* 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";
*/