Broadcast MCP

Inspiration

The current state of auth with MCP is bad. You have to reinvent the auth wheel and rely on clients to implement the auth flow. All of this is to expose data an AI should just be able to access because it is in your browser.

What it does

We allow for any frontend developer to implement MCP support to their web application in a way that users the existing auth state, exposes API endpoints, and allows them to expose local state. With our implementation, MCP can be supported on any website in under 5 minutes using a single React component with no risk to security as it is using the users auth session.

How we built it

We created a transport layer for MCP built off of the broadcast channel of the browser. The chat tab opens up child tabs and uses the broadcast channel to implement the protocol.

Challenges we ran into

Web compatibility, rolling our own transport layer, managing cross origin communication

Accomplishments that we're proud of

We've built an incredible practical use case for MCPs, allowing for any web developer to bring MCP support to their website using their existing APIs. This also allows for MCP to interact with client only & offline state which is not possible with remote MCP.

What we learned

How custom MCP transports work

What's next for Broadcast MCP

We'll be publishing it as a package for any frontend developer to adopt and bring support to their application. Chrome extensions can also build off of this to add support to websites that have not added it yet.

Built With

• aisdk
• mcp
• next.js