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

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 · World Congress 2026 Europe

2:36 min

Core concepts and advantages of the Model Context Protocol

Rishabh Budhiraja

Rishabh Budhiraja +1 · World Congress 2026 Europe

2:58 min

Origin and purpose of the Model Context Protocol

David Soria Parra

David Soria Parra +3 · World Congress 2026 Europe

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 · World Congress 2026 Europe

More from World Congress 2026 Europe - Virtual Stage

One Does Not Simply Make Architecture Decisions Alone thumbnail

One Does Not Simply Make Architecture Decisions Alone

Vladas Diržys

From Black Box to Glass Box : Bedrock AgentCore Observability thumbnail

From Black Box to Glass Box : Bedrock AgentCore Observability

Yasemin Aktürk

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

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

Julia Grosse

Better Together: Leveraging Your Observability Tools as a SIEM thumbnail

Better Together: Leveraging Your Observability Tools as a SIEM

Mathias Palmersheim

ChatGPT Apps: From Chat to Checkout thumbnail

ChatGPT Apps: From Chat to Checkout

Aaron Koivunen

Interior Decorating (TypeScript Decorators) thumbnail

Interior Decorating (TypeScript Decorators)

Michael Dowden

Upcoming sessions on this topic

World Congress 2026 North America

September 24, 2026 · 16:50–17:20

Outdoor Stage

The MCP haters are half right

Vojta Kopal

Head of Data at Apify

Vojta Kopal

World Congress 2026 North America

September 24, 2026 · 11:00–13:00

Stage 12

Exploring MCP Servers with GitHub Copilot

Pamela Fox

Principal Cloud Advocate, Microsoft

Pamela Fox

World Congress 2026 North America

September 25, 2026 · 10:20–10:50

Outdoor Stage

MicroAgents: The Microservices of the Agentic Era

Ashish Shubham

Runs the show bussiness at ThoughtSpot

Ashish Shubham

World Congress 2026 North America

September 25, 2026 · 13:30–14:00

Stage 4

From Model Selection to Smart Routing: How to Use the Right LLM for Every Task

Viktoria Semaan

Principal Technical Evangelist at Databricks

Viktoria Semaan

World Congress 2026 North America

September 25, 2026 · 10:20–10:50

Stage 3

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

Guillaume Lebedel

CTO & Co-Founder of StackOne

Guillaume Lebedel

World Congress 2026 North America

September 25, 2026 · 14:50–15:20

Stage 6

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

Related videos

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

World Congress 2026 Europe • 2 months 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

World Congress 2025 • about 1 year 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

World Congress 2025 • about 1 year ago

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

Viktoria Semaan

Introducing Digital Samba Embedded Video Conferencing API MCP Server thumbnail

World Congress 2025 • about 1 year ago

Introducing Digital Samba Embedded Video Conferencing API MCP Server

Robert Strobl

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

World Congress 2026 Europe • 2 months ago

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

Suchitra Swain

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

Perf + AI • 10 months ago

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

Related articles

MH

Michael Hunger

CH

Chris Heilmann

Everything a Developer Needs to Know About MCP with Neo4j

In the rapidly evolving world of AI tooling and agentic workflows, one protocol is reshaping how developers build, scale, and share AI-native applications: the Model Context Protocol (MCP). If you’...

about 1 year ago

The Model Context Protocol with Neo4j (MCP for Al Agent memory and Integration

DC

Daniel Cranney

Dev Digest 212: WebMCP or MCP, What is DevRel, AI's 10% Productivity Boost, and a 49MB Web Page…

Inside last week’s Dev Digest 212 . 🤔 WebMCP or MCP 🧠 Essential Claude code skills 📊 The AI incident database 🎨 Hacking CSS ⚡ Rethinking web performance 🐍 How Python got lazy imports 📘 Free “Algor...

6 months ago

CH

Chris Heilmann

WebMCP: Empowering Agents as First-Class Citizens of the Web

WebMCP is an exciting W3C proposal that just landed in Chrome Canary to try out . The idea is that you can use some HTML attributes on a form or register JavaScript tool methods to give agents di...

7 months ago

WebMCP: Empowering Agents as First-Class Citizens of the Web

CH

Chris Heilmann

Dev Digest 132 - Binging WADFlix?

Hello there, watch all the talks of the WeAreDeveloper World Congress, learn prompt engineering and how to sensibly add AI to your apps.Phase 2 of the WeAreDevelopers Cinematic UniverseToday we are...

about 2 years ago

Dev Digest 132 - Binging WADFlix?

From learning to earning

Jobs that call for the skills explored in this talk.

Senior AI Developer

Expert Remote Docker Github Fastapi

AI Adoption Lead

Brussel, Belgium

Expert Office365 Generative AI Microsoft Windows

25 days ago • Verified

Software Engineer, Fullstack

San Francisco, United States

Expert $165k–210k Python

about 1 month ago

Senior AI Frontend Engineer

TeamViewer Germany GmbH,

Austin, TX, United States

Expert ReactJS TypeScript Material UI

Principal UX Researcher, AI & Developer Platforms

Austin, TX, United States

$211k–286k Remote Java GUIs AI Platforms Programming Tools

15 days ago • Verified

ML Engineer

Seattle, United States

Expert Remote Go