diff --git a/README.md b/README.md index fb179c91..5b6d7dcd 100644 --- a/README.md +++ b/README.md @@ -146,9 +146,11 @@ Drop those URLs into any MCP-compatible host to see `mcp-ui` in action. ## 🛣️ Roadmap -- [ ] Support new SSR methods (e.g., RSC) -- [ ] Support additional client-side libraries -- [ ] Expand UI Action API +- [X] Add online playground +- [ ] Support React Server Components +- [ ] Support Remote-DOM +- [ ] Support additional client-side libraries (e.g., Vue) +- [ ] Expand UI Action API (beyond tool calls) - [ ] Do more with Resources and Sampling ## 🤝 Contributing diff --git a/packages/client/README.md b/packages/client/README.md index 1b80e031..fb179c91 100644 --- a/packages/client/README.md +++ b/packages/client/README.md @@ -6,31 +6,32 @@

- What Is `mcp-ui` • + What's mcp-ui? • Installation • Quickstart • Core Concepts • - Example Implementation • + Examples • Roadmap • Contributing • License

+---- -**`mcp-ui`** brings interactive web components to your [Model Context Protocol](https://modelcontextprotocol.io/introduction) (MCP) workflow. Build on the server, render on the client — let your MCP server deliver dynamic HTML resources out of the box. +**`mcp-ui`** brings interactive web components to the [Model Context Protocol](https://modelcontextprotocol.io/introduction) (MCP). Deliver rich, dynamic UI resources directly from your MCP server to be rendered by the client. Take AI interaction to the next level! > *This project is an experimental playground for MCP UI ideas. Expect rapid iteration and community-driven enhancements!* -## 💡 What Is `mcp-ui`? +## 💡 What's `mcp-ui`? `mcp-ui` is a TypeScript SDK comprising two packages: * **`@mcp-ui/server`**: Utilities to generate `HtmlResourceBlock` objects on your MCP server. * **`@mcp-ui/client`**: UI components (e.g., ``) to render those blocks in the browser and handle their events. -Together, they let you define reusable HTML resource blocks on the server side and seamlessly display them and react to their actions in any MCP host environment. +Together, they let you define reusable UI resource blocks on the server side, seamlessly display them in the client, and react to their actions in the MCP host environment. ## ✨ Core Concepts @@ -71,6 +72,9 @@ UI blocks must be able to interact with the agent. In `mcp-ui`, this is done by # using npm npm install @mcp-ui/server @mcp-ui/client +# or pnpm +pnpm add @mcp-ui/server @mcp-ui/client + # or yarn yarn add @mcp-ui/server @mcp-ui/client ``` @@ -124,13 +128,14 @@ yarn add @mcp-ui/server @mcp-ui/client 3. **Enjoy** interactive MCP UIs — no extra configuration required. -## 🌍 Example implementation +## 🌍 Examples **Client example** -https://github.com/modelcontextprotocol/inspector/pull/413 +* [ui-inspector](https://github.com/idosal/ui-inspector) - inspect local `mcp-ui`-enabled servers. Check out the [hosted version](https://scira-mcp-chat-git-main-idosals-projects.vercel.app/)! +* [MCP-UI Chat](https://github.com/idosal/scira-mcp-ui-chat) - interactive chat built with the `mcp-ui` client. **Server example** -Try out the hosted app at - +Try out the hosted app - * **HTTP Streaming**: `https://remote-mcp-server-authless.idosalomon.workers.dev/mcp` * **SSE**: `https://remote-mcp-server-authless.idosalomon.workers.dev/sse` @@ -138,6 +143,7 @@ The app is deployed from `examples/server`. Drop those URLs into any MCP-compatible host to see `mcp-ui` in action. + ## 🛣️ Roadmap - [ ] Support new SSR methods (e.g., RSC) @@ -147,7 +153,7 @@ Drop those URLs into any MCP-compatible host to see `mcp-ui` in action. ## 🤝 Contributing -Contributions, ideas, and bug reports are welcome! See our [contribution guidelines](https://github.com/idosal/mco-ui/blob/main/.github/CONTRIBUTING.md) to get started. +Contributions, ideas, and bug reports are welcome! See the [contribution guidelines](https://github.com/idosal/mco-ui/blob/main/.github/CONTRIBUTING.md) to get started. ## 📄 License diff --git a/packages/server/README.md b/packages/server/README.md index 24e4d033..fb179c91 100644 --- a/packages/server/README.md +++ b/packages/server/README.md @@ -6,11 +6,11 @@

- What Is `mcp-ui` • + What's mcp-ui? • Installation • Quickstart • Core Concepts • - Example Implementation • + Examples • Roadmap • Contributing • License @@ -18,20 +18,20 @@ ---- -**`mcp-ui`** brings interactive web components to your [Model Context Protocol](https://modelcontextprotocol.io/introduction) (MCP) workflow. Build on the server, render on the client — let your MCP server deliver dynamic HTML resources out of the box. +**`mcp-ui`** brings interactive web components to the [Model Context Protocol](https://modelcontextprotocol.io/introduction) (MCP). Deliver rich, dynamic UI resources directly from your MCP server to be rendered by the client. Take AI interaction to the next level! > *This project is an experimental playground for MCP UI ideas. Expect rapid iteration and community-driven enhancements!* -## 💡 What Is `mcp-ui`? +## 💡 What's `mcp-ui`? `mcp-ui` is a TypeScript SDK comprising two packages: * **`@mcp-ui/server`**: Utilities to generate `HtmlResourceBlock` objects on your MCP server. * **`@mcp-ui/client`**: UI components (e.g., ``) to render those blocks in the browser and handle their events. -Together, they let you define reusable HTML resource blocks on the server side and seamlessly display them and react to their actions in any MCP host environment. +Together, they let you define reusable UI resource blocks on the server side, seamlessly display them in the client, and react to their actions in the MCP host environment. ## ✨ Core Concepts @@ -72,6 +72,9 @@ UI blocks must be able to interact with the agent. In `mcp-ui`, this is done by # using npm npm install @mcp-ui/server @mcp-ui/client +# or pnpm +pnpm add @mcp-ui/server @mcp-ui/client + # or yarn yarn add @mcp-ui/server @mcp-ui/client ``` @@ -125,13 +128,14 @@ yarn add @mcp-ui/server @mcp-ui/client 3. **Enjoy** interactive MCP UIs — no extra configuration required. -## 🌍 Example implementation +## 🌍 Examples **Client example** -https://github.com/modelcontextprotocol/inspector/pull/413 +* [ui-inspector](https://github.com/idosal/ui-inspector) - inspect local `mcp-ui`-enabled servers. Check out the [hosted version](https://scira-mcp-chat-git-main-idosals-projects.vercel.app/)! +* [MCP-UI Chat](https://github.com/idosal/scira-mcp-ui-chat) - interactive chat built with the `mcp-ui` client. **Server example** -Try out the hosted app at - +Try out the hosted app - * **HTTP Streaming**: `https://remote-mcp-server-authless.idosalomon.workers.dev/mcp` * **SSE**: `https://remote-mcp-server-authless.idosalomon.workers.dev/sse` @@ -139,6 +143,7 @@ The app is deployed from `examples/server`. Drop those URLs into any MCP-compatible host to see `mcp-ui` in action. + ## 🛣️ Roadmap - [ ] Support new SSR methods (e.g., RSC) @@ -148,7 +153,7 @@ Drop those URLs into any MCP-compatible host to see `mcp-ui` in action. ## 🤝 Contributing -Contributions, ideas, and bug reports are welcome! See our [contribution guidelines](https://github.com/idosal/mco-ui/blob/main/.github/CONTRIBUTING.md) to get started. +Contributions, ideas, and bug reports are welcome! See the [contribution guidelines](https://github.com/idosal/mco-ui/blob/main/.github/CONTRIBUTING.md) to get started. ## 📄 License