Build rich, dynamic user interfaces for your MCP applications with SDKs that bring UI to AI interactions.
Server Side - Create interactive resources to return in your MCP tool results:
import { createUIResource } from '@mcp-ui/server';
const interactiveForm = createUIResource({
uri: 'ui://user-form/1',
content: {
type: 'externalUrl',
iframeUrl: 'https://yourapp.com'
},
encoding: 'text',
});require 'mcp_ui_server'
interactive_form = McpUiServer.create_ui_resource(
uri: 'ui://user-form/1',
content: {
type: :external_url,
iframeUrl: 'https://yourapp.com'
},
encoding: :text
)Client Side - Render on the host with a single component:
import { UIResourceRenderer } from '@mcp-ui/client';
// `mcpResource` would come from your MCP response
function MyApp({ mcpResource }) {
return (
<UIResourceRenderer
resource={mcpResource.resource}
onUIAction={(action) => {
console.log('User action:', action);
}}
/>
);
}<!-- index.html -->
<ui-resource-renderer id="resource-renderer"></ui-resource-renderer>
<!-- main.js -->
<script type="module">
// 1. Import the script to register the component
import '@mcp-ui/client/ui-resource-renderer.wc.js';
// 2. This object would come from your MCP response
const mcpResource = {
resource: {
uri: 'ui://user-form/1',
mimeType: 'text/uri-list',
text: 'https://example.com'
}
};
// 3. Get the element and pass data
const renderer = document.getElementById('resource-renderer');
renderer.setAttribute('resource', JSON.stringify(mcpResource.resource));
// 4. Listen for events
renderer.addEventListener('onUIAction', (event) => {
console.log('User action:', event.detail);
});
</script>