[MCP-UI] Proxy and Better Message Handling (#5487)
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Co-authored-by: Alex Hancock <alexhancock@block.xyz> Co-authored-by: Zane <75694352+zanesq@users.noreply.github.com>
This commit is contained in:
Andrew Harvard
@@ -10,7 +10,7 @@ pub async fn check_token(
|
||||
request: Request,
|
||||
next: Next,
|
||||
) -> Result<Response, StatusCode> {
|
||||
if request.uri().path() == "/status" {
|
||||
if request.uri().path() == "/status" || request.uri().path() == "/mcp-ui-proxy" {
|
||||
return Ok(next.run(request).await);
|
||||
}
|
||||
let secret_key = request
|
||||
|
||||
@@ -49,7 +49,7 @@ pub async fn run() -> Result<()> {
|
||||
.allow_methods(Any)
|
||||
.allow_headers(Any);
|
||||
|
||||
let app = crate::routes::configure(app_state)
|
||||
let app = crate::routes::configure(app_state, secret_key.clone())
|
||||
.layer(middleware::from_fn_with_state(
|
||||
secret_key.clone(),
|
||||
check_token,
|
||||
|
||||
@@ -326,6 +326,7 @@ derive_utoipa!(Icon as IconSchema);
|
||||
paths(
|
||||
super::routes::status::status,
|
||||
super::routes::status::diagnostics,
|
||||
super::routes::mcp_ui_proxy::mcp_ui_proxy,
|
||||
super::routes::config_management::backup_config,
|
||||
super::routes::config_management::recover_config,
|
||||
super::routes::config_management::validate_config,
|
||||
|
||||
@@ -0,0 +1,53 @@
|
||||
use axum::{
|
||||
extract::Query,
|
||||
http::{header, StatusCode},
|
||||
response::{Html, IntoResponse, Response},
|
||||
routing::get,
|
||||
Router,
|
||||
};
|
||||
use serde::Deserialize;
|
||||
|
||||
#[derive(Deserialize)]
|
||||
struct ProxyQuery {
|
||||
secret: String,
|
||||
}
|
||||
|
||||
const MCP_UI_PROXY_HTML: &str = include_str!("templates/mcp_ui_proxy.html");
|
||||
|
||||
#[utoipa::path(
|
||||
get,
|
||||
path = "/mcp-ui-proxy",
|
||||
params(
|
||||
("secret" = String, Query, description = "Secret key for authentication")
|
||||
),
|
||||
responses(
|
||||
(status = 200, description = "MCP UI proxy HTML page", content_type = "text/html"),
|
||||
(status = 401, description = "Unauthorized - invalid or missing secret"),
|
||||
)
|
||||
)]
|
||||
async fn mcp_ui_proxy(
|
||||
axum::extract::State(secret_key): axum::extract::State<String>,
|
||||
Query(params): Query<ProxyQuery>,
|
||||
) -> Response {
|
||||
if params.secret != secret_key {
|
||||
return (StatusCode::UNAUTHORIZED, "Unauthorized").into_response();
|
||||
}
|
||||
|
||||
(
|
||||
[
|
||||
(header::CONTENT_TYPE, "text/html; charset=utf-8"),
|
||||
(
|
||||
header::HeaderName::from_static("referrer-policy"),
|
||||
"no-referrer",
|
||||
),
|
||||
],
|
||||
Html(MCP_UI_PROXY_HTML),
|
||||
)
|
||||
.into_response()
|
||||
}
|
||||
|
||||
pub fn routes(secret_key: String) -> Router {
|
||||
Router::new()
|
||||
.route("/mcp-ui-proxy", get(mcp_ui_proxy))
|
||||
.with_state(secret_key)
|
||||
}
|
||||
@@ -2,6 +2,7 @@ pub mod agent;
|
||||
pub mod audio;
|
||||
pub mod config_management;
|
||||
pub mod errors;
|
||||
pub mod mcp_ui_proxy;
|
||||
pub mod recipe;
|
||||
pub mod recipe_utils;
|
||||
pub mod reply;
|
||||
@@ -16,7 +17,7 @@ use std::sync::Arc;
|
||||
use axum::Router;
|
||||
|
||||
// Function to configure all routes
|
||||
pub fn configure(state: Arc<crate::state::AppState>) -> Router {
|
||||
pub fn configure(state: Arc<crate::state::AppState>, secret_key: String) -> Router {
|
||||
Router::new()
|
||||
.merge(status::routes())
|
||||
.merge(reply::routes(state.clone()))
|
||||
@@ -27,4 +28,5 @@ pub fn configure(state: Arc<crate::state::AppState>) -> Router {
|
||||
.merge(session::routes(state.clone()))
|
||||
.merge(schedule::routes(state.clone()))
|
||||
.merge(setup::routes(state.clone()))
|
||||
.merge(mcp_ui_proxy::routes(secret_key))
|
||||
}
|
||||
|
||||
@@ -0,0 +1,142 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="referrer" content="no-referrer"/>
|
||||
<!--
|
||||
Permissive CSP so nested content is not constrained by top-level Goose Desktop CSP
|
||||
- default-src: Fallback for other directives (allows same-origin)
|
||||
- script-src: Allow scripts from any origin, inline, eval, wasm, and blob URLs
|
||||
- style-src: Allow styles from any origin and inline styles
|
||||
- font-src: Allow fonts from any origin
|
||||
- connect-src: Allow network requests to any origin
|
||||
- frame-src: Allow embedding iframes from any origin (required for proxy functionality)
|
||||
- media-src: Allow audio/video media from any origin
|
||||
- base-uri: Restrict <base> tag to same-origin only
|
||||
- upgrade-insecure-requests: Automatically upgrade HTTP to HTTPS
|
||||
-->
|
||||
<meta
|
||||
http-equiv="Content-Security-Policy"
|
||||
content="default-src 'self'; script-src * 'wasm-unsafe-eval' 'unsafe-inline' 'unsafe-eval' blob:; style-src * 'unsafe-inline'; font-src *; connect-src *; frame-src *; media-src *; base-uri 'self'; upgrade-insecure-requests"/>
|
||||
<title>MCP-UI Proxy</title>
|
||||
<style>
|
||||
body,
|
||||
html {
|
||||
margin: 0;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
}
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
iframe {
|
||||
background-color: transparent;
|
||||
border: 0 none transparent;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
flex-grow: 1;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
const params = new URLSearchParams(location.search);
|
||||
const contentType = params.get('contentType');
|
||||
const target = params.get('url');
|
||||
|
||||
// Validate that the URL is a valid HTTP or HTTPS URL
|
||||
function isValidHttpUrl(string) {
|
||||
try {
|
||||
const url = new URL(string);
|
||||
return url.protocol === 'http:' || url.protocol === 'https:';
|
||||
} catch (error) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
if (contentType === 'rawhtml') {
|
||||
// Double-iframe raw HTML mode (HTML sent via postMessage)
|
||||
const inner = document.createElement('iframe');
|
||||
inner.style = 'width:100%; height:100%; border:none;';
|
||||
// sandbox will be set from postMessage payload; default minimal before html arrives
|
||||
inner.setAttribute('sandbox', 'allow-scripts');
|
||||
document
|
||||
.body
|
||||
.appendChild(inner);
|
||||
|
||||
// Wait for HTML content from parent
|
||||
window.addEventListener('message', (event) => {
|
||||
if (event.source === window.parent) {
|
||||
if (event.data && event.data.type === 'ui-html-content') {
|
||||
const payload = event.data.payload || {};
|
||||
const html = payload.html;
|
||||
const sandbox = payload.sandbox;
|
||||
if (typeof sandbox === 'string') {
|
||||
inner.setAttribute('sandbox', sandbox);
|
||||
}
|
||||
if (typeof html === 'string') {
|
||||
inner.srcdoc = html;
|
||||
}
|
||||
} else {
|
||||
if (inner && inner.contentWindow) {
|
||||
inner
|
||||
.contentWindow
|
||||
.postMessage(event.data, '*');
|
||||
}
|
||||
}
|
||||
} else if (event.source === inner.contentWindow) {
|
||||
// Relay messages from inner to parent
|
||||
window
|
||||
.parent
|
||||
.postMessage(event.data, '*');
|
||||
}
|
||||
});
|
||||
|
||||
// Notify parent that proxy is ready to receive HTML (distinct event)
|
||||
window
|
||||
.parent
|
||||
.postMessage({
|
||||
type: 'ui-proxy-iframe-ready'
|
||||
}, '*');
|
||||
} else if (target) {
|
||||
if (!isValidHttpUrl(target)) {
|
||||
document.body.textContent = 'Error: invalid URL. Only HTTP and HTTPS URLs are allowed.';
|
||||
} else {
|
||||
const inner = document.createElement('iframe');
|
||||
inner.src = target;
|
||||
inner.style = 'width:100%; height:100%; border:none;';
|
||||
// Default external URL sandbox; can be adjusted later by protocol if needed
|
||||
inner.setAttribute('sandbox', 'allow-same-origin allow-scripts');
|
||||
document
|
||||
.body
|
||||
.appendChild(inner);
|
||||
const urlOrigin = new URL(target).origin;
|
||||
|
||||
window.addEventListener('message', (event) => {
|
||||
if (event.source === window.parent) {
|
||||
// listen for messages from the parent and send them to the iframe
|
||||
if (inner.contentWindow) {
|
||||
inner
|
||||
.contentWindow
|
||||
.postMessage(event.data, urlOrigin);
|
||||
} else {
|
||||
console.warn('[MCP-UI Proxy] iframe contentWindow is not available; message not sent');
|
||||
}
|
||||
} else if (event.source === inner.contentWindow) {
|
||||
// listen for messages from the iframe and send them to the parent
|
||||
window
|
||||
.parent
|
||||
.postMessage(event.data, '*');
|
||||
}
|
||||
});
|
||||
}
|
||||
} else {
|
||||
document.body.textContent = 'Error: missing url or html parameter';
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1042,6 +1042,33 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"/mcp-ui-proxy": {
|
||||
"get": {
|
||||
"tags": [
|
||||
"super::routes::mcp_ui_proxy"
|
||||
],
|
||||
"operationId": "mcp_ui_proxy",
|
||||
"parameters": [
|
||||
{
|
||||
"name": "secret",
|
||||
"in": "query",
|
||||
"description": "Secret key for authentication",
|
||||
"required": true,
|
||||
"schema": {
|
||||
"type": "string"
|
||||
}
|
||||
}
|
||||
],
|
||||
"responses": {
|
||||
"200": {
|
||||
"description": "MCP UI proxy HTML page"
|
||||
},
|
||||
"401": {
|
||||
"description": "Unauthorized - invalid or missing secret"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"/recipes/create": {
|
||||
"post": {
|
||||
"tags": [
|
||||
|
||||
Generated
+4
-4
@@ -11,7 +11,7 @@
|
||||
"dependencies": {
|
||||
"@ai-sdk/openai": "^2.0.52",
|
||||
"@ai-sdk/ui-utils": "^1.2.11",
|
||||
"@mcp-ui/client": "^5.13.0",
|
||||
"@mcp-ui/client": "^5.14.1",
|
||||
"@radix-ui/react-accordion": "^1.2.12",
|
||||
"@radix-ui/react-avatar": "^1.1.10",
|
||||
"@radix-ui/react-dialog": "^1.1.15",
|
||||
@@ -3018,9 +3018,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@mcp-ui/client": {
|
||||
"version": "5.13.1",
|
||||
"resolved": "https://registry.npmjs.org/@mcp-ui/client/-/client-5.13.1.tgz",
|
||||
"integrity": "sha512-U0+kgdgmBRfqVM1MbqDZnaxBWboyDWQNmYrS72loL+XL9ZMtej5B7EThrPsE3wtwJftLURVagYqgDAnfSgKhXw==",
|
||||
"version": "5.14.1",
|
||||
"resolved": "https://registry.npmjs.org/@mcp-ui/client/-/client-5.14.1.tgz",
|
||||
"integrity": "sha512-DHJ4H01L2oIiMdDzUrBErxYoli9Q3cQq5sXk3hhBQNqASbc55PtEhz6k0pOp7ykkj63MfxDKDmYXLw5jseY7/g==",
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"@modelcontextprotocol/sdk": "*",
|
||||
|
||||
@@ -41,7 +41,7 @@
|
||||
"dependencies": {
|
||||
"@ai-sdk/openai": "^2.0.52",
|
||||
"@ai-sdk/ui-utils": "^1.2.11",
|
||||
"@mcp-ui/client": "^5.13.0",
|
||||
"@mcp-ui/client": "^5.14.1",
|
||||
"@radix-ui/react-accordion": "^1.2.12",
|
||||
"@radix-ui/react-avatar": "^1.1.10",
|
||||
"@radix-ui/react-dialog": "^1.1.15",
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
import type { Client, Options as Options2, TDataShape } from './client';
|
||||
import { client } from './client.gen';
|
||||
import type { AddExtensionData, AddExtensionErrors, AddExtensionResponses, AgentAddExtensionData, AgentAddExtensionErrors, AgentAddExtensionResponses, AgentRemoveExtensionData, AgentRemoveExtensionErrors, AgentRemoveExtensionResponses, BackupConfigData, BackupConfigErrors, BackupConfigResponses, CheckProviderData, ConfirmPermissionData, ConfirmPermissionErrors, ConfirmPermissionResponses, CreateCustomProviderData, CreateCustomProviderErrors, CreateCustomProviderResponses, CreateRecipeData, CreateRecipeErrors, CreateRecipeResponses, CreateScheduleData, CreateScheduleErrors, CreateScheduleResponses, DecodeRecipeData, DecodeRecipeErrors, DecodeRecipeResponses, DeleteRecipeData, DeleteRecipeErrors, DeleteRecipeResponses, DeleteScheduleData, DeleteScheduleErrors, DeleteScheduleResponses, DeleteSessionData, DeleteSessionErrors, DeleteSessionResponses, DiagnosticsData, DiagnosticsErrors, DiagnosticsResponses, EncodeRecipeData, EncodeRecipeErrors, EncodeRecipeResponses, ExportSessionData, ExportSessionErrors, ExportSessionResponses, GetCustomProviderData, GetCustomProviderErrors, GetCustomProviderResponses, GetExtensionsData, GetExtensionsErrors, GetExtensionsResponses, GetProviderModelsData, GetProviderModelsErrors, GetProviderModelsResponses, GetSessionData, GetSessionErrors, GetSessionInsightsData, GetSessionInsightsErrors, GetSessionInsightsResponses, GetSessionResponses, GetToolsData, GetToolsErrors, GetToolsResponses, ImportSessionData, ImportSessionErrors, ImportSessionResponses, InitConfigData, InitConfigErrors, InitConfigResponses, InspectRunningJobData, InspectRunningJobErrors, InspectRunningJobResponses, KillRunningJobData, KillRunningJobResponses, ListRecipesData, ListRecipesErrors, ListRecipesResponses, ListSchedulesData, ListSchedulesErrors, ListSchedulesResponses, ListSessionsData, ListSessionsErrors, ListSessionsResponses, ParseRecipeData, ParseRecipeErrors, ParseRecipeResponses, PauseScheduleData, PauseScheduleErrors, PauseScheduleResponses, ProvidersData, ProvidersResponses, ReadAllConfigData, ReadAllConfigResponses, ReadConfigData, ReadConfigErrors, ReadConfigResponses, RecoverConfigData, RecoverConfigErrors, RecoverConfigResponses, RemoveConfigData, RemoveConfigErrors, RemoveConfigResponses, RemoveCustomProviderData, RemoveCustomProviderErrors, RemoveCustomProviderResponses, RemoveExtensionData, RemoveExtensionErrors, RemoveExtensionResponses, ReplyData, ReplyErrors, ReplyResponses, ResumeAgentData, ResumeAgentErrors, ResumeAgentResponses, RunNowHandlerData, RunNowHandlerErrors, RunNowHandlerResponses, SaveRecipeData, SaveRecipeErrors, SaveRecipeResponses, ScanRecipeData, ScanRecipeResponses, SessionsHandlerData, SessionsHandlerErrors, SessionsHandlerResponses, SetConfigProviderData, StartAgentData, StartAgentErrors, StartAgentResponses, StartOpenrouterSetupData, StartOpenrouterSetupResponses, StartTetrateSetupData, StartTetrateSetupResponses, StatusData, StatusResponses, UnpauseScheduleData, UnpauseScheduleErrors, UnpauseScheduleResponses, UpdateAgentProviderData, UpdateAgentProviderErrors, UpdateAgentProviderResponses, UpdateCustomProviderData, UpdateCustomProviderErrors, UpdateCustomProviderResponses, UpdateFromSessionData, UpdateFromSessionErrors, UpdateFromSessionResponses, UpdateRouterToolSelectorData, UpdateRouterToolSelectorErrors, UpdateRouterToolSelectorResponses, UpdateScheduleData, UpdateScheduleErrors, UpdateScheduleResponses, UpdateSessionNameData, UpdateSessionNameErrors, UpdateSessionNameResponses, UpdateSessionUserRecipeValuesData, UpdateSessionUserRecipeValuesErrors, UpdateSessionUserRecipeValuesResponses, UpsertConfigData, UpsertConfigErrors, UpsertConfigResponses, UpsertPermissionsData, UpsertPermissionsErrors, UpsertPermissionsResponses, ValidateConfigData, ValidateConfigErrors, ValidateConfigResponses } from './types.gen';
|
||||
import type { AddExtensionData, AddExtensionErrors, AddExtensionResponses, AgentAddExtensionData, AgentAddExtensionErrors, AgentAddExtensionResponses, AgentRemoveExtensionData, AgentRemoveExtensionErrors, AgentRemoveExtensionResponses, BackupConfigData, BackupConfigErrors, BackupConfigResponses, CheckProviderData, ConfirmPermissionData, ConfirmPermissionErrors, ConfirmPermissionResponses, CreateCustomProviderData, CreateCustomProviderErrors, CreateCustomProviderResponses, CreateRecipeData, CreateRecipeErrors, CreateRecipeResponses, CreateScheduleData, CreateScheduleErrors, CreateScheduleResponses, DecodeRecipeData, DecodeRecipeErrors, DecodeRecipeResponses, DeleteRecipeData, DeleteRecipeErrors, DeleteRecipeResponses, DeleteScheduleData, DeleteScheduleErrors, DeleteScheduleResponses, DeleteSessionData, DeleteSessionErrors, DeleteSessionResponses, DiagnosticsData, DiagnosticsErrors, DiagnosticsResponses, EncodeRecipeData, EncodeRecipeErrors, EncodeRecipeResponses, ExportSessionData, ExportSessionErrors, ExportSessionResponses, GetCustomProviderData, GetCustomProviderErrors, GetCustomProviderResponses, GetExtensionsData, GetExtensionsErrors, GetExtensionsResponses, GetProviderModelsData, GetProviderModelsErrors, GetProviderModelsResponses, GetSessionData, GetSessionErrors, GetSessionInsightsData, GetSessionInsightsErrors, GetSessionInsightsResponses, GetSessionResponses, GetToolsData, GetToolsErrors, GetToolsResponses, ImportSessionData, ImportSessionErrors, ImportSessionResponses, InitConfigData, InitConfigErrors, InitConfigResponses, InspectRunningJobData, InspectRunningJobErrors, InspectRunningJobResponses, KillRunningJobData, KillRunningJobResponses, ListRecipesData, ListRecipesErrors, ListRecipesResponses, ListSchedulesData, ListSchedulesErrors, ListSchedulesResponses, ListSessionsData, ListSessionsErrors, ListSessionsResponses, McpUiProxyData, McpUiProxyErrors, McpUiProxyResponses, ParseRecipeData, ParseRecipeErrors, ParseRecipeResponses, PauseScheduleData, PauseScheduleErrors, PauseScheduleResponses, ProvidersData, ProvidersResponses, ReadAllConfigData, ReadAllConfigResponses, ReadConfigData, ReadConfigErrors, ReadConfigResponses, RecoverConfigData, RecoverConfigErrors, RecoverConfigResponses, RemoveConfigData, RemoveConfigErrors, RemoveConfigResponses, RemoveCustomProviderData, RemoveCustomProviderErrors, RemoveCustomProviderResponses, RemoveExtensionData, RemoveExtensionErrors, RemoveExtensionResponses, ReplyData, ReplyErrors, ReplyResponses, ResumeAgentData, ResumeAgentErrors, ResumeAgentResponses, RunNowHandlerData, RunNowHandlerErrors, RunNowHandlerResponses, SaveRecipeData, SaveRecipeErrors, SaveRecipeResponses, ScanRecipeData, ScanRecipeResponses, SessionsHandlerData, SessionsHandlerErrors, SessionsHandlerResponses, SetConfigProviderData, StartAgentData, StartAgentErrors, StartAgentResponses, StartOpenrouterSetupData, StartOpenrouterSetupResponses, StartTetrateSetupData, StartTetrateSetupResponses, StatusData, StatusResponses, UnpauseScheduleData, UnpauseScheduleErrors, UnpauseScheduleResponses, UpdateAgentProviderData, UpdateAgentProviderErrors, UpdateAgentProviderResponses, UpdateCustomProviderData, UpdateCustomProviderErrors, UpdateCustomProviderResponses, UpdateFromSessionData, UpdateFromSessionErrors, UpdateFromSessionResponses, UpdateRouterToolSelectorData, UpdateRouterToolSelectorErrors, UpdateRouterToolSelectorResponses, UpdateScheduleData, UpdateScheduleErrors, UpdateScheduleResponses, UpdateSessionNameData, UpdateSessionNameErrors, UpdateSessionNameResponses, UpdateSessionUserRecipeValuesData, UpdateSessionUserRecipeValuesErrors, UpdateSessionUserRecipeValuesResponses, UpsertConfigData, UpsertConfigErrors, UpsertConfigResponses, UpsertPermissionsData, UpsertPermissionsErrors, UpsertPermissionsResponses, ValidateConfigData, ValidateConfigErrors, ValidateConfigResponses } from './types.gen';
|
||||
|
||||
export type Options<TData extends TDataShape = TDataShape, ThrowOnError extends boolean = boolean> = Options2<TData, ThrowOnError> & {
|
||||
/**
|
||||
@@ -310,6 +310,13 @@ export const startTetrateSetup = <ThrowOnError extends boolean = false>(options?
|
||||
});
|
||||
};
|
||||
|
||||
export const mcpUiProxy = <ThrowOnError extends boolean = false>(options: Options<McpUiProxyData, ThrowOnError>) => {
|
||||
return (options.client ?? client).get<McpUiProxyResponses, McpUiProxyErrors, ThrowOnError>({
|
||||
url: '/mcp-ui-proxy',
|
||||
...options
|
||||
});
|
||||
};
|
||||
|
||||
export const createRecipe = <ThrowOnError extends boolean = false>(options: Options<CreateRecipeData, ThrowOnError>) => {
|
||||
return (options.client ?? client).post<CreateRecipeResponses, CreateRecipeErrors, ThrowOnError>({
|
||||
url: '/recipes/create',
|
||||
|
||||
@@ -1725,6 +1725,32 @@ export type StartTetrateSetupResponses = {
|
||||
|
||||
export type StartTetrateSetupResponse = StartTetrateSetupResponses[keyof StartTetrateSetupResponses];
|
||||
|
||||
export type McpUiProxyData = {
|
||||
body?: never;
|
||||
path?: never;
|
||||
query: {
|
||||
/**
|
||||
* Secret key for authentication
|
||||
*/
|
||||
secret: string;
|
||||
};
|
||||
url: '/mcp-ui-proxy';
|
||||
};
|
||||
|
||||
export type McpUiProxyErrors = {
|
||||
/**
|
||||
* Unauthorized - invalid or missing secret
|
||||
*/
|
||||
401: unknown;
|
||||
};
|
||||
|
||||
export type McpUiProxyResponses = {
|
||||
/**
|
||||
* MCP UI proxy HTML page
|
||||
*/
|
||||
200: unknown;
|
||||
};
|
||||
|
||||
export type CreateRecipeData = {
|
||||
body: CreateRecipeRequest;
|
||||
path?: never;
|
||||
|
||||
@@ -5,6 +5,7 @@ import {
|
||||
UIActionResultNotification,
|
||||
UIActionResultPrompt,
|
||||
UIActionResultToolCall,
|
||||
UIActionResult,
|
||||
} from '@mcp-ui/client';
|
||||
import { useState, useEffect } from 'react';
|
||||
import { toast } from 'react-toastify';
|
||||
@@ -15,41 +16,6 @@ interface MCPUIResourceRendererProps {
|
||||
appendPromptToChat?: (value: string) => void;
|
||||
}
|
||||
|
||||
type UISizeChange = {
|
||||
type: 'ui-size-change';
|
||||
payload: {
|
||||
height: number;
|
||||
width: number;
|
||||
};
|
||||
};
|
||||
|
||||
// Reserved message types from iframe to host
|
||||
type UILifecycleIframeReady = {
|
||||
type: 'ui-lifecycle-iframe-ready';
|
||||
payload?: Record<string, unknown>;
|
||||
};
|
||||
|
||||
type UIRequestData = {
|
||||
type: 'ui-request-data';
|
||||
messageId: string;
|
||||
payload: {
|
||||
requestType: string;
|
||||
params: Record<string, unknown>;
|
||||
};
|
||||
};
|
||||
|
||||
// We are creating a new type to support all reserved message types that may come from the iframe
|
||||
// Not all reserved message types are currently exported by @mcp-ui/client
|
||||
type ActionEventsFromIframe =
|
||||
| UIActionResultIntent
|
||||
| UIActionResultLink
|
||||
| UIActionResultNotification
|
||||
| UIActionResultPrompt
|
||||
| UIActionResultToolCall
|
||||
| UISizeChange
|
||||
| UILifecycleIframeReady
|
||||
| UIRequestData;
|
||||
|
||||
// More specific result types using discriminated unions
|
||||
type UIActionHandlerSuccess<T = unknown> = {
|
||||
status: 'success';
|
||||
@@ -126,20 +92,34 @@ export default function MCPUIResourceRenderer({
|
||||
appendPromptToChat,
|
||||
}: MCPUIResourceRendererProps) {
|
||||
const [currentThemeValue, setCurrentThemeValue] = useState<string>('light');
|
||||
const [proxyUrl, setProxyUrl] = useState<string | undefined>(undefined);
|
||||
|
||||
useEffect(() => {
|
||||
const theme = localStorage.getItem('theme') || 'light';
|
||||
setCurrentThemeValue(theme);
|
||||
console.log('[MCP-UI] Current theme value:', theme);
|
||||
|
||||
const fetchProxyUrl = async () => {
|
||||
try {
|
||||
const baseUrl = await window.electron.getGoosedHostPort();
|
||||
const secretKey = await window.electron.getSecretKey();
|
||||
if (baseUrl && secretKey) {
|
||||
setProxyUrl(`${baseUrl}/mcp-ui-proxy?secret=${encodeURIComponent(secretKey)}`);
|
||||
} else {
|
||||
console.error('Failed to get goosed host/port or secret key');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching MCP-UI Proxy URL:', error);
|
||||
}
|
||||
};
|
||||
|
||||
fetchProxyUrl().catch(console.error);
|
||||
}, []);
|
||||
|
||||
const handleUIAction = async (
|
||||
actionEvent: ActionEventsFromIframe
|
||||
): Promise<UIActionHandlerResult> => {
|
||||
const handleUIAction = async (actionEvent: UIActionResult): Promise<UIActionHandlerResult> => {
|
||||
// result to pass back to the MCP-UI
|
||||
let result: UIActionHandlerResult;
|
||||
|
||||
const handleToolCase = async (
|
||||
const handleToolAction = async (
|
||||
actionEvent: UIActionResultToolCall
|
||||
): Promise<UIActionHandlerResult> => {
|
||||
const { toolName, params } = actionEvent.payload;
|
||||
@@ -156,7 +136,7 @@ export default function MCPUIResourceRenderer({
|
||||
};
|
||||
};
|
||||
|
||||
const handlePromptCase = async (
|
||||
const handlePromptAction = async (
|
||||
actionEvent: UIActionResultPrompt
|
||||
): Promise<UIActionHandlerResult> => {
|
||||
const { prompt } = actionEvent.payload;
|
||||
@@ -191,7 +171,9 @@ export default function MCPUIResourceRenderer({
|
||||
};
|
||||
};
|
||||
|
||||
const handleLinkCase = async (actionEvent: UIActionResultLink) => {
|
||||
const handleLinkAction = async (
|
||||
actionEvent: UIActionResultLink
|
||||
): Promise<UIActionHandlerResult> => {
|
||||
const { url } = actionEvent.payload;
|
||||
|
||||
try {
|
||||
@@ -244,7 +226,7 @@ export default function MCPUIResourceRenderer({
|
||||
}
|
||||
};
|
||||
|
||||
const handleNotifyCase = async (
|
||||
const handleNotifyAction = async (
|
||||
actionEvent: UIActionResultNotification
|
||||
): Promise<UIActionHandlerResult> => {
|
||||
const { message } = actionEvent.payload;
|
||||
@@ -262,7 +244,7 @@ export default function MCPUIResourceRenderer({
|
||||
};
|
||||
};
|
||||
|
||||
const handleIntentCase = async (
|
||||
const handleIntentAction = async (
|
||||
actionEvent: UIActionResultIntent
|
||||
): Promise<UIActionHandlerResult> => {
|
||||
toast.info(
|
||||
@@ -285,82 +267,31 @@ export default function MCPUIResourceRenderer({
|
||||
};
|
||||
};
|
||||
|
||||
const handleSizeChangeCase = async (
|
||||
actionEvent: UISizeChange
|
||||
): Promise<UIActionHandlerResult> => {
|
||||
return {
|
||||
status: 'success' as const,
|
||||
message: 'Size change handled',
|
||||
data: actionEvent.payload,
|
||||
};
|
||||
};
|
||||
|
||||
const handleIframeReadyCase = async (
|
||||
actionEvent: UILifecycleIframeReady
|
||||
): Promise<UIActionHandlerResult> => {
|
||||
console.log('[MCP-UI] Iframe ready to receive messages');
|
||||
return {
|
||||
status: 'success' as const,
|
||||
message: 'Iframe is ready to receive messages',
|
||||
data: actionEvent.payload,
|
||||
};
|
||||
};
|
||||
|
||||
const handleRequestDataCase = async (
|
||||
actionEvent: UIRequestData
|
||||
): Promise<UIActionHandlerResult> => {
|
||||
const { messageId, payload } = actionEvent;
|
||||
const { requestType, params } = payload;
|
||||
console.log('[MCP-UI] Data request received:', { messageId, requestType, params });
|
||||
return {
|
||||
status: 'success' as const,
|
||||
message: `Data request received: ${requestType}`,
|
||||
data: {
|
||||
messageId,
|
||||
requestType,
|
||||
params,
|
||||
response: { status: 'acknowledged' },
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
try {
|
||||
switch (actionEvent.type) {
|
||||
case 'tool':
|
||||
result = await handleToolCase(actionEvent);
|
||||
result = await handleToolAction(actionEvent);
|
||||
break;
|
||||
|
||||
case 'prompt':
|
||||
result = await handlePromptCase(actionEvent);
|
||||
result = await handlePromptAction(actionEvent);
|
||||
break;
|
||||
|
||||
case 'link':
|
||||
result = await handleLinkCase(actionEvent);
|
||||
result = await handleLinkAction(actionEvent);
|
||||
break;
|
||||
|
||||
case 'notify':
|
||||
result = await handleNotifyCase(actionEvent);
|
||||
result = await handleNotifyAction(actionEvent);
|
||||
break;
|
||||
|
||||
case 'intent':
|
||||
result = await handleIntentCase(actionEvent);
|
||||
break;
|
||||
|
||||
case 'ui-size-change':
|
||||
result = await handleSizeChangeCase(actionEvent);
|
||||
break;
|
||||
|
||||
case 'ui-lifecycle-iframe-ready':
|
||||
result = await handleIframeReadyCase(actionEvent);
|
||||
break;
|
||||
|
||||
case 'ui-request-data':
|
||||
result = await handleRequestDataCase(actionEvent);
|
||||
result = await handleIntentAction(actionEvent);
|
||||
break;
|
||||
|
||||
default: {
|
||||
const _exhaustiveCheck: never = actionEvent;
|
||||
console.error('Unhandled action type:', _exhaustiveCheck);
|
||||
console.error('Unhandled MCP-UI action type:', _exhaustiveCheck);
|
||||
result = {
|
||||
status: 'error',
|
||||
error: {
|
||||
@@ -372,7 +303,7 @@ export default function MCPUIResourceRenderer({
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('[MCP-UI] Unexpected error:', error);
|
||||
console.error('Unexpected error handling MCP-UI action:', error);
|
||||
result = {
|
||||
status: 'error',
|
||||
error: {
|
||||
@@ -383,12 +314,6 @@ export default function MCPUIResourceRenderer({
|
||||
};
|
||||
}
|
||||
|
||||
if (result.status === 'error') {
|
||||
console.error('[MCP-UI] Action failed:', result);
|
||||
} else {
|
||||
console.log('[MCP-UI] Action succeeded:', result);
|
||||
}
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
@@ -398,19 +323,20 @@ export default function MCPUIResourceRenderer({
|
||||
<UIResourceRenderer
|
||||
resource={content.resource}
|
||||
onUIAction={handleUIAction}
|
||||
supportedContentTypes={['rawHtml', 'externalUrl']} // Goose does not support remoteDom content
|
||||
htmlProps={{
|
||||
autoResizeIframe: {
|
||||
height: true,
|
||||
width: false, // set to false to allow for responsive design
|
||||
},
|
||||
sandboxPermissions: 'allow-forms', // enabled for experimentation, is spread into underlying iframe defaults
|
||||
iframeRenderData: {
|
||||
// iframeRenderData allows us to pass data down to MCP-UIs
|
||||
// MPC-UIs might find stuff like host and theme for conditional rendering
|
||||
// MCP-UIs might find stuff like host and theme for conditional rendering
|
||||
// usage of this is experimental, leaving in place for demos
|
||||
host: 'goose',
|
||||
theme: currentThemeValue,
|
||||
},
|
||||
proxy: proxyUrl, // refer to https://mcpui.dev/guide/client/using-a-proxy
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user