Remote DOM
As of the time of this writing, no popular AI Agent apps support MCP-UI with
Remote DOM, so you'll need to use your imagination 🌈
👨💼 When users interact with our journaling app, they expect a consistent, professional experience that feels native to the application they're using. Right now, our tag viewer uses raw HTML which means our UI is rendered in an iframe and cannot resemble the variety of agents using our MCP server because it can't integrate with the host application's design system. Users notice this inconsistency and it makes our app feel less polished and trustworthy.
The problem is that raw HTML gives us complete control but also complete responsibility for every aspect of the user interface. This leads to a fragmented user experience where each UI component feels like it belongs to a different application.
Instead, we can use Remote DOM to create UI components that automatically inherit the host application's design system. This means our tag viewer will look and feel like it belongs in whatever application the user is using, whether that's a chat interface, a dashboard, or a mobile app.
// New approach: Remote DOM with consistent components
const resource = createUIResource({
uri: 'ui://weather-card/singapore',
content: {
type: 'remoteDom',
framework: 'react',
// some editors will syntax highlight a string followed by the /* js */ comment
script: /* js */ `
const stack = document.createElement('ui-stack');
stack.setAttribute('direction', 'vertical');
stack.setAttribute('spacing', '20');
stack.setAttribute('align', 'center');
const title = document.createElement('ui-text');
title.setAttribute('content', 'Singapore');
stack.appendChild(title);
const temperature = document.createElement('ui-text');
temperature.setAttribute('content', '88°F - Partly Cloudy');
stack.appendChild(temperature);
const details = document.createElement('ui-text');
details.setAttribute('content', 'Humidity: 78% | Wind: 12 mph');
stack.appendChild(details);
root.appendChild(stack);
`,
},
encoding: 'text',
})
Remote DOM uses JavaScript to create and manipulate DOM elements using
predefined UI components like
ui-stack, ui-text, and ui-button. These
components are automatically styled and provide consistent behavior across the
host application.You need to implement the
getTagRemoteDomUIScript function to create a Remote DOM version of the tag viewer. Here's what you need to know:ui-stack- Container with layout properties (direction, spacing, align)ui-text- Text content with automatic styling
const stack = document.createElement('ui-stack')
stack.setAttribute('direction', 'vertical')
stack.setAttribute('spacing', '20')
stack.setAttribute('align', 'center')
const title = document.createElement('ui-text')
title.setAttribute('content', 'Your content here')
stack.appendChild(title)
// "root" is globally available in your script
root.appendChild(stack)
There's more available from remote-dom, but we'll keep it simple for now.