What Are MCP Apps?

1{
2  name: 'show_product_card',
3  description: 'Display interactive product card',
4  inputSchema: {
5    type: 'object',
6    properties: {
7      productId: { type: 'string' },
8      name: { type: 'string' },
9      price: { type: 'number' }
10    }
11  },
12  _meta: {  // From MCP spec (SEP-1865)
13    ui: {
14      resourceUri: 'ui://my-app/product-card',  // Which UI to render
15      preferredFrameSize: { width: 600, height: 400 },
16      csp: {
17        connectDomains: ['https://api.example.com'],  // Allowed API calls
18        resourceDomains: ['https://cdn.example.com']   // Allowed images/fonts
19      }
20    }
21  },
22  execute: async (args) => {
23    return [{ type: 'text', text: 'Product card displayed' }];
24  }
25}

1resources: [
2  {
3    uri: 'ui://my-app/product-card',  // Must match tool's resourceUri
4    name: 'Product Card Widget',
5    mimeType: 'text/html;profile=mcp-app',  // Required for MCP Apps
6    getContent: async () => {
7      // In this playground, we use Next.js to bundle React components:
8      const { fetchMcpAppHtml } = await import('@/utils/fetchMcpApp');
9      const html = await fetchMcpAppHtml('product-card-app');
10
11      return {
12        uri: 'ui://my-app/product-card',
13        mimeType: 'text/html;profile=mcp-app',
14        text: html  // Your HTML as a string
15      };
16    }
17  }
18]

1import { useMcpApp } from '@botdojo/chat-sdk/mcp-app-view/react';
2
3function ProductCardWidget() {
4  const containerRef = useRef<HTMLDivElement>(null);
5
6  const {
7    isInitialized,    // true after handshake with host
8    tool,             // { arguments, status, result }
9    hostContext,      // { state, theme, viewport }
10    sendMessage,      // Send messages to chat
11    callTool,         // Call other tools locally
12    openLink,         // Request to open URLs
13  } = useMcpApp({
14    containerRef,
15    autoReportSize: true,  // Auto-report iframe height changes
16  });
17
18  if (!isInitialized) {
19    return <div>Loading...</div>;
20  }
21
22  const { productId, name, price } = tool.arguments || {};
23
24  return (
25    <div ref={containerRef} className="p-6">
26      <h2>{name}</h2>
27      <p>Price: ${price}</p>
28      <button onClick={() => sendMessage([
29        { type: 'text', text: `User clicked on product ${productId}` }
30      ])}>
31        Add to Cart
32      </button>
33    </div>
34  );
35}