[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_29":-5,"_39":-5,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_50":51,"_52":53,"_54":55,"_56":57,"_58":59},"routes/_store+/_readers+/email_author.$slug/route",{"_9":10,"_11":-5,"_12":-5},"book",{"_13":14,"_15":16,"_17":18,"_19":20,"_21":22,"_23":24},"currentUser","formToken","id","Z2lkOi8vbGVhbnB1Yi9TdG9yZTo6Qm9va1Byb2R1Y3QvODUwNzM","title","MCP Apps for Claude","state","published","contactAuthorMethod","email","aboutText","

Build interactive apps that live inside Claude's conversations.

Ask an AI assistant whether a meeting room is free and you usually get a sentence. With an MCP App, you get a card instead: the room, the next free half hour, and a Book button that works right there in the chat. MCP Apps for Claude shows you how to build that kind of interface, from the first tool to a listing in Claude's connector directory.

The book follows one real app, Snug, a meeting-room booking connector, from a text-only MCP server to a polished, tested app that runs in claude.ai, in Claude Desktop and in the Claude Android app. Every code example is cut from a real, tested file, and every screenshot was taken in Claude.

What you'll learn

How MCP Apps work: tools, ui:// resources, and the sandboxed card Claude shows in the conversation
How to build inline cards, carousels and fullscreen views that follow Claude's design guidelines
How to take Claude's theme, fonts and colors, in light and dark mode, and design for phones
How a card talks back to Claude: updateModelContext, sendMessage, app-only tools and links
How to handle many copies of one card, large results and live data
How the sandbox and content security policy work, and how to add sign-in with a threat model
How to test a card without a browser, debug it inside Claude, and prepare it for the directory

Who this book is for

Web developers who know JavaScript or TypeScript and want to build interactive connectors for Claude. You don't need to know MCP already: Chapter 2 teaches the parts you need.

What you get

14 chapters, with diagrams, screenshots and exercises
Runnable solutions to every exercise
The complete companion code under the MIT License, with a copy of the app at the end of every chapter and a full test suite

","authors",[25],{"_13":26,"_27":28,"_29":30},"Z2lkOi8vbGVhbnB1Yi9TdG9yZTo6UHJvZHVjdEF1dGhvci85MDcyOA","name","Sandeep Kumar Patel","user",{"_31":32},"avatar",{"_33":34,"_35":36,"_37":38},"url","https://d39qdlcrvnra4b.cloudfront.net/avatars/238434/medium/avatar.jpg?1789304859","styleName","medium","exists",true,"shoppingCartId","shoppingCart",{"_13":72,"_73":74,"_75":38,"_76":77,"_78":79,"_80":81,"_82":38},"locale","en","readerTheme","light","constants",{"_70":71},"publishers",{"_66":67,"_68":69},"learnerOrganizations",[],"needsLocaleCookieSync",false,"announcements",{"_60":61,"_62":-5},"sentryEnvironment","production","sentryRelease","a1fb4a7013a74e95c419d62ada40436b37cbfba2","announcement_store",{"_63":53,"_64":65},"announcement_authors","flag","text","

Kick off your book project, get started with GhostAI, get better at marketing, or spend the day doing all three! Free live workshops on Zoom. Saturday, June 27, 2026.

\n","companies",[],"universities",[],"paypalClientId","AX53Cwz8jR6rVVzzZiZNWWXl0dGagi-GZrjG-S3Ua14E5nrKMn7DxDQ730O4R8LusLPp49ALn6aRVaEy","no-cart","count",0,"free","updatedAt","","paymentGateway","STRIPE","cartItems",[],"loading"]

Email the Author