Skip to content

Commit 6d9d3a0

Browse files
ochafikochafik
committed
Merge origin/main into jerome/publish-examples
2 parents f477d93 + 79670b4 commit 6d9d3a0

15 files changed

Lines changed: 271 additions & 53 deletions

File tree

‎examples/basic-server-react/src/mcp-app.tsx‎

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/**
22
* @file App that demonstrates a few features using MCP Apps SDK + React.
33
*/
4-
import type { App } from "@modelcontextprotocol/ext-apps";
4+
import type { App, McpUiHostContext } from "@modelcontextprotocol/ext-apps";
55
import { useApp } from "@modelcontextprotocol/ext-apps/react";
66
import type { CallToolResult } from "@modelcontextprotocol/sdk/types.js";
77
import { StrictMode, useCallback, useEffect, useState } from "react";
@@ -27,6 +27,7 @@ function extractTime(callToolResult: CallToolResult): string {
2727

2828
function GetTimeApp() {
2929
const [toolResult, setToolResult] = useState<CallToolResult | null>(null);
30+
const [hostContext, setHostContext] = useState<McpUiHostContext | undefined>();
3031
const { app, error } = useApp({
3132
appInfo: IMPLEMENTATION,
3233
capabilities: {},
@@ -45,21 +46,32 @@ function GetTimeApp() {
4546
};
4647

4748
app.onerror = log.error;
49+
50+
app.onhostcontextchanged = (params) => {
51+
setHostContext((prev) => ({ ...prev, ...params }));
52+
};
4853
},
4954
});
5055

56+
useEffect(() => {
57+
if (app) {
58+
setHostContext(app.getHostContext());
59+
}
60+
}, [app]);
61+
5162
if (error) return <div><strong>ERROR:</strong> {error.message}</div>;
5263
if (!app) return <div>Connecting...</div>;
5364

54-
return <GetTimeAppInner app={app} toolResult={toolResult} />;
65+
return <GetTimeAppInner app={app} toolResult={toolResult} hostContext={hostContext} />;
5566
}
5667

5768

5869
interface GetTimeAppInnerProps {
5970
app: App;
6071
toolResult: CallToolResult | null;
72+
hostContext?: McpUiHostContext;
6173
}
62-
function GetTimeAppInner({ app, toolResult }: GetTimeAppInnerProps) {
74+
function GetTimeAppInner({ app, toolResult, hostContext }: GetTimeAppInnerProps) {
6375
const [serverTime, setServerTime] = useState("Loading...");
6476
const [messageText, setMessageText] = useState("This is message text.");
6577
const [logText, setLogText] = useState("This is log text.");
@@ -109,7 +121,15 @@ function GetTimeAppInner({ app, toolResult }: GetTimeAppInnerProps) {
109121
}, [app, linkUrl]);
110122

111123
return (
112-
<main className={styles.main}>
124+
<main
125+
className={styles.main}
126+
style={{
127+
paddingTop: hostContext?.safeAreaInsets?.top,
128+
paddingRight: hostContext?.safeAreaInsets?.right,
129+
paddingBottom: hostContext?.safeAreaInsets?.bottom,
130+
paddingLeft: hostContext?.safeAreaInsets?.left,
131+
}}
132+
>
113133
<p className={styles.notice}>Watch activity in the DevTools console!</p>
114134

115135
<div className={styles.action}>

‎examples/basic-server-vanillajs/src/mcp-app.ts‎

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/**
22
* @file App that demonstrates a few features using MCP Apps SDK with vanilla JS.
33
*/
4-
import { App } from "@modelcontextprotocol/ext-apps";
4+
import { App, type McpUiHostContext } from "@modelcontextprotocol/ext-apps";
55
import type { CallToolResult } from "@modelcontextprotocol/sdk/types.js";
66
import "./global.css";
77
import "./mcp-app.css";
@@ -21,6 +21,7 @@ function extractTime(result: CallToolResult): string {
2121

2222

2323
// Get element references
24+
const mainEl = document.querySelector(".main") as HTMLElement;
2425
const serverTimeEl = document.getElementById("server-time")!;
2526
const getTimeBtn = document.getElementById("get-time-btn")!;
2627
const messageText = document.getElementById("message-text") as HTMLTextAreaElement;
@@ -30,6 +31,15 @@ const sendLogBtn = document.getElementById("send-log-btn")!;
3031
const linkUrl = document.getElementById("link-url") as HTMLInputElement;
3132
const openLinkBtn = document.getElementById("open-link-btn")!;
3233

34+
function handleHostContextChanged(ctx: McpUiHostContext) {
35+
if (ctx.safeAreaInsets) {
36+
mainEl.style.paddingTop = `${ctx.safeAreaInsets.top}px`;
37+
mainEl.style.paddingRight = `${ctx.safeAreaInsets.right}px`;
38+
mainEl.style.paddingBottom = `${ctx.safeAreaInsets.bottom}px`;
39+
mainEl.style.paddingLeft = `${ctx.safeAreaInsets.left}px`;
40+
}
41+
}
42+
3343

3444
// Create app instance
3545
const app = new App({ name: "Get Time App", version: "1.0.0" });
@@ -51,6 +61,8 @@ app.ontoolresult = (result) => {
5161

5262
app.onerror = log.error;
5363

64+
app.onhostcontextchanged = handleHostContextChanged;
65+
5466

5567
// Add event listeners
5668
getTimeBtn.addEventListener("click", async () => {
@@ -92,4 +104,9 @@ openLinkBtn.addEventListener("click", async () => {
92104

93105

94106
// Connect to host
95-
app.connect();
107+
app.connect().then(() => {
108+
const ctx = app.getHostContext();
109+
if (ctx) {
110+
handleHostContextChanged(ctx);
111+
}
112+
});

‎examples/budget-allocator-server/src/mcp-app.ts‎

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/**
22
* Budget Allocator App - Interactive budget allocation with real-time visualization
33
*/
4-
import { App } from "@modelcontextprotocol/ext-apps";
4+
import { App, type McpUiHostContext } from "@modelcontextprotocol/ext-apps";
55
import { Chart, registerables } from "chart.js";
66
import "./global.css";
77
import "./mcp-app.css";
@@ -87,6 +87,7 @@ const state: AppState = {
8787
// DOM References
8888
// ---------------------------------------------------------------------------
8989

90+
const appContainer = document.querySelector(".app-container") as HTMLElement;
9091
const budgetSelector = document.getElementById(
9192
"budget-selector",
9293
) as HTMLSelectElement;
@@ -620,6 +621,17 @@ app.ontoolresult = (result) => {
620621

621622
app.onerror = log.error;
622623

624+
function handleHostContextChanged(ctx: McpUiHostContext) {
625+
if (ctx.safeAreaInsets) {
626+
appContainer.style.paddingTop = `${ctx.safeAreaInsets.top}px`;
627+
appContainer.style.paddingRight = `${ctx.safeAreaInsets.right}px`;
628+
appContainer.style.paddingBottom = `${ctx.safeAreaInsets.bottom}px`;
629+
appContainer.style.paddingLeft = `${ctx.safeAreaInsets.left}px`;
630+
}
631+
}
632+
633+
app.onhostcontextchanged = handleHostContextChanged;
634+
623635
// Handle theme changes
624636
window
625637
.matchMedia("(prefers-color-scheme: dark)")
@@ -631,4 +643,9 @@ window
631643
});
632644

633645
// Connect to host
634-
app.connect();
646+
app.connect().then(() => {
647+
const ctx = app.getHostContext();
648+
if (ctx) {
649+
handleHostContextChanged(ctx);
650+
}
651+
});

‎examples/cohort-heatmap-server/src/mcp-app.tsx‎

Lines changed: 32 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
* Interactive cohort retention analysis heatmap showing customer retention
55
* over time by signup month. Hover for details, click to drill down.
66
*/
7-
import type { App } from "@modelcontextprotocol/ext-apps";
7+
import type { App, McpUiHostContext } from "@modelcontextprotocol/ext-apps";
88
import { useApp } from "@modelcontextprotocol/ext-apps/react";
99
import { StrictMode, useCallback, useEffect, useMemo, useState } from "react";
1010
import { createRoot } from "react-dom/client";
@@ -65,19 +65,39 @@ function formatNumber(n: number): string {
6565

6666
// Main App Component
6767
function CohortHeatmapApp() {
68+
const [hostContext, setHostContext] = useState<
69+
McpUiHostContext | undefined
70+
>();
6871
const { app, error } = useApp({
6972
appInfo: IMPLEMENTATION,
7073
capabilities: {},
74+
onAppCreated: (app) => {
75+
app.onhostcontextchanged = (params) => {
76+
setHostContext((prev) => ({ ...prev, ...params }));
77+
};
78+
},
7179
});
7280

81+
useEffect(() => {
82+
if (app) {
83+
setHostContext(app.getHostContext());
84+
}
85+
}, [app]);
86+
7387
if (error) return <div className={styles.error}>ERROR: {error.message}</div>;
7488
if (!app) return <div className={styles.loading}>Connecting...</div>;
7589

76-
return <CohortHeatmapInner app={app} />;
90+
return <CohortHeatmapInner app={app} hostContext={hostContext} />;
7791
}
7892

7993
// Inner App with state management
80-
function CohortHeatmapInner({ app }: { app: App }) {
94+
function CohortHeatmapInner({
95+
app,
96+
hostContext,
97+
}: {
98+
app: App;
99+
hostContext?: McpUiHostContext;
100+
}) {
81101
const [data, setData] = useState<CohortData | null>(null);
82102
const [loading, setLoading] = useState(true);
83103
const [selectedMetric, setSelectedMetric] = useState<MetricType>("retention");
@@ -143,7 +163,15 @@ function CohortHeatmapInner({ app }: { app: App }) {
143163
}, []);
144164

145165
return (
146-
<main className={styles.container}>
166+
<main
167+
className={styles.container}
168+
style={{
169+
paddingTop: hostContext?.safeAreaInsets?.top,
170+
paddingRight: hostContext?.safeAreaInsets?.right,
171+
paddingBottom: hostContext?.safeAreaInsets?.bottom,
172+
paddingLeft: hostContext?.safeAreaInsets?.left,
173+
}}
174+
>
147175
<Header
148176
selectedMetric={selectedMetric}
149177
selectedPeriodType={selectedPeriodType}

‎examples/customer-segmentation-server/src/mcp-app.ts‎

Lines changed: 21 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66
applyHostStyleVariables,
77
applyHostFonts,
88
applyDocumentTheme,
9+
type McpUiHostContext,
910
} from "@modelcontextprotocol/ext-apps";
1011
import { Chart, registerables } from "chart.js";
1112
import "./global.css";
@@ -22,6 +23,7 @@ const log = {
2223
};
2324

2425
// DOM element references
26+
const mainEl = document.querySelector(".main") as HTMLElement;
2527
const xAxisSelect = document.getElementById("x-axis") as HTMLSelectElement;
2628
const yAxisSelect = document.getElementById("y-axis") as HTMLSelectElement;
2729
const sizeMetricSelect = document.getElementById(
@@ -449,34 +451,35 @@ applyDocumentTheme(systemDark ? "dark" : "light");
449451
app.onerror = log.error;
450452

451453
// Handle host context changes (theme, styles, and fonts from host)
452-
app.onhostcontextchanged = (params) => {
453-
if (params.theme) {
454-
applyDocumentTheme(params.theme);
454+
function handleHostContextChanged(ctx: McpUiHostContext) {
455+
if (ctx.theme) {
456+
applyDocumentTheme(ctx.theme);
457+
}
458+
if (ctx.styles?.variables) {
459+
applyHostStyleVariables(ctx.styles.variables);
455460
}
456-
if (params.styles?.variables) {
457-
applyHostStyleVariables(params.styles.variables);
461+
if (ctx.styles?.css?.fonts) {
462+
applyHostFonts(ctx.styles.css.fonts);
458463
}
459-
if (params.styles?.css?.fonts) {
460-
applyHostFonts(params.styles.css.fonts);
464+
if (ctx.safeAreaInsets) {
465+
mainEl.style.paddingTop = `${ctx.safeAreaInsets.top}px`;
466+
mainEl.style.paddingRight = `${ctx.safeAreaInsets.right}px`;
467+
mainEl.style.paddingBottom = `${ctx.safeAreaInsets.bottom}px`;
468+
mainEl.style.paddingLeft = `${ctx.safeAreaInsets.left}px`;
461469
}
462470
// Recreate chart to pick up new colors
463-
if (state.chart && (params.theme || params.styles?.variables)) {
471+
if (state.chart && (ctx.theme || ctx.styles?.variables)) {
464472
state.chart.destroy();
465473
state.chart = initChart();
466474
}
467-
};
475+
}
476+
477+
app.onhostcontextchanged = handleHostContextChanged;
468478

469479
app.connect().then(() => {
470-
// Apply initial host context after connection
471480
const ctx = app.getHostContext();
472-
if (ctx?.theme) {
473-
applyDocumentTheme(ctx.theme);
474-
}
475-
if (ctx?.styles?.variables) {
476-
applyHostStyleVariables(ctx.styles.variables);
477-
}
478-
if (ctx?.styles?.css?.fonts) {
479-
applyHostFonts(ctx.styles.css.fonts);
481+
if (ctx) {
482+
handleHostContextChanged(ctx);
480483
}
481484
});
482485

‎examples/integration-server/src/mcp-app.tsx‎

Lines changed: 36 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/**
22
* @file App that demonstrates a few features using MCP Apps SDK + React.
33
*/
4-
import type { App } from "@modelcontextprotocol/ext-apps";
4+
import type { App, McpUiHostContext } from "@modelcontextprotocol/ext-apps";
55
import { useApp } from "@modelcontextprotocol/ext-apps/react";
66
import type { CallToolResult } from "@modelcontextprotocol/sdk/types.js";
77
import { StrictMode, useCallback, useEffect, useState } from "react";
@@ -29,6 +29,9 @@ function extractTime(callToolResult: CallToolResult): string {
2929

3030
function GetTimeApp() {
3131
const [toolResult, setToolResult] = useState<CallToolResult | null>(null);
32+
const [hostContext, setHostContext] = useState<
33+
McpUiHostContext | undefined
34+
>();
3235
const { app, error } = useApp({
3336
appInfo: IMPLEMENTATION,
3437
capabilities: {},
@@ -49,9 +52,19 @@ function GetTimeApp() {
4952
};
5053

5154
app.onerror = log.error;
55+
56+
app.onhostcontextchanged = (params) => {
57+
setHostContext((prev) => ({ ...prev, ...params }));
58+
};
5259
},
5360
});
5461

62+
useEffect(() => {
63+
if (app) {
64+
setHostContext(app.getHostContext());
65+
}
66+
}, [app]);
67+
5568
if (error)
5669
return (
5770
<div>
@@ -60,14 +73,25 @@ function GetTimeApp() {
6073
);
6174
if (!app) return <div>Connecting...</div>;
6275

63-
return <GetTimeAppInner app={app} toolResult={toolResult} />;
76+
return (
77+
<GetTimeAppInner
78+
app={app}
79+
toolResult={toolResult}
80+
hostContext={hostContext}
81+
/>
82+
);
6483
}
6584

6685
interface GetTimeAppInnerProps {
6786
app: App;
6887
toolResult: CallToolResult | null;
88+
hostContext?: McpUiHostContext;
6989
}
70-
function GetTimeAppInner({ app, toolResult }: GetTimeAppInnerProps) {
90+
function GetTimeAppInner({
91+
app,
92+
toolResult,
93+
hostContext,
94+
}: GetTimeAppInnerProps) {
7195
const [serverTime, setServerTime] = useState("Loading...");
7296
const [messageText, setMessageText] = useState("This is message text.");
7397
const [logText, setLogText] = useState("This is log text.");
@@ -120,7 +144,15 @@ function GetTimeAppInner({ app, toolResult }: GetTimeAppInnerProps) {
120144
}, [app, linkUrl]);
121145

122146
return (
123-
<main className={styles.main}>
147+
<main
148+
className={styles.main}
149+
style={{
150+
paddingTop: hostContext?.safeAreaInsets?.top,
151+
paddingRight: hostContext?.safeAreaInsets?.right,
152+
paddingBottom: hostContext?.safeAreaInsets?.bottom,
153+
paddingLeft: hostContext?.safeAreaInsets?.left,
154+
}}
155+
>
124156
<p className={styles.notice}>Watch activity in the DevTools console!</p>
125157

126158
<div className={styles.action}>

0 commit comments

Comments
 (0)