Skip to content

Latest commit

 

History

History
43 lines (28 loc) · 1.3 KB

File metadata and controls

43 lines (28 loc) · 1.3 KB

Angular: Embeddable MCP UI

This is a basic Angular application that exposes a component as an MCP-UI tool that can be embedded in chat responses, e.g. via ChatGPT apps.

The meat of the MCP integration is in src/server.ts. It uses the following packages:

  • @modelcontextprotocol/sdk: To expose an MCP endpoint on Angular's server.
  • @mcp-ui/server: To provide MCP-UI tools & resources on the MCP endpoint.
  • @mcp-ui/client: To test the app's MCP-UI widget.

Development setup

To start a local development server, run:

ng serve

# If exposing the dev server for testing integrations:
BASE_URL=https://YOUR-PUBLIC-PROXY-DOMAIN ng serve --allowed-hosts

This is enough to test the MCP server using manual tool calls. To test integrations with deployed chats, the server must be available on the internet. For ChatGPT, follow these instructions: https://developers.openai.com/apps-sdk/deploy/connect-chatgpt/

Building

To build the project run:

ng build

This will compile your project and store the build artifacts in the dist/ directory. By default, the production build optimizes your application for performance and speed.

Running unit tests

To execute unit tests with the Karma test runner, use the following command:

ng test