Skip to content

feat(mcp): add support for MCP Apps#15041

Merged
aayush-kapoor merged 33 commits into
mainfrom
aayush/mcp-apps
May 7, 2026
Merged

feat(mcp): add support for MCP Apps#15041
aayush-kapoor merged 33 commits into
mainfrom
aayush/mcp-apps

Conversation

@aayush-kapoor
Copy link
Copy Markdown
Collaborator

@aayush-kapoor aayush-kapoor commented May 5, 2026

Background

#12053
#11651

The MCP spec allows connecting hosts to MCP apps (which offer a specialised UI along with tool calls) https://apps.extensions.modelcontextprotocol.io/api/index.html

Summary

  • mcp-client.ts in the example creates a client with mcpAppClientCapabilities. That capability is added in packages/mcp/src/tool/mcp-apps.ts
  • chat route calls client.listTools(), then splitMCPAppTools(), then passes only modelVisible tools to streamText. This keeps app-only tools away from the model
  • packages/mcp/src/tool/mcp-client.ts now preserves MCP App metadata on converted AI SDK tools under metadata.mcp.app
  • page.tsx passes tool UI parts to MCPAppRenderer. The renderer reads part.callProviderMetadata.mcp.app, loads the resource through the host route, then renders it via a sandbox iframe
  • Iframe talks back through JSON-RPC - packages/react/src/mcp-apps/bridge.ts handles ui/initialize, tool input/result notifications, tools/call, resources/read, display mode requests, logs etc. this exists for the host to communicate with the mcp server

Manual Verification

http://localhost:3000/chat/mcp-apps

Checklist

  • All commits are signed (PRs with unsigned commits cannot be merged)
  • Tests have been added / updated (for bug fixes / features)
  • Documentation has been added / updated (for bug fixes / features)
  • A patch changeset for relevant packages has been added (for bug fixes / features - run pnpm changeset in the project root)
  • I have reviewed this pull request (self-review)

Related Issues

fixes #11651 and #12053

@aayush-kapoor aayush-kapoor marked this pull request as ready for review May 6, 2026 22:47
Comment thread packages/react/src/mcp-apps/utils.ts Outdated
@@ -0,0 +1,101 @@
import { useEffect, useState } from 'react';
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

files name are not conform to our standard

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

also what would be the best possible name for this class?

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hmm i thought MCPAppRenderer might be appropriate since it's only specific to that for now

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

then shouldnt this be mcp-app-renderer.tsx

Comment thread packages/react/src/mcp-apps/app-frame.tsx
Comment thread content/docs/04-ai-sdk-ui/index.mdx
Comment thread packages/react/src/mcp-apps/index.ts Outdated
@aayush-kapoor aayush-kapoor merged commit 611f621 into main May 7, 2026
19 checks passed
@aayush-kapoor aayush-kapoor deleted the aayush/mcp-apps branch May 7, 2026 22:18
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 7, 2026

🚀 Published in:

Package Version
@ai-sdk/mcp 2.0.0-canary.44
@ai-sdk/react 4.0.0-canary.127

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Support for MCP Apps

3 participants