Mastra tutorial: build a ChatGPT plugin with MCP Apps
Learn to expose tools and HTML through Mastra, test MCP Apps locally, and connect a tic-tac-toe game and metrics dashboard to ChatGPT and Codex.
Player not loading? Watch on YouTube
This workshop explains how to build a ChatGPT extension with Mastra, an open source TypeScript framework. Shane Thomas describes the MCP server as the connection between application tools and a chat host. The server supplies structured results and HTML, which the host displays in a sandboxed interface. He recommends keeping tools useful without the interface so an AI agent can work directly with their results.
The walkthrough defines tools with input and output schemas, adds HTML through app resources, and tests a loan calculator and product metrics dashboard in Mastra Studio. Developers can test individual tools before checking the server and chat interaction. The examples do not require Mastra agents or workflows, though Thomas says tools can call agents when needed.
A deployed tic-tac-toe app demonstrates interaction with Codex. Click handlers send state through the bridge; the host uses that data rather than reading interface pixels. A later dashboard example shows sidebar access and a view beside the conversation, although the initial request fails during the demo.
Thomas says local development with external hosts requires a tunnel, while this demonstration uses Mastra platform hosting. Authentication is outside the walkthrough: the demo servers have no authentication, and he recommends OAuth and access validation for released apps.