diff --git a/README.md b/README.md index 9029747..377b005 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,7 @@ # MCP UI Kit -Build interactive React UIs for MCP tools. -## Why? +Build interactive React UIs for MCP tools. The [Model Context Protocol (MCP)](https://modelcontextprotocol.io/) enables AI assistants to interact with external tools and data. The [mcp-ui](https://github.com/anthropics/mcp-ui) project extends this with rich, interactive UI components that can be rendered directly in the AI chat. @@ -143,6 +142,20 @@ function StockDashboard() { } ``` +## MCP UI Inspector + +The MCP UI Inspector is a developer tool for testing MCP servers with UI capabilities. It provides a visual interface to: + +- **Connect to MCP servers** — Enter your server URL and establish a connection +- **Browse available tools** — See all registered tools and their descriptions +- **Configure parameters** — Fill in tool input schemas with a form UI or raw JSON +- **Execute tools** — Run tools and see both text and UI responses +- **Preview UI components** — View your React components rendered in real-time with full interactivity + +![MCP UI Inspector](docs/mcp-ui-inspector.png) + +The inspector makes it easy to iterate on your UI components without needing a full AI chat client. You can test `sendPrompt()` and `callTool()` interactions, verify props are passed correctly, and debug your components in isolation. + ## API ### Server (`mcp-ui-kit/server`) diff --git a/docs/mcp-ui-inspector.png b/docs/mcp-ui-inspector.png new file mode 100644 index 0000000..5bed657 Binary files /dev/null and b/docs/mcp-ui-inspector.png differ diff --git a/nanobot.db b/nanobot.db index 8b1f373..1ae7308 100644 Binary files a/nanobot.db and b/nanobot.db differ diff --git a/package.json b/package.json index 1da743c..ff3c8ee 100644 --- a/package.json +++ b/package.json @@ -13,11 +13,13 @@ "dev:all": "npm run dev:server & npm run dev:library & npm run dev", "build": "npm run build --workspace=@mcp-ui-kit/inspector", "start": "npm run start --workspace=demo-server", + "start:prod": "NODE_ENV=production npm run start --workspace=demo-server", "watch": "npm run watch --workspace=demo-server", "watch:library": "npm run watch --workspace=@mcp-ui-kit", "watch:inspector": "npm run watch --workspace=@mcp-ui-kit/inspector", "inspector": "npx @modelcontextprotocol/inspector", "nanobot": "dotenv -e .env -- nanobot run ./nanobot.yaml", + "nanobot:prod": "NODE_ENV=production npm run start & dotenv -e .env -- nanobot run ./nanobot.yaml", "publish:library": "npm publish --workspace=packages/library" }, "devDependencies": {