Your UI, Inside the Chat Window: Building with Apollo & MCP Apps

You've built a React app. It has data, logic, and real functionality. Now imagine letting an AI agent actually use it, displaying your UI right there in the chat window for users to interact with!

In this hands-on workshop, Apollo GraphQL shows frontend developers how to take an existing web app and wire it up to an AI agent end-to-end. No prior GraphQL experience required! You'll leave with working code and a pattern you can use to embed any app into any MCP Apps-compatible host (like ChatGPT, Claude, and others).

What you'll do:

• Explore an existing React + GraphQL application
• Expose your app's operations as AI-callable tools
• Use MCPJam's widget emulator to test against any LLM in the playground

Who this is for: This is a frontend-first workshop. If you know React and have built or consumed a REST API before, you're ready!

Prerequisites: Attendees should arrive with:

• A laptop with Node.js v22+ and npm
• A code editor equipped with your AI agent of choice (for example, Claude Code, Cursor, etc.)

Meet your instructor

Michelle Mabuyo

Staff Developer Educator at Apollo