MCP Kkebi

You will learn how to run and use an MCP server that enables interactive widgets and AI integrations in ChatGPT and Claude. This server provides a React-based UI toolkit, fast development cycles, and easy deployment through Manufact Cloud, making it straightforward to add new widgets and tools for conversational experiences.

How to use

You can run the MCP server locally, connect it to your AI assistants, and load interactive widgets and tools in your conversations. The server exposes resources such as widgets that render in the client and tools that perform actions within your chat flows. Use the server to present welcome messages, counters, and other interactive experiences directly inside your preferred MCP client.

How to install

Prerequisites you need before starting include Node.js and npm installed on your system. You will also need access to a terminal or command prompt.

# 1. Clone the project repository
git clone https://github.com/mimsut/mcp_kkebi.git
cd mcp_kkebi

# 2. Install dependencies
npm install

# 3. Build the project (transpile TypeScript and prepare the server)
npm run build

# 4. Run in development mode (hot reload)
npm run dev

# 5. Start the production server
npm start

Configuration and connecting to clients

You can connect this MCP server to Claude Desktop or ChatGPT by configuring the MCP server entry points in your client setup. The server can be started as a local process and exposed through a command that points to the compiled server file.

{
  "type": "stdio",
  "name": "kkebi_mcp",
  "command": "node",
  "args": [
    "/Users/user/Downloads/b_ru8Xi2QdWzH-1771717682115/my-mcp-app/dist/index.js"
  ]
}

Claude Desktop integration

To connect Claude Desktop to your MCP server, add a configuration entry that launches the MCP server as a subprocess. This example shows how to wire the server into Claude Desktop on macOS. After creating the config, restart Claude Desktop to apply the changes.

# macOS example (Claude Desktop)
# Add to ~/Library/Application Support/Claude/claude_desktop_config.json
{
  "mcpServers": {
    "my-mcp-app": {
      "command": "node",
      "args": [
        "/Users/user/Downloads/b_ru8Xi2QdWzH-1771717682115/my-mcp-app/dist/index.js"
      ]
    }
  }
}

ChatGPT 연결하기

To use ChatGPT with the MCP server, add your MCP server as a custom action or integrate it into your GPT workflow. Point the server URL to your local or deployed MCP URL and specify the MCP protocol to enable model-context interactions.

Widgets and how to load them

Load widgets by referencing their identifiers in your chat flow. Widgets render in the client side and can be enhanced with props and state management to create rich, interactive experiences.

Example widget usage: widget://example and widget://counter load simple welcome messages and interactive counters, respectively. Each widget is defined in the resources section and exposes a React-based UI.

Tools and utilities

The MCP server includes tools that you can call from interactions. One example is the greet tool, which displays a welcome message to users.

Example tool usage for greet: provide a required name parameter to receive a friendly greeting.

Testing locally

You can test the server locally by running the development script and using an MCP Inspector in a separate terminal to inspect tools, resources, and widget previews. The inspector enables live testing and hot reloading when you modify code.

# Development mode
npm run dev

# Open MCP Inspector in another terminal
npx @modelcontextprotocol/inspector node dist/index.js

Adding new widgets

Create a new directory under resources for your widget, define its props in a types.ts, implement the React component in widget.tsx, and register a resource handler in the server to serve the widget as an MCP resource.

Available tools

greet

Displays a welcome message to the user by taking a required name parameter.