Skip to content

Commit 7fe9b20

Browse files
jonathanhefnerjonathanhefner
committed
deploy: 93df614 
1 parent 42ae169 commit 7fe9b20

1 file changed

Lines changed: 8 additions & 47 deletions

File tree

‎api/documents/Overview.html‎

Lines changed: 8 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,12 @@
3232
position: static;
3333
}
3434
</style>
35+
36+
<style>
37+
:root[data-theme="dark"] .mermaid-block .mermaid svg {
38+
filter: invert(1) hue-rotate(180deg);
39+
}
40+
</style>
3541
</head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => window.app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><a href="../index.html" class="title">@modelcontextprotocol/ext-apps - v0.4.1</a><div id="tsd-toolbar-links"><a href="https://github.com/modelcontextprotocol/ext-apps">GitHub</a><a href="https://github.com/modelcontextprotocol/ext-apps/blob/main/specification/draft/apps.mdx">Specification</a></div><button id="tsd-search-trigger" class="tsd-widget" aria-label="Search"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-search"></use></svg></button><dialog id="tsd-search" aria-label="Search"><input role="combobox" id="tsd-search-input" aria-controls="tsd-search-results" aria-autocomplete="list" aria-expanded="true" autocapitalize="off" autocomplete="off" placeholder="Search the docs" maxLength="100"/><ul role="listbox" id="tsd-search-results"></ul><div id="tsd-search-status" aria-live="polite" aria-atomic="true"><div>Preparing search index...</div></div></dialog><a href="#" class="tsd-widget menu" id="tsd-toolbar-menu-trigger" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb" aria-label="Breadcrumb"><li><a href="" aria-current="page">Overview</a></li></ul></div><div class="tsd-panel tsd-typography"><h1 id="mcp-apps-overview" class="tsd-anchor-link">MCP Apps Overview<a href="#mcp-apps-overview" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h1>
3642
<p>MCP Apps is an extension to the Model Context Protocol that enables MCP servers to deliver interactive user interfaces to hosts. It defines how servers declare UI resources, how hosts render them securely in iframes, and how the two communicate.</p>
3743
<h2 id="why-mcp-apps" class="tsd-anchor-link">Why MCP Apps?<a href="#why-mcp-apps" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2>
@@ -50,23 +56,7 @@ <h2 id="progressive-enhancement" class="tsd-anchor-link">Progressive Enhancement
5056
<p>See the <a href="https://github.com/modelcontextprotocol/ext-apps/blob/main/specification/draft/apps.mdx#clientserver-capability-negotiation">Client&lt;&gt;Server Capability Negotiation</a> section of the specification.</p>
5157
<h2 id="architecture" class="tsd-anchor-link">Architecture<a href="#architecture" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2>
5258
<p>In MCP Apps, three entities work together:</p>
53-
<div class="mermaid-block"><div class="mermaid dark">%%{init:{"theme":"dark"}}%%
54-
flowchart LR
55-
subgraph Server ["MCP Server"]
56-
T[Tools]
57-
R[UI Resources]
58-
end
59-
60-
subgraph Host ["Host (Chat Client)"]
61-
B[AppBridge]
62-
end
63-
64-
subgraph View ["View (iframe)"]
65-
A[App]
66-
end
67-
68-
Server <-->|MCP Protocol| Host
69-
Host <-->|postMessage| View</div><div class="mermaid light">%%{init:{"theme":"default"}}%%
59+
<div class="mermaid-block"><div class="mermaid" style="display: block">%%{init:{"theme":"default"}}%%
7060
flowchart LR
7161
subgraph Server ["MCP Server"]
7262
T[Tools]
@@ -106,36 +96,7 @@ <h2 id="architecture" class="tsd-anchor-link">Architecture<a href="#architecture
10696
</ul>
10797
<p>The View acts as an MCP client, the Host acts as a proxy, and the Server is a standard MCP server.</p>
10898
<h2 id="lifecycle" class="tsd-anchor-link">Lifecycle<a href="#lifecycle" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2>
109-
<div class="mermaid-block"><div class="mermaid dark">%%{init:{"theme":"dark"}}%%
110-
sequenceDiagram
111-
participant H as Host
112-
participant V as View (iframe)
113-
participant S as MCP Server
114-
115-
Note over H,S: 1. Discovery
116-
S-->>H: tools/list (with UI metadata)
117-
118-
Note over H,V: 2. Initialization
119-
H->>H: Render iframe with UI resource
120-
V->>H: ui/initialize
121-
H-->>V: host context, capabilities
122-
V->>H: ui/notifications/initialized
123-
124-
Note over H,V: 3. Data Delivery
125-
H-->>V: ui/notifications/tool-input
126-
H-->>V: ui/notifications/tool-result
127-
128-
Note over H,V: 4. Interactive Phase
129-
loop User Interaction
130-
V->>H: tools/call
131-
H->>S: tools/call
132-
S-->>H: result
133-
H-->>V: result
134-
end
135-
136-
Note over H,V: 5. Teardown
137-
H->>V: ui/resource-teardown
138-
V-->>H: acknowledgment</div><div class="mermaid light">%%{init:{"theme":"default"}}%%
99+
<div class="mermaid-block"><div class="mermaid" style="display: block">%%{init:{"theme":"default"}}%%
139100
sequenceDiagram
140101
participant H as Host
141102
participant V as View (iframe)

0 commit comments

Comments
 (0)