WeAreDevelopers Logo WeAreDevelopers
Sign in
For You LIVE
World Congress 2026 Europe - Virtual Stage • Jul 2, 2026 • Session details

From Zero to MCP UI Hero: Building Context-Aware AI Apps That Actually Work

Vishal Dodiya

Why limit LLM outputs to static text? Master the Model Context Protocol to build dynamic, two-way synced React components directly inside AI clients like Claude.

Pause
Mute Enter Fullscreen
#1 about 2 min

Introduction to MCP apps and dynamic UI elements

How the developer community is bridging the gap between text interfaces and dynamic UI elements.

#2 about 2 min

Evolution and overview of the MCP app primitive

The origin of MCP apps and their role as the fourth standard primitive for delivering HTML interfaces.

#3 about 4 min

Setting up an Express server and UI resources

Routing an Express backend and registering app resources to serve React components via HTML.

#4 about 4 min

Registering tools to display the to-do list UI

Configuring basic tools without input schemas to provide structural data for LLM widget rendering.

#5 about 3 min

Building mutating tools to create and toggle items

Defining input schemas with Zod and functional callbacks to manipulate the application's internal data state.

#6 about 3 min

Enabling frontend tool calls from the React widget

Triggering backend tools directly from the front-end view using the postMessage API for bidirectional communication.

#7 about 2 min

Integrating the local MCP server with Claude AI

Tunnelling the local server to test the registered UI components natively inside a live chat client.

#8 about 4 min

Synchronizing widget state with LLM window event listeners

Handling message events to update the component view when backend tool actions alter the cached data set.

Matching moments

2:21 min

Integrating Model Context Protocol for non-technical users

Jordan Tigani Jordan Tigani · WWC Europe 2026

2:36 min

Core concepts and advantages of the Model Context Protocol

Rishabh Budhiraja Rishabh Budhiraja +1 · WWC Europe 2026

2:58 min

Origin and purpose of the Model Context Protocol

David Soria Parra David Soria Parra +3 · WWC Europe 2026

2:49 min

Introduction to the model context protocol and WebMCP

Andre Cipriani Bandarra +1 · Coffee With Developers

5:54 min

Standardizing agent interactions with the Web MCP proposal

Chris Heilmann +2 · LIVE

2:10 min

Introduction to DevTools MCP and features

Suchitra Swain Suchitra Swain · WWC Europe 2026

More from World Congress 2026 Europe - Virtual Stage

One Does Not Simply Make Architecture Decisions Alone thumbnail
36:15
28 days ago

One Does Not Simply Make Architecture Decisions Alone

Vladas Diržys

From Black Box to Glass Box : Bedrock AgentCore Observability thumbnail
21:15
about 1 month ago

From Black Box to Glass Box : Bedrock AgentCore Observability

Yasemin Aktürk

Leading in Rhythm: How Women Make Better Decisions with Biological Intelligence thumbnail
30:41
about 1 month ago

Leading in Rhythm: How Women Make Better Decisions with Biological Intelligence

Julia Grosse

Better Together: Leveraging Your Observability Tools as a SIEM thumbnail
39:06
about 1 month ago

Better Together: Leveraging Your Observability Tools as a SIEM

Mathias Palmersheim

ChatGPT Apps: From Chat to Checkout thumbnail
30:29
about 1 month ago

ChatGPT Apps: From Chat to Checkout

Aaron Koivunen

Interior Decorating (TypeScript Decorators) thumbnail
29:22
about 1 month ago

Interior Decorating (TypeScript Decorators)

Michael Dowden

Upcoming sessions on this topic

Open session

World Congress 2026 North America

The MCP haters are half right

Vojta Kopal

Head of Data at Apify

Vojta Kopal
Open session

World Congress 2026 North America

MicroAgents: The Microservices of the Agentic Era

Ashish Shubham

Runs the show bussiness at ThoughtSpot

Ashish Shubham
Open session

World Congress 2026 North America

Ship 10x Faster: AI-Powered Development with Claude Code and MCP Tools

Viktoria Semaan

Principal Technical Evangelist at Databricks

Viktoria Semaan
Open session

World Congress 2026 North America

Making (and Breaking) Agents by Adding 1,000 MCP Tools

Guillaume Lebedel

Stackone, CTO & Co-Founder

Guillaume Lebedel
Open session

World Congress 2026 North America

Look What Java Can Do Now: Live-Coding a GenAI MCP Server with the JAQ Stack

Suren Konathala

Senior Engineering Leader, Marketing & AdTech, AI GTM & Digital Experience Platforms, Java x AI

Suren Konathala
Open session

World Congress 2026 North America

Reinventing Incident Response with AI Agents and MCP

Jayant Tyagi

Lead Member of Technical Staff @ Salesforce

Jayant Tyagi

Related videos

API, MCP or MCP App? Choosing the right surface for AI agents thumbnail
29:59
WWC Europe 2026 • about 1 month ago

API, MCP or MCP App? Choosing the right surface for AI agents

Rishabh Budhiraja, Rishi Deorukhkar

MCP Mashups: How AI Agents are Reviving the Programmable Web thumbnail
23:17
WWC 2025 • 12 months ago

MCP Mashups: How AI Agents are Reviving the Programmable Web

Angie Jones

Beyond Prompting: Building Scalable AI with Multi-Agent Systems and MCP thumbnail
25:32
WWC 2025 • 12 months ago

Beyond Prompting: Building Scalable AI with Multi-Agent Systems and MCP

Viktoria Semaan

Introducing Digital Samba Embedded Video Conferencing API MCP Server thumbnail
4:30
WWC 2025 • 12 months ago

Introducing Digital Samba Embedded Video Conferencing API MCP Server

Robert Strobl

Prompt, Render, Debug: AI-Powered React Development with Chrome DevTools thumbnail
23:29
WWC Europe 2026 • about 1 month ago

Prompt, Render, Debug: AI-Powered React Development with Chrome DevTools

Suchitra Swain

Boost Productivity with AI: Figma & Playwright MCP Workflows - Aris Markogiannakis thumbnail
45:48
Perf + AI • 9 months ago

Boost Productivity with AI: Figma & Playwright MCP Workflows - Aris Markogiannakis

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.