Awesome MCP › TypeScript

idosal/mcp-ui

⭐ 5150 TypeScript added to this list on 2025-06-16 repository created 2025-05-13

The project "mcp-ui" is a TypeScript SDK designed to enhance the Model Context Protocol (MCP) by enabling rich, interactive user interface components. It consists of two main packages: @mcp-ui/server and @mcp-ui/client. The server package provides utilities to generate UI snippets called HtmlResourceBlocks on the MCP server side. These snippets are then sent to the client, where the client package renders them using React components such as . This setup facilitates dynamic AI interactions by allowing servers and hosts to agree on contracts for creating and rendering interactive UI snippets, aiming for a standardized UI approach within MCP. The core concept revolves around the HtmlResourceBlock, which is the primary payload sent from the server to the client. This block contains a unique URI, a MIME type indicating the content type (such as text/html, text/uri-list, or application/vnd.mcp-ui.remote-dom), and the content itself either as inline text or base64-encoded blob. The client renders these resources appropriately, using iframes for HTML or URL content and a Remote DOM approach for more flexible UI rendering that matches the host's look and feel. The Remote DOM resource type leverages Shopify's remote-dom technology to securely render UI scripts in a sandboxed iframe, communicating UI changes back to the host in JSON format. This allows for more integrated and customizable UI experiences. The SDK also supports handling UI actions triggered by user interactions, such as tool calls, intents, prompts, notifications, and links, enabling seamless communication between the UI snippets and the MCP host environment. Installation is straightforward via npm, pnpm, or yarn, and the project provides quickstart examples for both server-side resource creation and client-side rendering. Additional examples and demos are available, including interactive chat applications and playgrounds for testing Remote DOM resources. Overall, mcp-ui significantly advances the Model Context Protocol by introducing a robust framework for interactive, server-generated UI components that enhance AI interaction capabilities.

https://github.com/idosal/mcp-ui

aiai-interactionapache-license-2.0client-side-renderingdynamic-ai-interactionsdynamic-uiexamplesexternal-urlshtmlresourcehtmlresourceblockiframeinline-htmlintentsinteractive-uiinteractive-web-componentslinksllmmcpmcp-host-environmentmime-typesmodel-context-protocolnotificationsnpmopen-sourceplaygroundpromptsquickstartreactreact-componentsreact-server-componentsremote-domreusable-ui-blocksserver-generated-uiserver-side-ui-resourcesshopify-remote-domtext/htmltext/uri-listtool-callstypescripttypescript-sdkui-actionui-actionsui-sdkui-snippets

Also in TypeScript

modelcontextprotocol/typescript-sdk

Official TypeScript SDK for building and interacting with Model Context Protocol (MCP) servers and clients, enabling standardized context provision for large language models.

mnfst/manifest

Manifest is an open-source components library built on shadcn/ui for creating customizable and production-ready ChatGPT and MCP applications efficiently.

punkpeye/fastmcp

FastMCP is a TypeScript framework that simplifies building Model Context Protocol (MCP) servers by handling client sessions, multiple content types, real-time updates, and flexible tool definitions using standard schema validation libraries.

modelcontextprotocol/use-mcp

use-mcp is a lightweight React hook that simplifies connecting to Model Context Protocol (MCP) servers by managing authentication, connection states, and tool invocation for AI applications.

QuantGeekDev/mcp-framework

MCP Framework is a TypeScript-based framework that simplifies building Model Context Protocol (MCP) servers with features like automatic discovery, multiple transport support, built-in authentication, and comprehensive validation tools.

jasonjmcghee/WebMCP

WebMCP is a protocol and toolkit enabling websites to act as MCP servers, sharing tools and resources securely with client-side large language models to enhance user interactions.

rekog-labs/MCP-Nest

A NestJS module that enables effortless creation of Model Context Protocol (MCP) servers to expose AI tools, resources, and prompts with support for multiple transport types and authentication.

vercel/mcp-adapter

A Vercel adapter that enables easy deployment of Model Context Protocol (MCP) servers on Next.js and other frameworks, facilitating real-time communication between applications and AI models.