aisurfer/mcp_ui_app_example

This repository is a worked example of an AI chat assistant that can show small interactive forms inside the chat window, not just text. The use case the author picked is booking a meeting with a colleague. You type something like book a meeting with Maria tomorrow, the assistant shows a booking form embedded in the conversation, you pick a time slot and submit, and then the assistant shows a read-only confirmation card with the booking result. The point of the project is to demonstrate the user interface extension to the Model Context Protocol, often shortened to MCP, which is a way for AI agents to call external tools and resources. The code is split into four services that run together with Docker Compose. A React frontend served by Vite on port 5173 shows the chat thread, streams text from the model, and renders the booking form inside an iframe. An Express backend on port 3000 talks to OpenAI in streaming mode, dispatches tool calls over MCP, and pushes events to the browser using server sent events. A separate MCP UI server provides the HTML for the booking form and the result card as MCP resources. A booking service exposes both a small REST API for the form to load colleagues and time slots, and an MCP endpoint that the agent calls to actually create the booking. To run it you need Docker, Docker Compose, and an OpenAI API key in a .env file. After docker compose build and docker compose up, the chat opens at http://localhost:5173. The model defaults to gpt-4o. Source folders are mounted as volumes so edits are picked up without a rebuild. The README is detailed and includes an architecture diagram, a sequence diagram of the booking flow, and tables of REST endpoints, SSE event types, MCP tools, and the five mock colleagues. The repository has 0 stars and reads as a reference implementation rather than a finished product.