1. Workshop setup
1m

Overview

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, you'll to take an existing web app and wire it up to an AI agent end-to-end. 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 + application
  • Expose your app's as AI-callable tools
  • Use MCPJam's widget emulator to test against any LLM in the playground

Who this workshop is for

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

Pre-requisites

  • A laptop with Node.js v22+ and npm installed
  • Comfortable working in a terminal, editing TypeScript or JavaScript, and running a local dev server.

Let's get set up!

Clone the repository

Clone the workshop project.

git clone https://github.com/apollographql-education/workshop-mcp-apps-intro.git

Open it up in your favorite code editor.

Task!

Install dependencies

Then install dependencies using the install.sh script.

./install.sh
Task!

Run the web app

Start the web app by navigating to the dev/flyby directory and running the following command:

npm run dev

You should see the app running at http://localhost:3000.

Task!

Current state of the project

Flyby is a space tourism travel review platform. Browse locations to visit, read and leave reviews!

You should have it running locally at http://localhost:3000. You can also view it live at https://odyssey-flyby.netlify.app/.

This app is a React app that uses to fetch data from a API.

With the rise of AI assistants and people using chat more and more, we want to enable agents to display the same UI that users see in the browser.

In this workshop, we're going to take the existing web app and enable AI assistants to display it right in the chat window.

Helpful links

If you get lost in the follow-alongs, you can always refer to the completed code. Each commit corresponds to the final state of a follow-along.

Next