[MCP] Consistent

While raw HTML gives us visual interfaces, it has limitations when it comes to creating truly interactive and consistent user experiences. Raw HTML requires you to write all the styling from scratch, handle responsive design manually, and manage complex interactions through custom JavaScript. This leads to inconsistent designs across different UI components and makes it harder to maintain a cohesive user experience.

The solution is Remote DOM, a library from Shopify that allows people to safely render arbitrary HTML from an untrusted source. This is a powerful approach that lets you create UI components using a consistent set of web components that are automatically styled and interactive. Instead of writing raw HTML and CSS, you write JavaScript that creates and manipulates DOM elements using predefined UI components.

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.

import { createUIResource } from '@mcp-ui/server'// Create a UI resource with Remote DOM
const resource = createUIResource({uri: 'ui://tag-view/interactive',content: {type: 'remoteDom',framework: 'react',script: `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', 'JavaScript');stack.appendChild(title);const description = document.createElement('ui-text');description.setAttribute('content', 'A programming language for web development');stack.appendChild(description);const deleteButton = document.createElement('ui-button');deleteButton.setAttribute('content', 'Delete Tag');deleteButton.addEventListener('press', () => {window.parent.postMessage({type: 'tool',payload: {toolName: 'deleteTag',params: { tagId: '1' }}}, '*');});stack.appendChild(deleteButton);root.appendChild(stack);`,},encoding: 'text',
})

 

The key advantages of Remote DOM over raw HTML are:

1. Consistent Design System: All UI components use the same styling and behavior patterns
2. Built-in Interactivity: Components like ui-button come with built-in event handling
3. Responsive by Default: Components automatically adapt to different screen sizes
4. Tool Integration: Easy integration with MCP tools through postMessage API
5. Framework Agnostic: Works with React, Vue, or any other framework

From the MCP UI documentation: Remote DOM content is delivered as application/vnd.mcp-ui.remote-dom+javascript MIME type and allows you to create interactive UI components using JavaScript that manipulates the DOM with predefined UI elements.

 

The Remote DOM approach transforms your UI from static HTML into dynamic, interactive components. Instead of writing CSS and managing complex interactions manually, you use a consistent set of UI components that handle styling and behavior automatically.

The key difference from raw HTML is that instead of writing static markup, you're writing JavaScript that creates and manipulates DOM elements using a consistent component system. This provides a much more consistent user experience.