ext-apps

🥈Silver

Ext-apps enables developers to embed AI chatbots in external applications using the MCP Apps protocol. Operations teams benefit from standardized UI integration, reducing development time and ensuring consistent user experiences. The protocol connects to MCP servers, allowing for scalable and secure AI chatbot deployment across various platforms.

1,6661070Updated Today

Intermediate30min to implementautomation

Saves ~195 min per use

Quick InstallView Source

git clone https://github.com/modelcontextprotocol/ext-apps.git

Works with:

Claude

Overview

About This Skill

https://modelcontextprotocol.github.io/ext-apps/api/

Use Cases

Create interactive dashboards that visualize real-time data within chat conversations.

Develop forms for user input that can be filled out directly in the chat interface.

Integrate multimedia elements like video players or image galleries into chatbot interactions.

Build tools for data analysis that allow users to manipulate and view data through interactive charts.

Setup & Installation

Quick Install

No install command available. Check the GitHub repository for manual installation instructions.

Alternative Install (Git Clone)

git clone https://github.com/modelcontextprotocol/ext-apps

Requirements

Claude Code or compatible AI agent
Works with: Claude

Quick Start Guide

Install the Skill

Copy the install command above and run it in your terminal.

Open Your AI Agent

Launch Claude Code, Cursor, or your preferred AI coding agent.

Try It Out

Use the prompt template or examples below to test the skill.

Customize

Adapt the skill to your specific use case and workflow.

Usage Examples

Prompt Template

Integrate an AI chatbot into my application using the MCP Apps protocol. Please provide a step-by-step guide for embedding the chatbot UI in [APPLICATION_NAME] and ensure it connects to [SERVER_URL]. Include any necessary code snippets and configuration settings.

Example Output

To integrate an AI chatbot into your application using the MCP Apps protocol, follow these steps:

1. Start by including the MCP SDK in your project. For a web application, add the following script tag to your HTML:
   `<script src='https://cdn.mcpapps.com/sdk.js'></script>`

2. Initialize the chatbot in your application by adding the following code snippet:
   ```javascript
   const chatbot = new MCPChatbot({
       serverUrl: 'https://api.mcpapps.com',
       appId: 'myApp123',
       userId: 'user456'
   });
   chatbot.render('#chatbot-container');
   ```

3. Ensure that your server is set up to handle requests from the chatbot. This involves configuring your backend to respond to the API calls made by the MCP server.

4. Test the integration by running your application and checking if the chatbot UI appears as expected in the designated container. You should see a chat window where users can interact with the AI.

5. Finally, monitor the interactions and adjust the chatbot's responses based on user feedback to improve the experience. You can access analytics through the MCP dashboard to track usage and engagement metrics.

By following these steps, you will successfully embed an AI chatbot into your application using the MCP Apps protocol.