n8n-mcp 2.47.8 → 2.47.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -5,17 +5,17 @@
5
5
  [![npm version](https://img.shields.io/npm/v/n8n-mcp.svg)](https://www.npmjs.com/package/n8n-mcp)
6
6
  [![codecov](https://codecov.io/gh/czlonkowski/n8n-mcp/graph/badge.svg?token=YOUR_TOKEN)](https://codecov.io/gh/czlonkowski/n8n-mcp)
7
7
  [![Tests](https://img.shields.io/badge/tests-3336%20passing-brightgreen.svg)](https://github.com/czlonkowski/n8n-mcp/actions)
8
- [![n8n version](https://img.shields.io/badge/n8n-2.14.2-orange.svg)](https://github.com/n8n-io/n8n)
8
+ [![n8n version](https://img.shields.io/badge/n8n-2.16.1-orange.svg)](https://github.com/n8n-io/n8n)
9
9
  [![Docker](https://img.shields.io/badge/docker-ghcr.io%2Fczlonkowski%2Fn8n--mcp-green.svg)](https://github.com/czlonkowski/n8n-mcp/pkgs/container/n8n-mcp)
10
10
  [![Deploy on Railway](https://railway.com/button.svg)](https://railway.com/deploy/n8n-mcp?referralCode=n8n-mcp)
11
11
 
12
- A Model Context Protocol (MCP) server that provides AI assistants with comprehensive access to n8n node documentation, properties, and operations. Deploy in minutes to give Claude and other AI assistants deep knowledge about n8n's 1,396 workflow automation nodes (812 core + 584 community).
12
+ A Model Context Protocol (MCP) server that provides AI assistants with comprehensive access to n8n node documentation, properties, and operations. Deploy in minutes to give Claude and other AI assistants deep knowledge about n8n's 1,505 workflow automation nodes (812 core + 693 community).
13
13
 
14
14
  ## Overview
15
15
 
16
16
  n8n-MCP serves as a bridge between n8n's workflow automation platform and AI models, enabling them to understand and work with n8n nodes effectively. It provides structured access to:
17
17
 
18
- - **1,396 n8n nodes** - 812 core nodes + 584 community nodes (516 verified)
18
+ - **1,505 n8n nodes** - 812 core nodes + 693 community nodes (605 verified)
19
19
  - **Node properties** - 99% coverage with detailed schemas
20
20
  - **Node operations** - 63.6% coverage of available actions
21
21
  - **Documentation** - 87% coverage from official n8n docs (including AI nodes)
package/data/nodes.db CHANGED
Binary file
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "n8n-mcp",
3
- "version": "2.47.8",
3
+ "version": "2.47.9",
4
4
  "description": "Integration between n8n workflow automation and Model Context Protocol (MCP)",
5
5
  "dependencies": {
6
6
  "@modelcontextprotocol/sdk": "1.20.1",
@@ -128,7 +128,7 @@ Boolean requesting whether a visible border and background is provided by the ho
128
128
  - omitted: host decides border`)});M({method:E("ui/request-display-mode"),params:M({mode:yi.describe("The display mode being requested.")})});var HT=M({mode:yi.describe("The display mode that was actually set. May differ from requested if not supported.")}).passthrough(),kT=re([E("model"),E("app")]).describe("Tool visibility scope - who can access the tool.");M({resourceUri:R().optional(),visibility:W(kT).optional().describe(`Who can access this tool. Default: ["model", "app"]
129
129
  - "model": Tool visible to and callable by the agent
130
130
  - "app": Tool callable by the app from this server only`)});M({mimeTypes:W(R()).optional().describe('Array of supported MIME types for UI resources.\nMust include `"text/html;profile=mcp-app"` for MCP Apps support.')});M({method:E("ui/download-file"),params:M({contents:W(re([Wp,Fp])).describe("Resource contents to download — embedded (inline data) or linked (host fetches). Uses standard MCP resource types.")})});M({method:E("ui/message"),params:M({role:E("user").describe('Message role, currently only "user" is supported.'),content:W(Ai).describe("Message content blocks (text, image, etc.).")})});M({method:E("ui/notifications/sandbox-resource-ready"),params:M({html:R().describe("HTML content to load into the inner iframe."),sandbox:R().optional().describe("Optional override for the inner iframe's sandbox attribute."),csp:mr.optional().describe("CSP configuration from resource metadata."),permissions:pr.optional().describe("Sandbox permissions from resource metadata.")})});var jT=M({method:E("ui/notifications/tool-result"),params:oo.describe("Standard MCP tool execution result.")}),lg=M({toolInfo:M({id:bi.optional().describe("JSON-RPC id of the tools/call request."),tool:dr.describe("Tool definition including name, inputSchema, etc.")}).optional().describe("Metadata of the tool call that instantiated this App."),theme:TT.optional().describe("Current color theme preference."),styles:xT.optional().describe("Style configuration for theming the app."),displayMode:yi.optional().describe("How the UI is currently displayed."),availableDisplayModes:W(yi).optional().describe("Display modes the host supports."),containerDimensions:re([M({height:ae().describe("Fixed container height in pixels.")}),M({maxHeight:re([ae(),Hs()]).optional().describe("Maximum container height in pixels.")})]).and(re([M({width:ae().describe("Fixed container width in pixels.")}),M({maxWidth:re([ae(),Hs()]).optional().describe("Maximum container width in pixels.")})])).optional().describe(`Container dimensions. Represents the dimensions of the iframe or other
131
- container holding the app. Specify either width or maxWidth, and either height or maxHeight.`),locale:R().optional().describe("User's language and region preference in BCP 47 format."),timeZone:R().optional().describe("User's timezone in IANA format."),userAgent:R().optional().describe("Host application identifier."),platform:re([E("web"),E("desktop"),E("mobile")]).optional().describe("Platform type for responsive design decisions."),deviceCapabilities:M({touch:Ze().optional().describe("Whether the device supports touch input."),hover:Ze().optional().describe("Whether the device supports hover interactions.")}).optional().describe("Device input capabilities."),safeAreaInsets:M({top:ae().describe("Top safe area inset in pixels."),right:ae().describe("Right safe area inset in pixels."),bottom:ae().describe("Bottom safe area inset in pixels."),left:ae().describe("Left safe area inset in pixels.")}).optional().describe("Mobile safe area boundaries in pixels.")}).passthrough(),BT=M({method:E("ui/notifications/host-context-changed"),params:lg.describe("Partial context update containing only changed fields.")});M({method:E("ui/update-model-context"),params:M({content:W(Ai).optional().describe("Context content blocks (text, image, etc.)."),structuredContent:_e(R(),xe().describe("Structured content for machine-readable context data.")).optional().describe("Structured content for machine-readable context data.")})});M({method:E("ui/initialize"),params:M({appInfo:io.describe("App identification (name and version)."),appCapabilities:qT.describe("Features and capabilities this app provides."),protocolVersion:R().describe("Protocol version this app supports.")})});var YT=M({protocolVersion:R().describe('Negotiated protocol version string (e.g., "2025-11-21").'),hostInfo:io.describe("Host application identification and version."),hostCapabilities:ZT.describe("Features and capabilities provided by the host."),hostContext:lg.describe("Rich context about the host environment.")}).passthrough();function Fm(a){let i=document.documentElement;i.setAttribute("data-theme",a),i.style.colorScheme=a}function Pm(a,i=document.documentElement){for(let[u,c]of Object.entries(a))c!==void 0&&i.style.setProperty(u,c)}function ep(a){if(document.getElementById("__mcp-host-fonts"))return;let i=document.createElement("style");i.id="__mcp-host-fonts",i.textContent=a,document.head.appendChild(i)}class LT extends bT{constructor(u,c={},r={autoResize:!0}){super(r);je(this,"_appInfo");je(this,"_capabilities");je(this,"options");je(this,"_hostCapabilities");je(this,"_hostInfo");je(this,"_hostContext");je(this,"eventSchemas",{toolinput:MT,toolinputpartial:NT,toolresult:jT,toolcancelled:CT,hostcontextchanged:BT});je(this,"_onteardown");je(this,"_oncalltool");je(this,"_onlisttools");je(this,"sendOpenLink",this.openLink);this._appInfo=u,this._capabilities=c,this.options=r,this.setRequestHandler(uo,d=>(console.log("Received ping:",d.params),{})),this.setEventHandler("hostcontextchanged",void 0)}onEventDispatch(u,c){u==="hostcontextchanged"&&(this._hostContext={...this._hostContext,...c})}getHostCapabilities(){return this._hostCapabilities}getHostVersion(){return this._hostInfo}getHostContext(){return this._hostContext}get ontoolinput(){return this.getEventHandler("toolinput")}set ontoolinput(u){this.setEventHandler("toolinput",u)}get ontoolinputpartial(){return this.getEventHandler("toolinputpartial")}set ontoolinputpartial(u){this.setEventHandler("toolinputpartial",u)}get ontoolresult(){return this.getEventHandler("toolresult")}set ontoolresult(u){this.setEventHandler("toolresult",u)}get ontoolcancelled(){return this.getEventHandler("toolcancelled")}set ontoolcancelled(u){this.setEventHandler("toolcancelled",u)}get onhostcontextchanged(){return this.getEventHandler("hostcontextchanged")}set onhostcontextchanged(u){this.setEventHandler("hostcontextchanged",u)}get onteardown(){return this._onteardown}set onteardown(u){this.warnIfRequestHandlerReplaced("onteardown",this._onteardown,u),this._onteardown=u,this.replaceRequestHandler(UT,(c,r)=>{if(!this._onteardown)throw Error("No onteardown handler set");return this._onteardown(c.params,r)})}get oncalltool(){return this._oncalltool}set oncalltool(u){this.warnIfRequestHandlerReplaced("oncalltool",this._oncalltool,u),this._oncalltool=u,this.replaceRequestHandler(eg,(c,r)=>{if(!this._oncalltool)throw Error("No oncalltool handler set");return this._oncalltool(c.params,r)})}get onlisttools(){return this._onlisttools}set onlisttools(u){this.warnIfRequestHandlerReplaced("onlisttools",this._onlisttools,u),this._onlisttools=u,this.replaceRequestHandler(Pp,(c,r)=>{if(!this._onlisttools)throw Error("No onlisttools handler set");return this._onlisttools(c.params,r)})}assertCapabilityForMethod(u){}assertRequestHandlerCapability(u){switch(u){case"tools/call":case"tools/list":if(!this._capabilities.tools)throw Error(`Client does not support tool capability (required for ${u})`);return;case"ping":case"ui/resource-teardown":return;default:throw Error(`No handler for method ${u} registered`)}}assertNotificationCapability(u){}assertTaskCapability(u){throw Error("Tasks are not supported in MCP Apps")}assertTaskHandlerCapability(u){throw Error("Task handlers are not supported in MCP Apps")}async callServerTool(u,c){if(typeof u=="string")throw Error(`callServerTool() expects an object as its first argument, but received a string ("${u}"). Did you mean: callServerTool({ name: "${u}", arguments: { ... } })?`);return await this.request({method:"tools/call",params:u},oo,c)}async readServerResource(u,c){return await this.request({method:"resources/read",params:u},Ip,c)}async listServerResources(u,c){return await this.request({method:"resources/list",params:u},Kp,c)}sendMessage(u,c){return this.request({method:"ui/message",params:u},wT,c)}sendLog(u){return this.notification({method:"notifications/message",params:u})}updateModelContext(u,c){return this.request({method:"ui/update-model-context",params:u},Ws,c)}openLink(u,c){return this.request({method:"ui/open-link",params:u},AT,c)}downloadFile(u,c){return this.request({method:"ui/download-file",params:u},RT,c)}requestTeardown(u={}){return this.notification({method:"ui/notifications/request-teardown",params:u})}requestDisplayMode(u,c){return this.request({method:"ui/request-display-mode",params:u},HT,c)}sendSizeChanged(u){return this.notification({method:"ui/notifications/size-changed",params:u})}setupSizeChangedNotifications(){let u=!1,c=0,r=0,d=()=>{u||(u=!0,requestAnimationFrame(()=>{u=!1;let v=document.documentElement,g=v.style.height;v.style.height="max-content";let p=Math.ceil(v.getBoundingClientRect().height);v.style.height=g;let S=Math.ceil(window.innerWidth);(S!==c||p!==r)&&(c=S,r=p,this.sendSizeChanged({width:S,height:p}))}))};d();let h=new ResizeObserver(d);return h.observe(document.documentElement),h.observe(document.body),()=>h.disconnect()}async connect(u=new ag(window.parent,window.parent),c){var r;if(this.transport)throw Error("App is already connected. Call close() before connecting again.");await super.connect(u);try{let d=await this.request({method:"ui/initialize",params:{appCapabilities:this._capabilities,appInfo:this._appInfo,protocolVersion:ST}},YT,c);if(d===void 0)throw Error(`Server sent invalid initialize result: ${d}`);this._hostCapabilities=d.hostCapabilities,this._hostInfo=d.hostInfo,this._hostContext=d.hostContext,await this.notification({method:"ui/notifications/initialized"}),(r=this.options)!=null&&r.autoResize&&this.setupSizeChangedNotifications()}catch(d){throw this.close(),d}}}function GT({appInfo:a,capabilities:i,onAppCreated:u}){let[c,r]=kt.useState(null),[d,h]=kt.useState(!1),[v,g]=kt.useState(null);return kt.useEffect(()=>{let p=!0;async function S(){try{let T=new ag(window.parent,window.parent),H=new LT(a,i);u==null||u(H),await H.connect(T),p&&(r(H),h(!0),g(null))}catch(T){p&&(r(null),h(!1),g(T instanceof Error?T:Error("Failed to connect")))}}return S(),()=>{p=!1}},[]),{app:c,isConnected:d,error:v}}function XT(a,i){let u=kt.useRef(!1);kt.useEffect(()=>{var c,r;u.current||(i!=null&&i.theme&&Fm(i.theme),(c=i==null?void 0:i.styles)!=null&&c.variables&&Pm(i.styles.variables),(i!=null&&i.theme||(r=i==null?void 0:i.styles)!=null&&r.variables)&&(u.current=!0))},[i]),kt.useEffect(()=>{if(!a)return;let c=r=>{var d;r.theme&&Fm(r.theme),(d=r.styles)!=null&&d.variables&&Pm(r.styles.variables)};return a.addEventListener("hostcontextchanged",c),()=>a.removeEventListener("hostcontextchanged",c)},[a])}function VT(a,i){let u=kt.useRef(!1);kt.useEffect(()=>{var c,r;u.current||(r=(c=i==null?void 0:i.styles)==null?void 0:c.css)!=null&&r.fonts&&(ep(i.styles.css.fonts),u.current=!0)},[i]),kt.useEffect(()=>{if(!a)return;let c=r=>{var d,h;(h=(d=r.styles)==null?void 0:d.css)!=null&&h.fonts&&ep(r.styles.css.fonts)};return a.addEventListener("hostcontextchanged",c),()=>a.removeEventListener("hostcontextchanged",c)},[a])}function QT(a,i){XT(a,i),VT(a,i)}function $T(){var v,g;const[a,i]=kt.useState(null),u=kt.useCallback(p=>{p.ontoolresult=S=>{if(S!=null&&S.content){const T=Array.isArray(S.content)?S.content.find(H=>H.type==="text"):null;if(T&&"text"in T)try{i(JSON.parse(T.text))}catch{i(T.text)}}}},[]),{app:c,isConnected:r,error:d}=GT({appInfo:{name:"n8n-mcp-ui",version:"1.0.0"},capabilities:{},onAppCreated:u});QT(c,c==null?void 0:c.getHostContext());const h=((g=(v=c==null?void 0:c.getHostContext())==null?void 0:v.toolInfo)==null?void 0:g.tool.name)??null;return{data:a,error:(d==null?void 0:d.message)??null,isConnected:r,app:c,toolName:h}}function JT(a){switch(a){case"success":return{variant:"success",label:"Success"};case"error":case"failed":case"crashed":return{variant:"error",label:"Error"};case"waiting":return{variant:"warning",label:"Waiting"};case"running":return{variant:"info",label:"Running"};default:return{variant:"info",label:a??"Unknown"}}}function KT(a,i){if(!a||!i)return"–";try{const u=new Date(i).getTime()-new Date(a).getTime();return u<1e3?`${u}ms`:u<6e4?`${(u/1e3).toFixed(1)}s`:`${Math.floor(u/6e4)}m ${Math.floor(u%6e4/1e3)}s`}catch{return"–"}}function IT(a){if(!a)return"";try{return new Date(a).toLocaleString(void 0,{month:"short",day:"numeric",hour:"2-digit",minute:"2-digit"})}catch{return a}}function WT(a){switch(a){case"success":return"success";case"error":case"failed":case"crashed":return"error";case"waiting":return"waiting";case"running":return"running";default:return"unknown"}}function FT(){var v,g;const{data:a,error:i,isConnected:u}=$T(),c=((v=a==null?void 0:a.data)==null?void 0:v.executions)??[],r=kt.useMemo(()=>{const p={success:0,error:0,waiting:0,running:0,unknown:0};for(const S of c)p[WT(S.status)]++;return p},[c]);if(i)return ne.jsxs("div",{style:{padding:"16px",color:"#ef4444"},children:["Error: ",i]});if(!u)return ne.jsx("div",{style:{padding:"16px",color:"var(--n8n-text-muted)"},children:"Connecting..."});if(!a)return ne.jsx("div",{style:{padding:"16px",color:"var(--n8n-text-muted)"},children:"Waiting for data..."});if(!a.success&&a.error)return ne.jsxs("div",{style:{maxWidth:"480px"},children:[ne.jsx(wm,{variant:"error",children:"Error"}),ne.jsx("div",{style:{marginTop:"8px",fontSize:"13px",color:"var(--n8n-error)"},children:a.error})]});const d=c.length,h=[];return d>0&&(r.success>0&&h.push({color:"var(--n8n-success)",pct:r.success/d*100}),r.error>0&&h.push({color:"var(--n8n-error)",pct:r.error/d*100}),r.waiting>0&&h.push({color:"var(--n8n-warning)",pct:r.waiting/d*100}),r.running>0&&h.push({color:"var(--n8n-info)",pct:r.running/d*100}),r.unknown>0&&h.push({color:"var(--n8n-border)",pct:r.unknown/d*100})),ne.jsxs("div",{style:{maxWidth:"480px"},children:[d>0&&ne.jsxs("div",{style:{marginBottom:"12px"},children:[ne.jsx("div",{style:{height:"6px",borderRadius:"3px",background:"var(--n8n-border)",overflow:"hidden",display:"flex"},children:h.map((p,S)=>ne.jsx("div",{style:{width:`${p.pct}%`,background:p.color,minWidth:"3px"}},S))}),ne.jsxs("div",{style:{fontSize:"12px",color:"var(--color-text-secondary, var(--n8n-text-muted))",marginTop:"6px"},children:[r.success>0&&ne.jsxs(ne.Fragment,{children:[ne.jsx("span",{style:{color:"var(--n8n-success)",fontWeight:500},children:r.success})," succeeded"]}),r.error>0&&ne.jsxs(ne.Fragment,{children:[r.success>0&&", ",ne.jsx("span",{style:{color:"var(--n8n-error)",fontWeight:500},children:r.error})," failed"]}),r.waiting>0&&ne.jsxs(ne.Fragment,{children:[(r.success>0||r.error>0)&&", ",ne.jsx("span",{style:{color:"var(--n8n-warning)",fontWeight:500},children:r.waiting})," waiting"]}),r.running>0&&ne.jsxs(ne.Fragment,{children:[(r.success>0||r.error>0||r.waiting>0)&&", ",ne.jsx("span",{style:{color:"var(--n8n-info)",fontWeight:500},children:r.running})," running"]})]})]}),ne.jsxs("div",{style:{border:"1px solid var(--n8n-border)",borderRadius:"var(--n8n-radius)",overflow:"hidden"},children:[ne.jsxs("div",{style:{display:"grid",gridTemplateColumns:"70px 1fr 70px 90px 60px",gap:"6px",padding:"8px 10px",fontSize:"11px",fontWeight:600,textTransform:"uppercase",letterSpacing:"0.03em",color:"var(--color-text-secondary, var(--n8n-text-muted))",background:"var(--n8n-bg-card)",borderBottom:"1px solid var(--n8n-border)"},children:[ne.jsx("span",{children:"ID"}),ne.jsx("span",{children:"Workflow"}),ne.jsx("span",{children:"Status"}),ne.jsx("span",{children:"Started"}),ne.jsx("span",{children:"Duration"})]}),c.length===0&&ne.jsx("div",{style:{padding:"16px",textAlign:"center",color:"var(--n8n-text-muted)",fontSize:"13px"},children:"No executions found"}),c.map(p=>{const S=JT(p.status);return ne.jsxs("div",{style:{display:"grid",gridTemplateColumns:"70px 1fr 70px 90px 60px",gap:"6px",padding:"6px 10px",fontSize:"12px",borderBottom:"1px solid var(--n8n-border)",alignItems:"center"},children:[ne.jsx("span",{style:{fontFamily:"var(--font-mono, monospace)",fontSize:"11px"},children:p.id.length>8?p.id.slice(0,8)+"…":p.id}),ne.jsx("span",{style:{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:p.workflowName||p.workflowId||"–"}),ne.jsx(wm,{variant:S.variant,children:S.label}),ne.jsx("span",{style:{fontSize:"11px",color:"var(--color-text-secondary, var(--n8n-text-muted))",whiteSpace:"nowrap"},children:IT(p.startedAt)}),ne.jsx("span",{style:{fontSize:"11px",color:"var(--color-text-secondary, var(--n8n-text-muted))"},children:KT(p.startedAt,p.stoppedAt)})]},p.id)})]}),((g=a.data)==null?void 0:g.hasMore)&&ne.jsx("div",{style:{fontSize:"11px",color:"var(--color-text-secondary, var(--n8n-text-muted))",marginTop:"6px",textAlign:"center"},children:"More executions available"})]})}const tp=document.getElementById("root");tp&&jy.createRoot(tp).render(ne.jsx(FT,{}));</script>
131
+ container holding the app. Specify either width or maxWidth, and either height or maxHeight.`),locale:R().optional().describe("User's language and region preference in BCP 47 format."),timeZone:R().optional().describe("User's timezone in IANA format."),userAgent:R().optional().describe("Host application identifier."),platform:re([E("web"),E("desktop"),E("mobile")]).optional().describe("Platform type for responsive design decisions."),deviceCapabilities:M({touch:Ze().optional().describe("Whether the device supports touch input."),hover:Ze().optional().describe("Whether the device supports hover interactions.")}).optional().describe("Device input capabilities."),safeAreaInsets:M({top:ae().describe("Top safe area inset in pixels."),right:ae().describe("Right safe area inset in pixels."),bottom:ae().describe("Bottom safe area inset in pixels."),left:ae().describe("Left safe area inset in pixels.")}).optional().describe("Mobile safe area boundaries in pixels.")}).passthrough(),BT=M({method:E("ui/notifications/host-context-changed"),params:lg.describe("Partial context update containing only changed fields.")});M({method:E("ui/update-model-context"),params:M({content:W(Ai).optional().describe("Context content blocks (text, image, etc.)."),structuredContent:_e(R(),xe().describe("Structured content for machine-readable context data.")).optional().describe("Structured content for machine-readable context data.")})});M({method:E("ui/initialize"),params:M({appInfo:io.describe("App identification (name and version)."),appCapabilities:qT.describe("Features and capabilities this app provides."),protocolVersion:R().describe("Protocol version this app supports.")})});var YT=M({protocolVersion:R().describe('Negotiated protocol version string (e.g., "2025-11-21").'),hostInfo:io.describe("Host application identification and version."),hostCapabilities:ZT.describe("Features and capabilities provided by the host."),hostContext:lg.describe("Rich context about the host environment.")}).passthrough();function Fm(a){let i=document.documentElement;i.setAttribute("data-theme",a),i.style.colorScheme=a}function Pm(a,i=document.documentElement){for(let[u,c]of Object.entries(a))c!==void 0&&i.style.setProperty(u,c)}function ep(a){if(document.getElementById("__mcp-host-fonts"))return;let i=document.createElement("style");i.id="__mcp-host-fonts",i.textContent=a,document.head.appendChild(i)}class LT extends bT{constructor(u,c={},r={autoResize:!0}){super(r);je(this,"_appInfo");je(this,"_capabilities");je(this,"options");je(this,"_hostCapabilities");je(this,"_hostInfo");je(this,"_hostContext");je(this,"eventSchemas",{toolinput:MT,toolinputpartial:NT,toolresult:jT,toolcancelled:CT,hostcontextchanged:BT});je(this,"_onteardown");je(this,"_oncalltool");je(this,"_onlisttools");je(this,"sendOpenLink",this.openLink);this._appInfo=u,this._capabilities=c,this.options=r,this.setRequestHandler(uo,d=>(console.log("Received ping:",d.params),{})),this.setEventHandler("hostcontextchanged",void 0)}onEventDispatch(u,c){u==="hostcontextchanged"&&(this._hostContext={...this._hostContext,...c})}getHostCapabilities(){return this._hostCapabilities}getHostVersion(){return this._hostInfo}getHostContext(){return this._hostContext}get ontoolinput(){return this.getEventHandler("toolinput")}set ontoolinput(u){this.setEventHandler("toolinput",u)}get ontoolinputpartial(){return this.getEventHandler("toolinputpartial")}set ontoolinputpartial(u){this.setEventHandler("toolinputpartial",u)}get ontoolresult(){return this.getEventHandler("toolresult")}set ontoolresult(u){this.setEventHandler("toolresult",u)}get ontoolcancelled(){return this.getEventHandler("toolcancelled")}set ontoolcancelled(u){this.setEventHandler("toolcancelled",u)}get onhostcontextchanged(){return this.getEventHandler("hostcontextchanged")}set onhostcontextchanged(u){this.setEventHandler("hostcontextchanged",u)}get onteardown(){return this._onteardown}set onteardown(u){this.warnIfRequestHandlerReplaced("onteardown",this._onteardown,u),this._onteardown=u,this.replaceRequestHandler(UT,(c,r)=>{if(!this._onteardown)throw Error("No onteardown handler set");return this._onteardown(c.params,r)})}get oncalltool(){return this._oncalltool}set oncalltool(u){this.warnIfRequestHandlerReplaced("oncalltool",this._oncalltool,u),this._oncalltool=u,this.replaceRequestHandler(eg,(c,r)=>{if(!this._oncalltool)throw Error("No oncalltool handler set");return this._oncalltool(c.params,r)})}get onlisttools(){return this._onlisttools}set onlisttools(u){this.warnIfRequestHandlerReplaced("onlisttools",this._onlisttools,u),this._onlisttools=u,this.replaceRequestHandler(Pp,(c,r)=>{if(!this._onlisttools)throw Error("No onlisttools handler set");return this._onlisttools(c.params,r)})}assertCapabilityForMethod(u){}assertRequestHandlerCapability(u){switch(u){case"tools/call":case"tools/list":if(!this._capabilities.tools)throw Error(`Client does not support tool capability (required for ${u})`);return;case"ping":case"ui/resource-teardown":return;default:throw Error(`No handler for method ${u} registered`)}}assertNotificationCapability(u){}assertTaskCapability(u){throw Error("Tasks are not supported in MCP Apps")}assertTaskHandlerCapability(u){throw Error("Task handlers are not supported in MCP Apps")}async callServerTool(u,c){if(typeof u=="string")throw Error(`callServerTool() expects an object as its first argument, but received a string ("${u}"). Did you mean: callServerTool({ name: "${u}", arguments: { ... } })?`);return await this.request({method:"tools/call",params:u},oo,{onprogress:()=>{},resetTimeoutOnProgress:!0,...c})}async readServerResource(u,c){return await this.request({method:"resources/read",params:u},Ip,c)}async listServerResources(u,c){return await this.request({method:"resources/list",params:u},Kp,c)}sendMessage(u,c){return this.request({method:"ui/message",params:u},wT,c)}sendLog(u){return this.notification({method:"notifications/message",params:u})}updateModelContext(u,c){return this.request({method:"ui/update-model-context",params:u},Ws,c)}openLink(u,c){return this.request({method:"ui/open-link",params:u},AT,c)}downloadFile(u,c){return this.request({method:"ui/download-file",params:u},RT,c)}requestTeardown(u={}){return this.notification({method:"ui/notifications/request-teardown",params:u})}requestDisplayMode(u,c){return this.request({method:"ui/request-display-mode",params:u},HT,c)}sendSizeChanged(u){return this.notification({method:"ui/notifications/size-changed",params:u})}setupSizeChangedNotifications(){let u=!1,c=0,r=0,d=()=>{u||(u=!0,requestAnimationFrame(()=>{u=!1;let v=document.documentElement,g=v.style.height;v.style.height="max-content";let p=Math.ceil(v.getBoundingClientRect().height);v.style.height=g;let S=Math.ceil(window.innerWidth);(S!==c||p!==r)&&(c=S,r=p,this.sendSizeChanged({width:S,height:p}))}))};d();let h=new ResizeObserver(d);return h.observe(document.documentElement),h.observe(document.body),()=>h.disconnect()}async connect(u=new ag(window.parent,window.parent),c){var r;if(this.transport)throw Error("App is already connected. Call close() before connecting again.");await super.connect(u);try{let d=await this.request({method:"ui/initialize",params:{appCapabilities:this._capabilities,appInfo:this._appInfo,protocolVersion:ST}},YT,c);if(d===void 0)throw Error(`Server sent invalid initialize result: ${d}`);this._hostCapabilities=d.hostCapabilities,this._hostInfo=d.hostInfo,this._hostContext=d.hostContext,await this.notification({method:"ui/notifications/initialized"}),(r=this.options)!=null&&r.autoResize&&this.setupSizeChangedNotifications()}catch(d){throw this.close(),d}}}function GT({appInfo:a,capabilities:i,onAppCreated:u}){let[c,r]=kt.useState(null),[d,h]=kt.useState(!1),[v,g]=kt.useState(null);return kt.useEffect(()=>{let p=!0;async function S(){try{let T=new ag(window.parent,window.parent),H=new LT(a,i);u==null||u(H),await H.connect(T),p&&(r(H),h(!0),g(null))}catch(T){p&&(r(null),h(!1),g(T instanceof Error?T:Error("Failed to connect")))}}return S(),()=>{p=!1}},[]),{app:c,isConnected:d,error:v}}function XT(a,i){let u=kt.useRef(!1);kt.useEffect(()=>{var c,r;u.current||(i!=null&&i.theme&&Fm(i.theme),(c=i==null?void 0:i.styles)!=null&&c.variables&&Pm(i.styles.variables),(i!=null&&i.theme||(r=i==null?void 0:i.styles)!=null&&r.variables)&&(u.current=!0))},[i]),kt.useEffect(()=>{if(!a)return;let c=r=>{var d;r.theme&&Fm(r.theme),(d=r.styles)!=null&&d.variables&&Pm(r.styles.variables)};return a.addEventListener("hostcontextchanged",c),()=>a.removeEventListener("hostcontextchanged",c)},[a])}function VT(a,i){let u=kt.useRef(!1);kt.useEffect(()=>{var c,r;u.current||(r=(c=i==null?void 0:i.styles)==null?void 0:c.css)!=null&&r.fonts&&(ep(i.styles.css.fonts),u.current=!0)},[i]),kt.useEffect(()=>{if(!a)return;let c=r=>{var d,h;(h=(d=r.styles)==null?void 0:d.css)!=null&&h.fonts&&ep(r.styles.css.fonts)};return a.addEventListener("hostcontextchanged",c),()=>a.removeEventListener("hostcontextchanged",c)},[a])}function QT(a,i){XT(a,i),VT(a,i)}function $T(){var v,g;const[a,i]=kt.useState(null),u=kt.useCallback(p=>{p.ontoolresult=S=>{if(S!=null&&S.content){const T=Array.isArray(S.content)?S.content.find(H=>H.type==="text"):null;if(T&&"text"in T)try{i(JSON.parse(T.text))}catch{i(T.text)}}}},[]),{app:c,isConnected:r,error:d}=GT({appInfo:{name:"n8n-mcp-ui",version:"1.0.0"},capabilities:{},onAppCreated:u});QT(c,c==null?void 0:c.getHostContext());const h=((g=(v=c==null?void 0:c.getHostContext())==null?void 0:v.toolInfo)==null?void 0:g.tool.name)??null;return{data:a,error:(d==null?void 0:d.message)??null,isConnected:r,app:c,toolName:h}}function JT(a){switch(a){case"success":return{variant:"success",label:"Success"};case"error":case"failed":case"crashed":return{variant:"error",label:"Error"};case"waiting":return{variant:"warning",label:"Waiting"};case"running":return{variant:"info",label:"Running"};default:return{variant:"info",label:a??"Unknown"}}}function KT(a,i){if(!a||!i)return"–";try{const u=new Date(i).getTime()-new Date(a).getTime();return u<1e3?`${u}ms`:u<6e4?`${(u/1e3).toFixed(1)}s`:`${Math.floor(u/6e4)}m ${Math.floor(u%6e4/1e3)}s`}catch{return"–"}}function IT(a){if(!a)return"";try{return new Date(a).toLocaleString(void 0,{month:"short",day:"numeric",hour:"2-digit",minute:"2-digit"})}catch{return a}}function WT(a){switch(a){case"success":return"success";case"error":case"failed":case"crashed":return"error";case"waiting":return"waiting";case"running":return"running";default:return"unknown"}}function FT(){var v,g;const{data:a,error:i,isConnected:u}=$T(),c=((v=a==null?void 0:a.data)==null?void 0:v.executions)??[],r=kt.useMemo(()=>{const p={success:0,error:0,waiting:0,running:0,unknown:0};for(const S of c)p[WT(S.status)]++;return p},[c]);if(i)return ne.jsxs("div",{style:{padding:"16px",color:"#ef4444"},children:["Error: ",i]});if(!u)return ne.jsx("div",{style:{padding:"16px",color:"var(--n8n-text-muted)"},children:"Connecting..."});if(!a)return ne.jsx("div",{style:{padding:"16px",color:"var(--n8n-text-muted)"},children:"Waiting for data..."});if(!a.success&&a.error)return ne.jsxs("div",{style:{maxWidth:"480px"},children:[ne.jsx(wm,{variant:"error",children:"Error"}),ne.jsx("div",{style:{marginTop:"8px",fontSize:"13px",color:"var(--n8n-error)"},children:a.error})]});const d=c.length,h=[];return d>0&&(r.success>0&&h.push({color:"var(--n8n-success)",pct:r.success/d*100}),r.error>0&&h.push({color:"var(--n8n-error)",pct:r.error/d*100}),r.waiting>0&&h.push({color:"var(--n8n-warning)",pct:r.waiting/d*100}),r.running>0&&h.push({color:"var(--n8n-info)",pct:r.running/d*100}),r.unknown>0&&h.push({color:"var(--n8n-border)",pct:r.unknown/d*100})),ne.jsxs("div",{style:{maxWidth:"480px"},children:[d>0&&ne.jsxs("div",{style:{marginBottom:"12px"},children:[ne.jsx("div",{style:{height:"6px",borderRadius:"3px",background:"var(--n8n-border)",overflow:"hidden",display:"flex"},children:h.map((p,S)=>ne.jsx("div",{style:{width:`${p.pct}%`,background:p.color,minWidth:"3px"}},S))}),ne.jsxs("div",{style:{fontSize:"12px",color:"var(--color-text-secondary, var(--n8n-text-muted))",marginTop:"6px"},children:[r.success>0&&ne.jsxs(ne.Fragment,{children:[ne.jsx("span",{style:{color:"var(--n8n-success)",fontWeight:500},children:r.success})," succeeded"]}),r.error>0&&ne.jsxs(ne.Fragment,{children:[r.success>0&&", ",ne.jsx("span",{style:{color:"var(--n8n-error)",fontWeight:500},children:r.error})," failed"]}),r.waiting>0&&ne.jsxs(ne.Fragment,{children:[(r.success>0||r.error>0)&&", ",ne.jsx("span",{style:{color:"var(--n8n-warning)",fontWeight:500},children:r.waiting})," waiting"]}),r.running>0&&ne.jsxs(ne.Fragment,{children:[(r.success>0||r.error>0||r.waiting>0)&&", ",ne.jsx("span",{style:{color:"var(--n8n-info)",fontWeight:500},children:r.running})," running"]})]})]}),ne.jsxs("div",{style:{border:"1px solid var(--n8n-border)",borderRadius:"var(--n8n-radius)",overflow:"hidden"},children:[ne.jsxs("div",{style:{display:"grid",gridTemplateColumns:"70px 1fr 70px 90px 60px",gap:"6px",padding:"8px 10px",fontSize:"11px",fontWeight:600,textTransform:"uppercase",letterSpacing:"0.03em",color:"var(--color-text-secondary, var(--n8n-text-muted))",background:"var(--n8n-bg-card)",borderBottom:"1px solid var(--n8n-border)"},children:[ne.jsx("span",{children:"ID"}),ne.jsx("span",{children:"Workflow"}),ne.jsx("span",{children:"Status"}),ne.jsx("span",{children:"Started"}),ne.jsx("span",{children:"Duration"})]}),c.length===0&&ne.jsx("div",{style:{padding:"16px",textAlign:"center",color:"var(--n8n-text-muted)",fontSize:"13px"},children:"No executions found"}),c.map(p=>{const S=JT(p.status);return ne.jsxs("div",{style:{display:"grid",gridTemplateColumns:"70px 1fr 70px 90px 60px",gap:"6px",padding:"6px 10px",fontSize:"12px",borderBottom:"1px solid var(--n8n-border)",alignItems:"center"},children:[ne.jsx("span",{style:{fontFamily:"var(--font-mono, monospace)",fontSize:"11px"},children:p.id.length>8?p.id.slice(0,8)+"…":p.id}),ne.jsx("span",{style:{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:p.workflowName||p.workflowId||"–"}),ne.jsx(wm,{variant:S.variant,children:S.label}),ne.jsx("span",{style:{fontSize:"11px",color:"var(--color-text-secondary, var(--n8n-text-muted))",whiteSpace:"nowrap"},children:IT(p.startedAt)}),ne.jsx("span",{style:{fontSize:"11px",color:"var(--color-text-secondary, var(--n8n-text-muted))"},children:KT(p.startedAt,p.stoppedAt)})]},p.id)})]}),((g=a.data)==null?void 0:g.hasMore)&&ne.jsx("div",{style:{fontSize:"11px",color:"var(--color-text-secondary, var(--n8n-text-muted))",marginTop:"6px",textAlign:"center"},children:"More executions available"})]})}const tp=document.getElementById("root");tp&&jy.createRoot(tp).render(ne.jsx(FT,{}));</script>
132
132
  <style rel="stylesheet" crossorigin>:root{--n8n-primary: #ff6d5a;--n8n-primary-light: #ff8a7a;--n8n-success: #17bf79;--n8n-warning: #f59e0b;--n8n-error: #ef4444;--n8n-info: #3b82f6;--n8n-bg: #1a1a2e;--n8n-bg-card: #252540;--n8n-text: #e0e0e0;--n8n-text-muted: #9ca3af;--n8n-border: #374151;--n8n-error-light: #fee2e2;--n8n-warning-light: #fef3cd;--n8n-success-light: #e8f9f0;--n8n-info-light: #dbeafe;--n8n-radius: 8px;font-family:var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif)}[data-theme=light]{--n8n-bg: #ffffff;--n8n-bg-card: #f9fafb;--n8n-text: #1f2937;--n8n-text-muted: #6b7280;--n8n-border: #e5e7eb;--n8n-error-light: #fef2f2;--n8n-warning-light: #fffbeb;--n8n-success-light: #f0fdf4;--n8n-info-light: #eff6ff}*{margin:0;padding:0;box-sizing:border-box}body{background:var(--color-background-primary, var(--n8n-bg));color:var(--color-text-primary, var(--n8n-text));line-height:1.5;padding:16px}</style>
133
133
  </head>
134
134
  <body>
@@ -128,7 +128,7 @@ Boolean requesting whether a visible border and background is provided by the ho
128
128
  - omitted: host decides border`)});w({method:E("ui/request-display-mode"),params:w({mode:yi.describe("The display mode being requested.")})});var kT=w({mode:yi.describe("The display mode that was actually set. May differ from requested if not supported.")}).passthrough(),jT=re([E("model"),E("app")]).describe("Tool visibility scope - who can access the tool.");w({resourceUri:R().optional(),visibility:W(jT).optional().describe(`Who can access this tool. Default: ["model", "app"]
129
129
  - "model": Tool visible to and callable by the agent
130
130
  - "app": Tool callable by the app from this server only`)});w({mimeTypes:W(R()).optional().describe('Array of supported MIME types for UI resources.\nMust include `"text/html;profile=mcp-app"` for MCP Apps support.')});w({method:E("ui/download-file"),params:w({contents:W(re([Fp,Pp])).describe("Resource contents to download — embedded (inline data) or linked (host fetches). Uses standard MCP resource types.")})});w({method:E("ui/message"),params:w({role:E("user").describe('Message role, currently only "user" is supported.'),content:W(Ai).describe("Message content blocks (text, image, etc.).")})});w({method:E("ui/notifications/sandbox-resource-ready"),params:w({html:R().describe("HTML content to load into the inner iframe."),sandbox:R().optional().describe("Optional override for the inner iframe's sandbox attribute."),csp:pr.optional().describe("CSP configuration from resource metadata."),permissions:vr.optional().describe("Sandbox permissions from resource metadata.")})});var BT=w({method:E("ui/notifications/tool-result"),params:oo.describe("Standard MCP tool execution result.")}),iv=w({toolInfo:w({id:bi.optional().describe("JSON-RPC id of the tools/call request."),tool:hr.describe("Tool definition including name, inputSchema, etc.")}).optional().describe("Metadata of the tool call that instantiated this App."),theme:ET.optional().describe("Current color theme preference."),styles:UT.optional().describe("Style configuration for theming the app."),displayMode:yi.optional().describe("How the UI is currently displayed."),availableDisplayModes:W(yi).optional().describe("Display modes the host supports."),containerDimensions:re([w({height:ne().describe("Fixed container height in pixels.")}),w({maxHeight:re([ne(),ks()]).optional().describe("Maximum container height in pixels.")})]).and(re([w({width:ne().describe("Fixed container width in pixels.")}),w({maxWidth:re([ne(),ks()]).optional().describe("Maximum container width in pixels.")})])).optional().describe(`Container dimensions. Represents the dimensions of the iframe or other
131
- container holding the app. Specify either width or maxWidth, and either height or maxHeight.`),locale:R().optional().describe("User's language and region preference in BCP 47 format."),timeZone:R().optional().describe("User's timezone in IANA format."),userAgent:R().optional().describe("Host application identifier."),platform:re([E("web"),E("desktop"),E("mobile")]).optional().describe("Platform type for responsive design decisions."),deviceCapabilities:w({touch:Ze().optional().describe("Whether the device supports touch input."),hover:Ze().optional().describe("Whether the device supports hover interactions.")}).optional().describe("Device input capabilities."),safeAreaInsets:w({top:ne().describe("Top safe area inset in pixels."),right:ne().describe("Right safe area inset in pixels."),bottom:ne().describe("Bottom safe area inset in pixels."),left:ne().describe("Left safe area inset in pixels.")}).optional().describe("Mobile safe area boundaries in pixels.")}).passthrough(),YT=w({method:E("ui/notifications/host-context-changed"),params:iv.describe("Partial context update containing only changed fields.")});w({method:E("ui/update-model-context"),params:w({content:W(Ai).optional().describe("Context content blocks (text, image, etc.)."),structuredContent:_e(R(),De().describe("Structured content for machine-readable context data.")).optional().describe("Structured content for machine-readable context data.")})});w({method:E("ui/initialize"),params:w({appInfo:io.describe("App identification (name and version)."),appCapabilities:HT.describe("Features and capabilities this app provides."),protocolVersion:R().describe("Protocol version this app supports.")})});var LT=w({protocolVersion:R().describe('Negotiated protocol version string (e.g., "2025-11-21").'),hostInfo:io.describe("Host application identification and version."),hostCapabilities:qT.describe("Features and capabilities provided by the host."),hostContext:iv.describe("Rich context about the host environment.")}).passthrough();function Pm(a){let i=document.documentElement;i.setAttribute("data-theme",a),i.style.colorScheme=a}function ep(a,i=document.documentElement){for(let[u,c]of Object.entries(a))c!==void 0&&i.style.setProperty(u,c)}function tp(a){if(document.getElementById("__mcp-host-fonts"))return;let i=document.createElement("style");i.id="__mcp-host-fonts",i.textContent=a,document.head.appendChild(i)}class GT extends ST{constructor(u,c={},r={autoResize:!0}){super(r);je(this,"_appInfo");je(this,"_capabilities");je(this,"options");je(this,"_hostCapabilities");je(this,"_hostInfo");je(this,"_hostContext");je(this,"eventSchemas",{toolinput:NT,toolinputpartial:CT,toolresult:BT,toolcancelled:xT,hostcontextchanged:YT});je(this,"_onteardown");je(this,"_oncalltool");je(this,"_onlisttools");je(this,"sendOpenLink",this.openLink);this._appInfo=u,this._capabilities=c,this.options=r,this.setRequestHandler(uo,d=>(console.log("Received ping:",d.params),{})),this.setEventHandler("hostcontextchanged",void 0)}onEventDispatch(u,c){u==="hostcontextchanged"&&(this._hostContext={...this._hostContext,...c})}getHostCapabilities(){return this._hostCapabilities}getHostVersion(){return this._hostInfo}getHostContext(){return this._hostContext}get ontoolinput(){return this.getEventHandler("toolinput")}set ontoolinput(u){this.setEventHandler("toolinput",u)}get ontoolinputpartial(){return this.getEventHandler("toolinputpartial")}set ontoolinputpartial(u){this.setEventHandler("toolinputpartial",u)}get ontoolresult(){return this.getEventHandler("toolresult")}set ontoolresult(u){this.setEventHandler("toolresult",u)}get ontoolcancelled(){return this.getEventHandler("toolcancelled")}set ontoolcancelled(u){this.setEventHandler("toolcancelled",u)}get onhostcontextchanged(){return this.getEventHandler("hostcontextchanged")}set onhostcontextchanged(u){this.setEventHandler("hostcontextchanged",u)}get onteardown(){return this._onteardown}set onteardown(u){this.warnIfRequestHandlerReplaced("onteardown",this._onteardown,u),this._onteardown=u,this.replaceRequestHandler(ZT,(c,r)=>{if(!this._onteardown)throw Error("No onteardown handler set");return this._onteardown(c.params,r)})}get oncalltool(){return this._oncalltool}set oncalltool(u){this.warnIfRequestHandlerReplaced("oncalltool",this._oncalltool,u),this._oncalltool=u,this.replaceRequestHandler(tv,(c,r)=>{if(!this._oncalltool)throw Error("No oncalltool handler set");return this._oncalltool(c.params,r)})}get onlisttools(){return this._onlisttools}set onlisttools(u){this.warnIfRequestHandlerReplaced("onlisttools",this._onlisttools,u),this._onlisttools=u,this.replaceRequestHandler(ev,(c,r)=>{if(!this._onlisttools)throw Error("No onlisttools handler set");return this._onlisttools(c.params,r)})}assertCapabilityForMethod(u){}assertRequestHandlerCapability(u){switch(u){case"tools/call":case"tools/list":if(!this._capabilities.tools)throw Error(`Client does not support tool capability (required for ${u})`);return;case"ping":case"ui/resource-teardown":return;default:throw Error(`No handler for method ${u} registered`)}}assertNotificationCapability(u){}assertTaskCapability(u){throw Error("Tasks are not supported in MCP Apps")}assertTaskHandlerCapability(u){throw Error("Task handlers are not supported in MCP Apps")}async callServerTool(u,c){if(typeof u=="string")throw Error(`callServerTool() expects an object as its first argument, but received a string ("${u}"). Did you mean: callServerTool({ name: "${u}", arguments: { ... } })?`);return await this.request({method:"tools/call",params:u},oo,c)}async readServerResource(u,c){return await this.request({method:"resources/read",params:u},Wp,c)}async listServerResources(u,c){return await this.request({method:"resources/list",params:u},Ip,c)}sendMessage(u,c){return this.request({method:"ui/message",params:u},wT,c)}sendLog(u){return this.notification({method:"notifications/message",params:u})}updateModelContext(u,c){return this.request({method:"ui/update-model-context",params:u},Fs,c)}openLink(u,c){return this.request({method:"ui/open-link",params:u},RT,c)}downloadFile(u,c){return this.request({method:"ui/download-file",params:u},MT,c)}requestTeardown(u={}){return this.notification({method:"ui/notifications/request-teardown",params:u})}requestDisplayMode(u,c){return this.request({method:"ui/request-display-mode",params:u},kT,c)}sendSizeChanged(u){return this.notification({method:"ui/notifications/size-changed",params:u})}setupSizeChangedNotifications(){let u=!1,c=0,r=0,d=()=>{u||(u=!0,requestAnimationFrame(()=>{u=!1;let g=document.documentElement,p=g.style.height;g.style.height="max-content";let v=Math.ceil(g.getBoundingClientRect().height);g.style.height=p;let z=Math.ceil(window.innerWidth);(z!==c||v!==r)&&(c=z,r=v,this.sendSizeChanged({width:z,height:v}))}))};d();let h=new ResizeObserver(d);return h.observe(document.documentElement),h.observe(document.body),()=>h.disconnect()}async connect(u=new lv(window.parent,window.parent),c){var r;if(this.transport)throw Error("App is already connected. Call close() before connecting again.");await super.connect(u);try{let d=await this.request({method:"ui/initialize",params:{appCapabilities:this._capabilities,appInfo:this._appInfo,protocolVersion:zT}},LT,c);if(d===void 0)throw Error(`Server sent invalid initialize result: ${d}`);this._hostCapabilities=d.hostCapabilities,this._hostInfo=d.hostInfo,this._hostContext=d.hostContext,await this.notification({method:"ui/notifications/initialized"}),(r=this.options)!=null&&r.autoResize&&this.setupSizeChangedNotifications()}catch(d){throw this.close(),d}}}function XT({appInfo:a,capabilities:i,onAppCreated:u}){let[c,r]=It.useState(null),[d,h]=It.useState(!1),[g,p]=It.useState(null);return It.useEffect(()=>{let v=!0;async function z(){try{let T=new lv(window.parent,window.parent),H=new GT(a,i);u==null||u(H),await H.connect(T),v&&(r(H),h(!0),p(null))}catch(T){v&&(r(null),h(!1),p(T instanceof Error?T:Error("Failed to connect")))}}return z(),()=>{v=!1}},[]),{app:c,isConnected:d,error:g}}function VT(a,i){let u=It.useRef(!1);It.useEffect(()=>{var c,r;u.current||(i!=null&&i.theme&&Pm(i.theme),(c=i==null?void 0:i.styles)!=null&&c.variables&&ep(i.styles.variables),(i!=null&&i.theme||(r=i==null?void 0:i.styles)!=null&&r.variables)&&(u.current=!0))},[i]),It.useEffect(()=>{if(!a)return;let c=r=>{var d;r.theme&&Pm(r.theme),(d=r.styles)!=null&&d.variables&&ep(r.styles.variables)};return a.addEventListener("hostcontextchanged",c),()=>a.removeEventListener("hostcontextchanged",c)},[a])}function QT(a,i){let u=It.useRef(!1);It.useEffect(()=>{var c,r;u.current||(r=(c=i==null?void 0:i.styles)==null?void 0:c.css)!=null&&r.fonts&&(tp(i.styles.css.fonts),u.current=!0)},[i]),It.useEffect(()=>{if(!a)return;let c=r=>{var d,h;(h=(d=r.styles)==null?void 0:d.css)!=null&&h.fonts&&tp(r.styles.css.fonts)};return a.addEventListener("hostcontextchanged",c),()=>a.removeEventListener("hostcontextchanged",c)},[a])}function $T(a,i){VT(a,i),QT(a,i)}function JT(){var g,p;const[a,i]=It.useState(null),u=It.useCallback(v=>{v.ontoolresult=z=>{if(z!=null&&z.content){const T=Array.isArray(z.content)?z.content.find(H=>H.type==="text"):null;if(T&&"text"in T)try{i(JSON.parse(T.text))}catch{i(T.text)}}}},[]),{app:c,isConnected:r,error:d}=XT({appInfo:{name:"n8n-mcp-ui",version:"1.0.0"},capabilities:{},onAppCreated:u});$T(c,c==null?void 0:c.getHostContext());const h=((p=(g=c==null?void 0:c.getHostContext())==null?void 0:g.toolInfo)==null?void 0:p.tool.name)??null;return{data:a,error:(d==null?void 0:d.message)??null,isConnected:r,app:c,toolName:h}}function KT(){const{data:a,error:i,isConnected:u}=JT();if(i)return ce.jsxs("div",{style:{padding:"16px",color:"#ef4444"},children:["Error: ",i]});if(!u)return ce.jsx("div",{style:{padding:"16px",color:"var(--n8n-text-muted)"},children:"Connecting..."});if(!a)return ce.jsx("div",{style:{padding:"16px",color:"var(--n8n-text-muted)"},children:"Waiting for data..."});if(!a.success&&a.error)return ce.jsxs("div",{style:{maxWidth:"480px"},children:[ce.jsx("div",{style:{display:"flex",alignItems:"center",gap:"10px",marginBottom:"12px"},children:ce.jsx(wm,{variant:"error",children:"Disconnected"})}),ce.jsx("div",{style:{fontSize:"13px",color:"var(--n8n-error)"},children:a.error})]});const c=a.data,r=(c==null?void 0:c.status)==="connected"||(c==null?void 0:c.status)==="ok"||a.success,d=c==null?void 0:c.versionCheck,h=c==null?void 0:c.performance,g=(c==null?void 0:c.nextSteps)??[];return ce.jsxs("div",{style:{maxWidth:"480px"},children:[ce.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"10px",marginBottom:"16px"},children:[ce.jsx(wm,{variant:r?"success":"error",children:r?"Connected":"Disconnected"}),(c==null?void 0:c.apiUrl)&&ce.jsx("span",{style:{fontSize:"12px",fontFamily:"var(--font-mono, monospace)",color:"var(--color-text-secondary, var(--n8n-text-muted))"},children:c.apiUrl})]}),((c==null?void 0:c.n8nVersion)||(c==null?void 0:c.mcpVersion))&&ce.jsx(Ds,{children:ce.jsxs("div",{style:{fontSize:"13px"},children:[ce.jsxs("div",{style:{display:"flex",justifyContent:"space-between",marginBottom:"4px"},children:[ce.jsx("span",{style:{color:"var(--color-text-secondary, var(--n8n-text-muted))"},children:"n8n"}),ce.jsx("span",{style:{fontFamily:"var(--font-mono, monospace)",fontWeight:500},children:(c==null?void 0:c.n8nVersion)??"–"})]}),ce.jsxs("div",{style:{display:"flex",justifyContent:"space-between",marginBottom:"4px"},children:[ce.jsx("span",{style:{color:"var(--color-text-secondary, var(--n8n-text-muted))"},children:"MCP Server"}),ce.jsx("span",{style:{fontFamily:"var(--font-mono, monospace)",fontWeight:500},children:(c==null?void 0:c.mcpVersion)??"–"})]}),d&&!d.upToDate&&ce.jsxs("div",{style:{marginTop:"8px",padding:"6px 10px",background:"var(--n8n-warning-light)",borderRadius:"4px",fontSize:"12px",color:"var(--n8n-warning)"},children:["Update available: ",d.current," → ",d.latest,d.updateCommand&&ce.jsx("div",{style:{fontFamily:"var(--font-mono, monospace)",fontSize:"11px",marginTop:"4px",opacity:.9},children:d.updateCommand})]})]})}),h&&ce.jsx(Ds,{children:ce.jsxs("div",{style:{fontSize:"13px"},children:[h.responseTimeMs!==void 0&&ce.jsxs("div",{style:{display:"flex",justifyContent:"space-between",marginBottom:"4px"},children:[ce.jsx("span",{style:{color:"var(--color-text-secondary, var(--n8n-text-muted))"},children:"Response time"}),ce.jsxs("span",{style:{fontFamily:"var(--font-mono, monospace)",fontWeight:500,color:h.responseTimeMs<500?"var(--n8n-success)":h.responseTimeMs<2e3?"var(--n8n-warning)":"var(--n8n-error)"},children:[h.responseTimeMs,"ms"]})]}),h.cacheHitRate!==void 0&&ce.jsxs("div",{style:{display:"flex",justifyContent:"space-between"},children:[ce.jsx("span",{style:{color:"var(--color-text-secondary, var(--n8n-text-muted))"},children:"Cache hit rate"}),ce.jsx("span",{style:{fontFamily:"var(--font-mono, monospace)",fontWeight:500},children:typeof h.cacheHitRate=="number"&&h.cacheHitRate<=1?`${(h.cacheHitRate*100).toFixed(0)}%`:`${h.cacheHitRate}%`})]})]})}),g.length>0&&ce.jsx(Ds,{title:"Next Steps",children:ce.jsx("ul",{style:{paddingLeft:"16px",fontSize:"12px"},children:g.map((p,v)=>ce.jsx("li",{style:{padding:"2px 0"},children:p},v))})})]})}const np=document.getElementById("root");np&&By.createRoot(np).render(ce.jsx(KT,{}));</script>
131
+ container holding the app. Specify either width or maxWidth, and either height or maxHeight.`),locale:R().optional().describe("User's language and region preference in BCP 47 format."),timeZone:R().optional().describe("User's timezone in IANA format."),userAgent:R().optional().describe("Host application identifier."),platform:re([E("web"),E("desktop"),E("mobile")]).optional().describe("Platform type for responsive design decisions."),deviceCapabilities:w({touch:Ze().optional().describe("Whether the device supports touch input."),hover:Ze().optional().describe("Whether the device supports hover interactions.")}).optional().describe("Device input capabilities."),safeAreaInsets:w({top:ne().describe("Top safe area inset in pixels."),right:ne().describe("Right safe area inset in pixels."),bottom:ne().describe("Bottom safe area inset in pixels."),left:ne().describe("Left safe area inset in pixels.")}).optional().describe("Mobile safe area boundaries in pixels.")}).passthrough(),YT=w({method:E("ui/notifications/host-context-changed"),params:iv.describe("Partial context update containing only changed fields.")});w({method:E("ui/update-model-context"),params:w({content:W(Ai).optional().describe("Context content blocks (text, image, etc.)."),structuredContent:_e(R(),De().describe("Structured content for machine-readable context data.")).optional().describe("Structured content for machine-readable context data.")})});w({method:E("ui/initialize"),params:w({appInfo:io.describe("App identification (name and version)."),appCapabilities:HT.describe("Features and capabilities this app provides."),protocolVersion:R().describe("Protocol version this app supports.")})});var LT=w({protocolVersion:R().describe('Negotiated protocol version string (e.g., "2025-11-21").'),hostInfo:io.describe("Host application identification and version."),hostCapabilities:qT.describe("Features and capabilities provided by the host."),hostContext:iv.describe("Rich context about the host environment.")}).passthrough();function Pm(a){let i=document.documentElement;i.setAttribute("data-theme",a),i.style.colorScheme=a}function ep(a,i=document.documentElement){for(let[u,c]of Object.entries(a))c!==void 0&&i.style.setProperty(u,c)}function tp(a){if(document.getElementById("__mcp-host-fonts"))return;let i=document.createElement("style");i.id="__mcp-host-fonts",i.textContent=a,document.head.appendChild(i)}class GT extends ST{constructor(u,c={},r={autoResize:!0}){super(r);je(this,"_appInfo");je(this,"_capabilities");je(this,"options");je(this,"_hostCapabilities");je(this,"_hostInfo");je(this,"_hostContext");je(this,"eventSchemas",{toolinput:NT,toolinputpartial:CT,toolresult:BT,toolcancelled:xT,hostcontextchanged:YT});je(this,"_onteardown");je(this,"_oncalltool");je(this,"_onlisttools");je(this,"sendOpenLink",this.openLink);this._appInfo=u,this._capabilities=c,this.options=r,this.setRequestHandler(uo,d=>(console.log("Received ping:",d.params),{})),this.setEventHandler("hostcontextchanged",void 0)}onEventDispatch(u,c){u==="hostcontextchanged"&&(this._hostContext={...this._hostContext,...c})}getHostCapabilities(){return this._hostCapabilities}getHostVersion(){return this._hostInfo}getHostContext(){return this._hostContext}get ontoolinput(){return this.getEventHandler("toolinput")}set ontoolinput(u){this.setEventHandler("toolinput",u)}get ontoolinputpartial(){return this.getEventHandler("toolinputpartial")}set ontoolinputpartial(u){this.setEventHandler("toolinputpartial",u)}get ontoolresult(){return this.getEventHandler("toolresult")}set ontoolresult(u){this.setEventHandler("toolresult",u)}get ontoolcancelled(){return this.getEventHandler("toolcancelled")}set ontoolcancelled(u){this.setEventHandler("toolcancelled",u)}get onhostcontextchanged(){return this.getEventHandler("hostcontextchanged")}set onhostcontextchanged(u){this.setEventHandler("hostcontextchanged",u)}get onteardown(){return this._onteardown}set onteardown(u){this.warnIfRequestHandlerReplaced("onteardown",this._onteardown,u),this._onteardown=u,this.replaceRequestHandler(ZT,(c,r)=>{if(!this._onteardown)throw Error("No onteardown handler set");return this._onteardown(c.params,r)})}get oncalltool(){return this._oncalltool}set oncalltool(u){this.warnIfRequestHandlerReplaced("oncalltool",this._oncalltool,u),this._oncalltool=u,this.replaceRequestHandler(tv,(c,r)=>{if(!this._oncalltool)throw Error("No oncalltool handler set");return this._oncalltool(c.params,r)})}get onlisttools(){return this._onlisttools}set onlisttools(u){this.warnIfRequestHandlerReplaced("onlisttools",this._onlisttools,u),this._onlisttools=u,this.replaceRequestHandler(ev,(c,r)=>{if(!this._onlisttools)throw Error("No onlisttools handler set");return this._onlisttools(c.params,r)})}assertCapabilityForMethod(u){}assertRequestHandlerCapability(u){switch(u){case"tools/call":case"tools/list":if(!this._capabilities.tools)throw Error(`Client does not support tool capability (required for ${u})`);return;case"ping":case"ui/resource-teardown":return;default:throw Error(`No handler for method ${u} registered`)}}assertNotificationCapability(u){}assertTaskCapability(u){throw Error("Tasks are not supported in MCP Apps")}assertTaskHandlerCapability(u){throw Error("Task handlers are not supported in MCP Apps")}async callServerTool(u,c){if(typeof u=="string")throw Error(`callServerTool() expects an object as its first argument, but received a string ("${u}"). Did you mean: callServerTool({ name: "${u}", arguments: { ... } })?`);return await this.request({method:"tools/call",params:u},oo,{onprogress:()=>{},resetTimeoutOnProgress:!0,...c})}async readServerResource(u,c){return await this.request({method:"resources/read",params:u},Wp,c)}async listServerResources(u,c){return await this.request({method:"resources/list",params:u},Ip,c)}sendMessage(u,c){return this.request({method:"ui/message",params:u},wT,c)}sendLog(u){return this.notification({method:"notifications/message",params:u})}updateModelContext(u,c){return this.request({method:"ui/update-model-context",params:u},Fs,c)}openLink(u,c){return this.request({method:"ui/open-link",params:u},RT,c)}downloadFile(u,c){return this.request({method:"ui/download-file",params:u},MT,c)}requestTeardown(u={}){return this.notification({method:"ui/notifications/request-teardown",params:u})}requestDisplayMode(u,c){return this.request({method:"ui/request-display-mode",params:u},kT,c)}sendSizeChanged(u){return this.notification({method:"ui/notifications/size-changed",params:u})}setupSizeChangedNotifications(){let u=!1,c=0,r=0,d=()=>{u||(u=!0,requestAnimationFrame(()=>{u=!1;let g=document.documentElement,p=g.style.height;g.style.height="max-content";let v=Math.ceil(g.getBoundingClientRect().height);g.style.height=p;let z=Math.ceil(window.innerWidth);(z!==c||v!==r)&&(c=z,r=v,this.sendSizeChanged({width:z,height:v}))}))};d();let h=new ResizeObserver(d);return h.observe(document.documentElement),h.observe(document.body),()=>h.disconnect()}async connect(u=new lv(window.parent,window.parent),c){var r;if(this.transport)throw Error("App is already connected. Call close() before connecting again.");await super.connect(u);try{let d=await this.request({method:"ui/initialize",params:{appCapabilities:this._capabilities,appInfo:this._appInfo,protocolVersion:zT}},LT,c);if(d===void 0)throw Error(`Server sent invalid initialize result: ${d}`);this._hostCapabilities=d.hostCapabilities,this._hostInfo=d.hostInfo,this._hostContext=d.hostContext,await this.notification({method:"ui/notifications/initialized"}),(r=this.options)!=null&&r.autoResize&&this.setupSizeChangedNotifications()}catch(d){throw this.close(),d}}}function XT({appInfo:a,capabilities:i,onAppCreated:u}){let[c,r]=It.useState(null),[d,h]=It.useState(!1),[g,p]=It.useState(null);return It.useEffect(()=>{let v=!0;async function z(){try{let T=new lv(window.parent,window.parent),H=new GT(a,i);u==null||u(H),await H.connect(T),v&&(r(H),h(!0),p(null))}catch(T){v&&(r(null),h(!1),p(T instanceof Error?T:Error("Failed to connect")))}}return z(),()=>{v=!1}},[]),{app:c,isConnected:d,error:g}}function VT(a,i){let u=It.useRef(!1);It.useEffect(()=>{var c,r;u.current||(i!=null&&i.theme&&Pm(i.theme),(c=i==null?void 0:i.styles)!=null&&c.variables&&ep(i.styles.variables),(i!=null&&i.theme||(r=i==null?void 0:i.styles)!=null&&r.variables)&&(u.current=!0))},[i]),It.useEffect(()=>{if(!a)return;let c=r=>{var d;r.theme&&Pm(r.theme),(d=r.styles)!=null&&d.variables&&ep(r.styles.variables)};return a.addEventListener("hostcontextchanged",c),()=>a.removeEventListener("hostcontextchanged",c)},[a])}function QT(a,i){let u=It.useRef(!1);It.useEffect(()=>{var c,r;u.current||(r=(c=i==null?void 0:i.styles)==null?void 0:c.css)!=null&&r.fonts&&(tp(i.styles.css.fonts),u.current=!0)},[i]),It.useEffect(()=>{if(!a)return;let c=r=>{var d,h;(h=(d=r.styles)==null?void 0:d.css)!=null&&h.fonts&&tp(r.styles.css.fonts)};return a.addEventListener("hostcontextchanged",c),()=>a.removeEventListener("hostcontextchanged",c)},[a])}function $T(a,i){VT(a,i),QT(a,i)}function JT(){var g,p;const[a,i]=It.useState(null),u=It.useCallback(v=>{v.ontoolresult=z=>{if(z!=null&&z.content){const T=Array.isArray(z.content)?z.content.find(H=>H.type==="text"):null;if(T&&"text"in T)try{i(JSON.parse(T.text))}catch{i(T.text)}}}},[]),{app:c,isConnected:r,error:d}=XT({appInfo:{name:"n8n-mcp-ui",version:"1.0.0"},capabilities:{},onAppCreated:u});$T(c,c==null?void 0:c.getHostContext());const h=((p=(g=c==null?void 0:c.getHostContext())==null?void 0:g.toolInfo)==null?void 0:p.tool.name)??null;return{data:a,error:(d==null?void 0:d.message)??null,isConnected:r,app:c,toolName:h}}function KT(){const{data:a,error:i,isConnected:u}=JT();if(i)return ce.jsxs("div",{style:{padding:"16px",color:"#ef4444"},children:["Error: ",i]});if(!u)return ce.jsx("div",{style:{padding:"16px",color:"var(--n8n-text-muted)"},children:"Connecting..."});if(!a)return ce.jsx("div",{style:{padding:"16px",color:"var(--n8n-text-muted)"},children:"Waiting for data..."});if(!a.success&&a.error)return ce.jsxs("div",{style:{maxWidth:"480px"},children:[ce.jsx("div",{style:{display:"flex",alignItems:"center",gap:"10px",marginBottom:"12px"},children:ce.jsx(wm,{variant:"error",children:"Disconnected"})}),ce.jsx("div",{style:{fontSize:"13px",color:"var(--n8n-error)"},children:a.error})]});const c=a.data,r=(c==null?void 0:c.status)==="connected"||(c==null?void 0:c.status)==="ok"||a.success,d=c==null?void 0:c.versionCheck,h=c==null?void 0:c.performance,g=(c==null?void 0:c.nextSteps)??[];return ce.jsxs("div",{style:{maxWidth:"480px"},children:[ce.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"10px",marginBottom:"16px"},children:[ce.jsx(wm,{variant:r?"success":"error",children:r?"Connected":"Disconnected"}),(c==null?void 0:c.apiUrl)&&ce.jsx("span",{style:{fontSize:"12px",fontFamily:"var(--font-mono, monospace)",color:"var(--color-text-secondary, var(--n8n-text-muted))"},children:c.apiUrl})]}),((c==null?void 0:c.n8nVersion)||(c==null?void 0:c.mcpVersion))&&ce.jsx(Ds,{children:ce.jsxs("div",{style:{fontSize:"13px"},children:[ce.jsxs("div",{style:{display:"flex",justifyContent:"space-between",marginBottom:"4px"},children:[ce.jsx("span",{style:{color:"var(--color-text-secondary, var(--n8n-text-muted))"},children:"n8n"}),ce.jsx("span",{style:{fontFamily:"var(--font-mono, monospace)",fontWeight:500},children:(c==null?void 0:c.n8nVersion)??"–"})]}),ce.jsxs("div",{style:{display:"flex",justifyContent:"space-between",marginBottom:"4px"},children:[ce.jsx("span",{style:{color:"var(--color-text-secondary, var(--n8n-text-muted))"},children:"MCP Server"}),ce.jsx("span",{style:{fontFamily:"var(--font-mono, monospace)",fontWeight:500},children:(c==null?void 0:c.mcpVersion)??"–"})]}),d&&!d.upToDate&&ce.jsxs("div",{style:{marginTop:"8px",padding:"6px 10px",background:"var(--n8n-warning-light)",borderRadius:"4px",fontSize:"12px",color:"var(--n8n-warning)"},children:["Update available: ",d.current," → ",d.latest,d.updateCommand&&ce.jsx("div",{style:{fontFamily:"var(--font-mono, monospace)",fontSize:"11px",marginTop:"4px",opacity:.9},children:d.updateCommand})]})]})}),h&&ce.jsx(Ds,{children:ce.jsxs("div",{style:{fontSize:"13px"},children:[h.responseTimeMs!==void 0&&ce.jsxs("div",{style:{display:"flex",justifyContent:"space-between",marginBottom:"4px"},children:[ce.jsx("span",{style:{color:"var(--color-text-secondary, var(--n8n-text-muted))"},children:"Response time"}),ce.jsxs("span",{style:{fontFamily:"var(--font-mono, monospace)",fontWeight:500,color:h.responseTimeMs<500?"var(--n8n-success)":h.responseTimeMs<2e3?"var(--n8n-warning)":"var(--n8n-error)"},children:[h.responseTimeMs,"ms"]})]}),h.cacheHitRate!==void 0&&ce.jsxs("div",{style:{display:"flex",justifyContent:"space-between"},children:[ce.jsx("span",{style:{color:"var(--color-text-secondary, var(--n8n-text-muted))"},children:"Cache hit rate"}),ce.jsx("span",{style:{fontFamily:"var(--font-mono, monospace)",fontWeight:500},children:typeof h.cacheHitRate=="number"&&h.cacheHitRate<=1?`${(h.cacheHitRate*100).toFixed(0)}%`:`${h.cacheHitRate}%`})]})]})}),g.length>0&&ce.jsx(Ds,{title:"Next Steps",children:ce.jsx("ul",{style:{paddingLeft:"16px",fontSize:"12px"},children:g.map((p,v)=>ce.jsx("li",{style:{padding:"2px 0"},children:p},v))})})]})}const np=document.getElementById("root");np&&By.createRoot(np).render(ce.jsx(KT,{}));</script>
132
132
  <style rel="stylesheet" crossorigin>:root{--n8n-primary: #ff6d5a;--n8n-primary-light: #ff8a7a;--n8n-success: #17bf79;--n8n-warning: #f59e0b;--n8n-error: #ef4444;--n8n-info: #3b82f6;--n8n-bg: #1a1a2e;--n8n-bg-card: #252540;--n8n-text: #e0e0e0;--n8n-text-muted: #9ca3af;--n8n-border: #374151;--n8n-error-light: #fee2e2;--n8n-warning-light: #fef3cd;--n8n-success-light: #e8f9f0;--n8n-info-light: #dbeafe;--n8n-radius: 8px;font-family:var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif)}[data-theme=light]{--n8n-bg: #ffffff;--n8n-bg-card: #f9fafb;--n8n-text: #1f2937;--n8n-text-muted: #6b7280;--n8n-border: #e5e7eb;--n8n-error-light: #fef2f2;--n8n-warning-light: #fffbeb;--n8n-success-light: #f0fdf4;--n8n-info-light: #eff6ff}*{margin:0;padding:0;box-sizing:border-box}body{background:var(--color-background-primary, var(--n8n-bg));color:var(--color-text-primary, var(--n8n-text));line-height:1.5;padding:16px}</style>
133
133
  </head>
134
134
  <body>
@@ -128,7 +128,7 @@ Boolean requesting whether a visible border and background is provided by the ho
128
128
  - omitted: host decides border`)});w({method:E("ui/request-display-mode"),params:w({mode:bi.describe("The display mode being requested.")})});var BT=w({mode:bi.describe("The display mode that was actually set. May differ from requested if not supported.")}).passthrough(),LT=de([E("model"),E("app")]).describe("Tool visibility scope - who can access the tool.");w({resourceUri:R().optional(),visibility:F(LT).optional().describe(`Who can access this tool. Default: ["model", "app"]
129
129
  - "model": Tool visible to and callable by the agent
130
130
  - "app": Tool callable by the app from this server only`)});w({mimeTypes:F(R()).optional().describe('Array of supported MIME types for UI resources.\nMust include `"text/html;profile=mcp-app"` for MCP Apps support.')});w({method:E("ui/download-file"),params:w({contents:F(de([eg,tg])).describe("Resource contents to download — embedded (inline data) or linked (host fetches). Uses standard MCP resource types.")})});w({method:E("ui/message"),params:w({role:E("user").describe('Message role, currently only "user" is supported.'),content:F(xi).describe("Message content blocks (text, image, etc.).")})});w({method:E("ui/notifications/sandbox-resource-ready"),params:w({html:R().describe("HTML content to load into the inner iframe."),sandbox:R().optional().describe("Optional override for the inner iframe's sandbox attribute."),csp:gr.optional().describe("CSP configuration from resource metadata."),permissions:vr.optional().describe("Sandbox permissions from resource metadata.")})});var YT=w({method:E("ui/notifications/tool-result"),params:so.describe("Standard MCP tool execution result.")}),og=w({toolInfo:w({id:zi.optional().describe("JSON-RPC id of the tools/call request."),tool:mr.describe("Tool definition including name, inputSchema, etc.")}).optional().describe("Metadata of the tool call that instantiated this App."),theme:AT.optional().describe("Current color theme preference."),styles:qT.optional().describe("Style configuration for theming the app."),displayMode:bi.optional().describe("How the UI is currently displayed."),availableDisplayModes:F(bi).optional().describe("Display modes the host supports."),containerDimensions:de([w({height:le().describe("Fixed container height in pixels.")}),w({maxHeight:de([le(),ks()]).optional().describe("Maximum container height in pixels.")})]).and(de([w({width:le().describe("Fixed container width in pixels.")}),w({maxWidth:de([le(),ks()]).optional().describe("Maximum container width in pixels.")})])).optional().describe(`Container dimensions. Represents the dimensions of the iframe or other
131
- container holding the app. Specify either width or maxWidth, and either height or maxHeight.`),locale:R().optional().describe("User's language and region preference in BCP 47 format."),timeZone:R().optional().describe("User's timezone in IANA format."),userAgent:R().optional().describe("Host application identifier."),platform:de([E("web"),E("desktop"),E("mobile")]).optional().describe("Platform type for responsive design decisions."),deviceCapabilities:w({touch:qe().optional().describe("Whether the device supports touch input."),hover:qe().optional().describe("Whether the device supports hover interactions.")}).optional().describe("Device input capabilities."),safeAreaInsets:w({top:le().describe("Top safe area inset in pixels."),right:le().describe("Right safe area inset in pixels."),bottom:le().describe("Bottom safe area inset in pixels."),left:le().describe("Left safe area inset in pixels.")}).optional().describe("Mobile safe area boundaries in pixels.")}).passthrough(),GT=w({method:E("ui/notifications/host-context-changed"),params:og.describe("Partial context update containing only changed fields.")});w({method:E("ui/update-model-context"),params:w({content:F(xi).optional().describe("Context content blocks (text, image, etc.)."),structuredContent:ze(R(),Ze().describe("Structured content for machine-readable context data.")).optional().describe("Structured content for machine-readable context data.")})});w({method:E("ui/initialize"),params:w({appInfo:oo.describe("App identification (name and version)."),appCapabilities:kT.describe("Features and capabilities this app provides."),protocolVersion:R().describe("Protocol version this app supports.")})});var XT=w({protocolVersion:R().describe('Negotiated protocol version string (e.g., "2025-11-21").'),hostInfo:oo.describe("Host application identification and version."),hostCapabilities:jT.describe("Features and capabilities provided by the host."),hostContext:og.describe("Rich context about the host environment.")}).passthrough();function Pm(a){let i=document.documentElement;i.setAttribute("data-theme",a),i.style.colorScheme=a}function ep(a,i=document.documentElement){for(let[u,c]of Object.entries(a))c!==void 0&&i.style.setProperty(u,c)}function tp(a){if(document.getElementById("__mcp-host-fonts"))return;let i=document.createElement("style");i.id="__mcp-host-fonts",i.textContent=a,document.head.appendChild(i)}class VT extends TT{constructor(u,c={},r={autoResize:!0}){super(r);Be(this,"_appInfo");Be(this,"_capabilities");Be(this,"options");Be(this,"_hostCapabilities");Be(this,"_hostInfo");Be(this,"_hostContext");Be(this,"eventSchemas",{toolinput:CT,toolinputpartial:DT,toolresult:YT,toolcancelled:UT,hostcontextchanged:GT});Be(this,"_onteardown");Be(this,"_oncalltool");Be(this,"_onlisttools");Be(this,"sendOpenLink",this.openLink);this._appInfo=u,this._capabilities=c,this.options=r,this.setRequestHandler(co,d=>(console.log("Received ping:",d.params),{})),this.setEventHandler("hostcontextchanged",void 0)}onEventDispatch(u,c){u==="hostcontextchanged"&&(this._hostContext={...this._hostContext,...c})}getHostCapabilities(){return this._hostCapabilities}getHostVersion(){return this._hostInfo}getHostContext(){return this._hostContext}get ontoolinput(){return this.getEventHandler("toolinput")}set ontoolinput(u){this.setEventHandler("toolinput",u)}get ontoolinputpartial(){return this.getEventHandler("toolinputpartial")}set ontoolinputpartial(u){this.setEventHandler("toolinputpartial",u)}get ontoolresult(){return this.getEventHandler("toolresult")}set ontoolresult(u){this.setEventHandler("toolresult",u)}get ontoolcancelled(){return this.getEventHandler("toolcancelled")}set ontoolcancelled(u){this.setEventHandler("toolcancelled",u)}get onhostcontextchanged(){return this.getEventHandler("hostcontextchanged")}set onhostcontextchanged(u){this.setEventHandler("hostcontextchanged",u)}get onteardown(){return this._onteardown}set onteardown(u){this.warnIfRequestHandlerReplaced("onteardown",this._onteardown,u),this._onteardown=u,this.replaceRequestHandler(HT,(c,r)=>{if(!this._onteardown)throw Error("No onteardown handler set");return this._onteardown(c.params,r)})}get oncalltool(){return this._oncalltool}set oncalltool(u){this.warnIfRequestHandlerReplaced("oncalltool",this._oncalltool,u),this._oncalltool=u,this.replaceRequestHandler(ag,(c,r)=>{if(!this._oncalltool)throw Error("No oncalltool handler set");return this._oncalltool(c.params,r)})}get onlisttools(){return this._onlisttools}set onlisttools(u){this.warnIfRequestHandlerReplaced("onlisttools",this._onlisttools,u),this._onlisttools=u,this.replaceRequestHandler(ng,(c,r)=>{if(!this._onlisttools)throw Error("No onlisttools handler set");return this._onlisttools(c.params,r)})}assertCapabilityForMethod(u){}assertRequestHandlerCapability(u){switch(u){case"tools/call":case"tools/list":if(!this._capabilities.tools)throw Error(`Client does not support tool capability (required for ${u})`);return;case"ping":case"ui/resource-teardown":return;default:throw Error(`No handler for method ${u} registered`)}}assertNotificationCapability(u){}assertTaskCapability(u){throw Error("Tasks are not supported in MCP Apps")}assertTaskHandlerCapability(u){throw Error("Task handlers are not supported in MCP Apps")}async callServerTool(u,c){if(typeof u=="string")throw Error(`callServerTool() expects an object as its first argument, but received a string ("${u}"). Did you mean: callServerTool({ name: "${u}", arguments: { ... } })?`);return await this.request({method:"tools/call",params:u},so,c)}async readServerResource(u,c){return await this.request({method:"resources/read",params:u},Pp,c)}async listServerResources(u,c){return await this.request({method:"resources/list",params:u},Fp,c)}sendMessage(u,c){return this.request({method:"ui/message",params:u},NT,c)}sendLog(u){return this.notification({method:"notifications/message",params:u})}updateModelContext(u,c){return this.request({method:"ui/update-model-context",params:u},Ps,c)}openLink(u,c){return this.request({method:"ui/open-link",params:u},wT,c)}downloadFile(u,c){return this.request({method:"ui/download-file",params:u},MT,c)}requestTeardown(u={}){return this.notification({method:"ui/notifications/request-teardown",params:u})}requestDisplayMode(u,c){return this.request({method:"ui/request-display-mode",params:u},BT,c)}sendSizeChanged(u){return this.notification({method:"ui/notifications/size-changed",params:u})}setupSizeChangedNotifications(){let u=!1,c=0,r=0,d=()=>{u||(u=!0,requestAnimationFrame(()=>{u=!1;let g=document.documentElement,p=g.style.height;g.style.height="max-content";let v=Math.ceil(g.getBoundingClientRect().height);g.style.height=p;let S=Math.ceil(window.innerWidth);(S!==c||v!==r)&&(c=S,r=v,this.sendSizeChanged({width:S,height:v}))}))};d();let h=new ResizeObserver(d);return h.observe(document.documentElement),h.observe(document.body),()=>h.disconnect()}async connect(u=new ug(window.parent,window.parent),c){var r;if(this.transport)throw Error("App is already connected. Call close() before connecting again.");await super.connect(u);try{let d=await this.request({method:"ui/initialize",params:{appCapabilities:this._capabilities,appInfo:this._appInfo,protocolVersion:ET}},XT,c);if(d===void 0)throw Error(`Server sent invalid initialize result: ${d}`);this._hostCapabilities=d.hostCapabilities,this._hostInfo=d.hostInfo,this._hostContext=d.hostContext,await this.notification({method:"ui/notifications/initialized"}),(r=this.options)!=null&&r.autoResize&&this.setupSizeChangedNotifications()}catch(d){throw this.close(),d}}}function $T({appInfo:a,capabilities:i,onAppCreated:u}){let[c,r]=Wt.useState(null),[d,h]=Wt.useState(!1),[g,p]=Wt.useState(null);return Wt.useEffect(()=>{let v=!0;async function S(){try{let T=new ug(window.parent,window.parent),H=new VT(a,i);u==null||u(H),await H.connect(T),v&&(r(H),h(!0),p(null))}catch(T){v&&(r(null),h(!1),p(T instanceof Error?T:Error("Failed to connect")))}}return S(),()=>{v=!1}},[]),{app:c,isConnected:d,error:g}}function QT(a,i){let u=Wt.useRef(!1);Wt.useEffect(()=>{var c,r;u.current||(i!=null&&i.theme&&Pm(i.theme),(c=i==null?void 0:i.styles)!=null&&c.variables&&ep(i.styles.variables),(i!=null&&i.theme||(r=i==null?void 0:i.styles)!=null&&r.variables)&&(u.current=!0))},[i]),Wt.useEffect(()=>{if(!a)return;let c=r=>{var d;r.theme&&Pm(r.theme),(d=r.styles)!=null&&d.variables&&ep(r.styles.variables)};return a.addEventListener("hostcontextchanged",c),()=>a.removeEventListener("hostcontextchanged",c)},[a])}function JT(a,i){let u=Wt.useRef(!1);Wt.useEffect(()=>{var c,r;u.current||(r=(c=i==null?void 0:i.styles)==null?void 0:c.css)!=null&&r.fonts&&(tp(i.styles.css.fonts),u.current=!0)},[i]),Wt.useEffect(()=>{if(!a)return;let c=r=>{var d,h;(h=(d=r.styles)==null?void 0:d.css)!=null&&h.fonts&&tp(r.styles.css.fonts)};return a.addEventListener("hostcontextchanged",c),()=>a.removeEventListener("hostcontextchanged",c)},[a])}function KT(a,i){QT(a,i),JT(a,i)}function IT(){var g,p;const[a,i]=Wt.useState(null),u=Wt.useCallback(v=>{v.ontoolresult=S=>{if(S!=null&&S.content){const T=Array.isArray(S.content)?S.content.find(H=>H.type==="text"):null;if(T&&"text"in T)try{i(JSON.parse(T.text))}catch{i(T.text)}}}},[]),{app:c,isConnected:r,error:d}=$T({appInfo:{name:"n8n-mcp-ui",version:"1.0.0"},capabilities:{},onAppCreated:u});KT(c,c==null?void 0:c.getHostContext());const h=((p=(g=c==null?void 0:c.getHostContext())==null?void 0:g.toolInfo)==null?void 0:p.tool.name)??null;return{data:a,error:(d==null?void 0:d.message)??null,isConnected:r,app:c,toolName:h}}const np={n8n_create_workflow:"create",n8n_update_full_workflow:"update",n8n_update_partial_workflow:"partial_update",n8n_delete_workflow:"delete",n8n_test_workflow:"test",n8n_autofix_workflow:"autofix",n8n_deploy_template:"deploy"},WT={create:{icon:"+",label:"WORKFLOW CREATED",color:"var(--n8n-success)"},update:{icon:"⟳",label:"WORKFLOW UPDATED",color:"var(--n8n-info)"},partial_update:{icon:"⟳",label:"WORKFLOW UPDATED",color:"var(--n8n-info)"},delete:{icon:"−",label:"WORKFLOW DELETED",color:"var(--n8n-error)"},test:{icon:"▶",label:"WORKFLOW TESTED",color:"var(--n8n-info)"},autofix:{icon:"⚡",label:"WORKFLOW AUTO-FIXED",color:"var(--n8n-warning)"},deploy:{icon:"↓",label:"TEMPLATE DEPLOYED",color:"var(--n8n-success)"}};function FT(a,i){if(a&&np[a])return np[a];const u=i.data;return u!=null&&u.deleted?"delete":u!=null&&u.templateId?"deploy":(u==null?void 0:u.fixesApplied)!==void 0||u!=null&&u.fixes?"autofix":u!=null&&u.executionId?"test":(u==null?void 0:u.operationsApplied)!==void 0?"partial_update":"create"}function PT({details:a}){if(!a)return null;const i=Array.isArray(a.applied)?a.applied:[],u=Array.isArray(a.failed)?a.failed:[],c=Array.isArray(a.warnings)?a.warnings:[];if(i.length===0&&u.length===0)return null;const r=[...i.map(g=>({icon:"✓",color:"var(--n8n-success)",text:String(g)})),...u.map(g=>({icon:"✗",color:"var(--n8n-error)",text:String(g)})),...c.map(g=>({icon:"!",color:"var(--n8n-warning)",text:String(g)}))],d=Y.jsxs("div",{style:{fontSize:"12px",color:"var(--color-text-secondary, var(--n8n-text-muted))",marginBottom:"6px"},children:[Y.jsxs("span",{style:{color:"var(--n8n-success)"},children:[i.length," applied"]}),u.length>0&&Y.jsxs(Y.Fragment,{children:[", ",Y.jsxs("span",{style:{color:"var(--n8n-error)"},children:[u.length," failed"]})]})]}),h=r.map((g,p)=>Y.jsxs("div",{style:{fontSize:"12px",padding:"2px 0",display:"flex",gap:"6px"},children:[Y.jsx("span",{style:{color:g.color,flexShrink:0},children:g.icon}),Y.jsx("span",{children:g.text})]},p));return r.length>5?Y.jsxs(Y.Fragment,{children:[d,Y.jsx(gi,{title:"Operation Log",count:r.length,children:h})]}):Y.jsxs(Y.Fragment,{children:[d,Y.jsx("div",{style:{marginBottom:"8px"},children:h})]})}function e2({data:a}){var r,d,h;const i=Array.isArray((r=a.data)==null?void 0:r.fixes)?a.data.fixes:[],u=((d=a.data)==null?void 0:d.preview)===!0,c=((h=a.data)==null?void 0:h.fixesApplied)??i.length;return Y.jsxs(Y.Fragment,{children:[u&&Y.jsx("div",{style:{fontSize:"11px",fontWeight:600,color:"var(--n8n-warning)",background:"var(--n8n-warning-light)",padding:"4px 10px",borderRadius:"var(--n8n-radius)",marginBottom:"8px",textAlign:"center"},children:"PREVIEW MODE"}),i.length>0&&Y.jsx(gi,{title:"Fixes",count:c,defaultOpen:!0,children:i.map((g,p)=>{const v=String(g.confidence??"").toUpperCase();return Y.jsx("div",{style:{fontSize:"12px",padding:"6px 8px",marginBottom:"4px",borderLeft:`3px solid ${v==="HIGH"?"var(--n8n-success)":"var(--n8n-warning)"}`,paddingLeft:"10px"},children:Y.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"6px"},children:[Y.jsx("span",{children:String(g.description??g.message??JSON.stringify(g))}),v&&Y.jsx(vi,{variant:v==="HIGH"?"success":"warning",children:v})]})},p)})})]})}function t2({data:a}){const i=a.data,u=Array.isArray(i==null?void 0:i.requiredCredentials)?i.requiredCredentials:[],c=i==null?void 0:i.triggerType,r=i==null?void 0:i.autoFixStatus;return Y.jsxs("div",{style:{fontSize:"12px",marginBottom:"8px"},children:[Y.jsxs("div",{style:{display:"flex",gap:"6px",flexWrap:"wrap",marginBottom:u.length>0?"8px":0},children:[c&&Y.jsx(vi,{variant:"info",children:String(c)}),r&&Y.jsx(vi,{variant:r==="success"?"success":"warning",children:String(r)})]}),u.length>0&&Y.jsxs("div",{children:[Y.jsx("div",{style:{fontWeight:500,marginBottom:"4px",color:"var(--color-text-secondary, var(--n8n-text-muted))"},children:"Required credentials:"}),u.map((d,h)=>Y.jsxs("div",{style:{padding:"1px 0"},children:["○ ",d]},h))]})]})}function n2({data:a}){var c,r;const i=(c=a.data)==null?void 0:c.executionId,u=(r=a.data)==null?void 0:r.triggerType;return!i&&!u?null:Y.jsxs("div",{style:{fontSize:"12px",marginBottom:"8px"},children:[i&&Y.jsxs("div",{style:{fontFamily:"var(--font-mono, monospace)",fontSize:"13px",fontWeight:600,marginBottom:"4px"},children:["Execution: ",i]}),u&&Y.jsx(vi,{variant:"info",children:String(u)})]})}function ap({details:a}){if(!a)return null;if(Array.isArray(a.errors)){const c=a.errors;return Y.jsx(gi,{title:"Errors",count:c.length,children:Y.jsx("ul",{style:{paddingLeft:"16px",fontSize:"12px"},children:c.map((r,d)=>Y.jsx("li",{style:{padding:"1px 0"},children:String(r)},d))})})}const i=Object.entries(a).filter(([,c])=>c!=null);return i.length===0?null:i.some(([,c])=>typeof c=="object")?Y.jsx(gi,{title:"Details",children:Y.jsx("pre",{style:{fontSize:"11px",whiteSpace:"pre-wrap",wordBreak:"break-word"},children:JSON.stringify(a,null,2)})}):Y.jsx(gi,{title:"Details",children:Y.jsx("div",{style:{fontSize:"12px"},children:i.map(([c,r])=>Y.jsxs("div",{style:{padding:"2px 0"},children:[Y.jsxs("span",{style:{color:"var(--color-text-secondary, var(--n8n-text-muted))"},children:[c,": "]}),Y.jsx("span",{children:String(r)})]},c))})})}function a2(){var re,_e,Ee,ve,me,V,xe,He,tn,xt;const{data:a,error:i,isConnected:u,toolName:c}=IT();if(i)return Y.jsxs("div",{style:{padding:"16px",color:"#ef4444"},children:["Error: ",i]});if(!u)return Y.jsx("div",{style:{padding:"16px",color:"var(--n8n-text-muted)"},children:"Connecting..."});if(!a)return Y.jsx("div",{style:{padding:"16px",color:"var(--n8n-text-muted)"},children:"Waiting for data..."});const r=a.success===!0,d=FT(c,a),h=WT[d],g=((re=a.data)==null?void 0:re.name)||((_e=a.data)==null?void 0:_e.workflowName),p=((Ee=a.data)==null?void 0:Ee.id)||((ve=a.data)==null?void 0:ve.workflowId),v=(me=a.data)==null?void 0:me.nodeCount,S=(V=a.data)==null?void 0:V.active,T=(xe=a.data)==null?void 0:xe.operationsApplied,H=(He=a.data)==null?void 0:He.executionId,j=(tn=a.data)==null?void 0:tn.fixesApplied,L=(xt=a.data)==null?void 0:xt.templateId,G=r?h.label:h.label+" FAILED",ee=[];p&&ee.push(`ID: ${p}`),v!==void 0&&ee.push(`${v} nodes`),S!==void 0&&ee.push(S?"active":"inactive"),T!==void 0&&ee.push(`${T} ops applied`),H&&ee.push(`exec: ${H}`),j!==void 0&&ee.push(`${j} fixes`),L&&ee.push(`template: ${L}`);const Te=d==="delete"?{maxWidth:"480px",borderLeft:"3px solid var(--n8n-error)",paddingLeft:"12px"}:{maxWidth:"480px"};return Y.jsxs("div",{style:Te,children:[Y.jsxs("div",{style:{display:"flex",alignItems:"flex-start",justifyContent:"space-between",marginBottom:"16px"},children:[Y.jsxs("div",{style:{display:"flex",alignItems:"flex-start",gap:"10px",flex:1,minWidth:0},children:[Y.jsx("span",{style:{fontSize:"18px",lineHeight:"24px",color:h.color,flexShrink:0},children:h.icon}),Y.jsxs("div",{style:{minWidth:0},children:[Y.jsx("div",{style:{fontSize:"11px",fontWeight:600,letterSpacing:"0.05em",textTransform:"uppercase",color:h.color,lineHeight:"16px"},children:G}),g&&Y.jsx("div",{style:{fontSize:"14px",fontWeight:600,color:"var(--color-text-primary, var(--n8n-text))",marginTop:"2px",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:g}),ee.length>0&&Y.jsx("div",{style:{fontSize:"12px",fontFamily:"var(--font-mono, monospace)",color:"var(--color-text-secondary, var(--n8n-text-muted))",marginTop:"2px"},children:ee.join(" · ")})]})]}),Y.jsx(vi,{variant:r?"success":"error",children:r?"Success":"Error"})]}),!r&&a.error&&Y.jsx("div",{style:{fontSize:"12px",color:"var(--n8n-error)",padding:"8px 12px",background:"var(--n8n-error-light)",borderRadius:"var(--n8n-radius)",marginBottom:"8px"},children:a.error}),r&&d==="partial_update"&&Y.jsx(PT,{details:a.details}),r&&d==="autofix"&&Y.jsx(e2,{data:a}),r&&d==="deploy"&&Y.jsx(t2,{data:a}),r&&d==="test"&&Y.jsx(n2,{data:a}),!r&&Y.jsx(ap,{details:a.details}),r&&!["partial_update","autofix","deploy","test"].includes(d)&&a.details&&Y.jsx(ap,{details:a.details})]})}const lp=document.getElementById("root");lp&&Yy.createRoot(lp).render(Y.jsx(a2,{}));</script>
131
+ container holding the app. Specify either width or maxWidth, and either height or maxHeight.`),locale:R().optional().describe("User's language and region preference in BCP 47 format."),timeZone:R().optional().describe("User's timezone in IANA format."),userAgent:R().optional().describe("Host application identifier."),platform:de([E("web"),E("desktop"),E("mobile")]).optional().describe("Platform type for responsive design decisions."),deviceCapabilities:w({touch:qe().optional().describe("Whether the device supports touch input."),hover:qe().optional().describe("Whether the device supports hover interactions.")}).optional().describe("Device input capabilities."),safeAreaInsets:w({top:le().describe("Top safe area inset in pixels."),right:le().describe("Right safe area inset in pixels."),bottom:le().describe("Bottom safe area inset in pixels."),left:le().describe("Left safe area inset in pixels.")}).optional().describe("Mobile safe area boundaries in pixels.")}).passthrough(),GT=w({method:E("ui/notifications/host-context-changed"),params:og.describe("Partial context update containing only changed fields.")});w({method:E("ui/update-model-context"),params:w({content:F(xi).optional().describe("Context content blocks (text, image, etc.)."),structuredContent:ze(R(),Ze().describe("Structured content for machine-readable context data.")).optional().describe("Structured content for machine-readable context data.")})});w({method:E("ui/initialize"),params:w({appInfo:oo.describe("App identification (name and version)."),appCapabilities:kT.describe("Features and capabilities this app provides."),protocolVersion:R().describe("Protocol version this app supports.")})});var XT=w({protocolVersion:R().describe('Negotiated protocol version string (e.g., "2025-11-21").'),hostInfo:oo.describe("Host application identification and version."),hostCapabilities:jT.describe("Features and capabilities provided by the host."),hostContext:og.describe("Rich context about the host environment.")}).passthrough();function Pm(a){let i=document.documentElement;i.setAttribute("data-theme",a),i.style.colorScheme=a}function ep(a,i=document.documentElement){for(let[u,c]of Object.entries(a))c!==void 0&&i.style.setProperty(u,c)}function tp(a){if(document.getElementById("__mcp-host-fonts"))return;let i=document.createElement("style");i.id="__mcp-host-fonts",i.textContent=a,document.head.appendChild(i)}class VT extends TT{constructor(u,c={},r={autoResize:!0}){super(r);Be(this,"_appInfo");Be(this,"_capabilities");Be(this,"options");Be(this,"_hostCapabilities");Be(this,"_hostInfo");Be(this,"_hostContext");Be(this,"eventSchemas",{toolinput:CT,toolinputpartial:DT,toolresult:YT,toolcancelled:UT,hostcontextchanged:GT});Be(this,"_onteardown");Be(this,"_oncalltool");Be(this,"_onlisttools");Be(this,"sendOpenLink",this.openLink);this._appInfo=u,this._capabilities=c,this.options=r,this.setRequestHandler(co,d=>(console.log("Received ping:",d.params),{})),this.setEventHandler("hostcontextchanged",void 0)}onEventDispatch(u,c){u==="hostcontextchanged"&&(this._hostContext={...this._hostContext,...c})}getHostCapabilities(){return this._hostCapabilities}getHostVersion(){return this._hostInfo}getHostContext(){return this._hostContext}get ontoolinput(){return this.getEventHandler("toolinput")}set ontoolinput(u){this.setEventHandler("toolinput",u)}get ontoolinputpartial(){return this.getEventHandler("toolinputpartial")}set ontoolinputpartial(u){this.setEventHandler("toolinputpartial",u)}get ontoolresult(){return this.getEventHandler("toolresult")}set ontoolresult(u){this.setEventHandler("toolresult",u)}get ontoolcancelled(){return this.getEventHandler("toolcancelled")}set ontoolcancelled(u){this.setEventHandler("toolcancelled",u)}get onhostcontextchanged(){return this.getEventHandler("hostcontextchanged")}set onhostcontextchanged(u){this.setEventHandler("hostcontextchanged",u)}get onteardown(){return this._onteardown}set onteardown(u){this.warnIfRequestHandlerReplaced("onteardown",this._onteardown,u),this._onteardown=u,this.replaceRequestHandler(HT,(c,r)=>{if(!this._onteardown)throw Error("No onteardown handler set");return this._onteardown(c.params,r)})}get oncalltool(){return this._oncalltool}set oncalltool(u){this.warnIfRequestHandlerReplaced("oncalltool",this._oncalltool,u),this._oncalltool=u,this.replaceRequestHandler(ag,(c,r)=>{if(!this._oncalltool)throw Error("No oncalltool handler set");return this._oncalltool(c.params,r)})}get onlisttools(){return this._onlisttools}set onlisttools(u){this.warnIfRequestHandlerReplaced("onlisttools",this._onlisttools,u),this._onlisttools=u,this.replaceRequestHandler(ng,(c,r)=>{if(!this._onlisttools)throw Error("No onlisttools handler set");return this._onlisttools(c.params,r)})}assertCapabilityForMethod(u){}assertRequestHandlerCapability(u){switch(u){case"tools/call":case"tools/list":if(!this._capabilities.tools)throw Error(`Client does not support tool capability (required for ${u})`);return;case"ping":case"ui/resource-teardown":return;default:throw Error(`No handler for method ${u} registered`)}}assertNotificationCapability(u){}assertTaskCapability(u){throw Error("Tasks are not supported in MCP Apps")}assertTaskHandlerCapability(u){throw Error("Task handlers are not supported in MCP Apps")}async callServerTool(u,c){if(typeof u=="string")throw Error(`callServerTool() expects an object as its first argument, but received a string ("${u}"). Did you mean: callServerTool({ name: "${u}", arguments: { ... } })?`);return await this.request({method:"tools/call",params:u},so,{onprogress:()=>{},resetTimeoutOnProgress:!0,...c})}async readServerResource(u,c){return await this.request({method:"resources/read",params:u},Pp,c)}async listServerResources(u,c){return await this.request({method:"resources/list",params:u},Fp,c)}sendMessage(u,c){return this.request({method:"ui/message",params:u},NT,c)}sendLog(u){return this.notification({method:"notifications/message",params:u})}updateModelContext(u,c){return this.request({method:"ui/update-model-context",params:u},Ps,c)}openLink(u,c){return this.request({method:"ui/open-link",params:u},wT,c)}downloadFile(u,c){return this.request({method:"ui/download-file",params:u},MT,c)}requestTeardown(u={}){return this.notification({method:"ui/notifications/request-teardown",params:u})}requestDisplayMode(u,c){return this.request({method:"ui/request-display-mode",params:u},BT,c)}sendSizeChanged(u){return this.notification({method:"ui/notifications/size-changed",params:u})}setupSizeChangedNotifications(){let u=!1,c=0,r=0,d=()=>{u||(u=!0,requestAnimationFrame(()=>{u=!1;let g=document.documentElement,p=g.style.height;g.style.height="max-content";let v=Math.ceil(g.getBoundingClientRect().height);g.style.height=p;let S=Math.ceil(window.innerWidth);(S!==c||v!==r)&&(c=S,r=v,this.sendSizeChanged({width:S,height:v}))}))};d();let h=new ResizeObserver(d);return h.observe(document.documentElement),h.observe(document.body),()=>h.disconnect()}async connect(u=new ug(window.parent,window.parent),c){var r;if(this.transport)throw Error("App is already connected. Call close() before connecting again.");await super.connect(u);try{let d=await this.request({method:"ui/initialize",params:{appCapabilities:this._capabilities,appInfo:this._appInfo,protocolVersion:ET}},XT,c);if(d===void 0)throw Error(`Server sent invalid initialize result: ${d}`);this._hostCapabilities=d.hostCapabilities,this._hostInfo=d.hostInfo,this._hostContext=d.hostContext,await this.notification({method:"ui/notifications/initialized"}),(r=this.options)!=null&&r.autoResize&&this.setupSizeChangedNotifications()}catch(d){throw this.close(),d}}}function $T({appInfo:a,capabilities:i,onAppCreated:u}){let[c,r]=Wt.useState(null),[d,h]=Wt.useState(!1),[g,p]=Wt.useState(null);return Wt.useEffect(()=>{let v=!0;async function S(){try{let T=new ug(window.parent,window.parent),H=new VT(a,i);u==null||u(H),await H.connect(T),v&&(r(H),h(!0),p(null))}catch(T){v&&(r(null),h(!1),p(T instanceof Error?T:Error("Failed to connect")))}}return S(),()=>{v=!1}},[]),{app:c,isConnected:d,error:g}}function QT(a,i){let u=Wt.useRef(!1);Wt.useEffect(()=>{var c,r;u.current||(i!=null&&i.theme&&Pm(i.theme),(c=i==null?void 0:i.styles)!=null&&c.variables&&ep(i.styles.variables),(i!=null&&i.theme||(r=i==null?void 0:i.styles)!=null&&r.variables)&&(u.current=!0))},[i]),Wt.useEffect(()=>{if(!a)return;let c=r=>{var d;r.theme&&Pm(r.theme),(d=r.styles)!=null&&d.variables&&ep(r.styles.variables)};return a.addEventListener("hostcontextchanged",c),()=>a.removeEventListener("hostcontextchanged",c)},[a])}function JT(a,i){let u=Wt.useRef(!1);Wt.useEffect(()=>{var c,r;u.current||(r=(c=i==null?void 0:i.styles)==null?void 0:c.css)!=null&&r.fonts&&(tp(i.styles.css.fonts),u.current=!0)},[i]),Wt.useEffect(()=>{if(!a)return;let c=r=>{var d,h;(h=(d=r.styles)==null?void 0:d.css)!=null&&h.fonts&&tp(r.styles.css.fonts)};return a.addEventListener("hostcontextchanged",c),()=>a.removeEventListener("hostcontextchanged",c)},[a])}function KT(a,i){QT(a,i),JT(a,i)}function IT(){var g,p;const[a,i]=Wt.useState(null),u=Wt.useCallback(v=>{v.ontoolresult=S=>{if(S!=null&&S.content){const T=Array.isArray(S.content)?S.content.find(H=>H.type==="text"):null;if(T&&"text"in T)try{i(JSON.parse(T.text))}catch{i(T.text)}}}},[]),{app:c,isConnected:r,error:d}=$T({appInfo:{name:"n8n-mcp-ui",version:"1.0.0"},capabilities:{},onAppCreated:u});KT(c,c==null?void 0:c.getHostContext());const h=((p=(g=c==null?void 0:c.getHostContext())==null?void 0:g.toolInfo)==null?void 0:p.tool.name)??null;return{data:a,error:(d==null?void 0:d.message)??null,isConnected:r,app:c,toolName:h}}const np={n8n_create_workflow:"create",n8n_update_full_workflow:"update",n8n_update_partial_workflow:"partial_update",n8n_delete_workflow:"delete",n8n_test_workflow:"test",n8n_autofix_workflow:"autofix",n8n_deploy_template:"deploy"},WT={create:{icon:"+",label:"WORKFLOW CREATED",color:"var(--n8n-success)"},update:{icon:"⟳",label:"WORKFLOW UPDATED",color:"var(--n8n-info)"},partial_update:{icon:"⟳",label:"WORKFLOW UPDATED",color:"var(--n8n-info)"},delete:{icon:"−",label:"WORKFLOW DELETED",color:"var(--n8n-error)"},test:{icon:"▶",label:"WORKFLOW TESTED",color:"var(--n8n-info)"},autofix:{icon:"⚡",label:"WORKFLOW AUTO-FIXED",color:"var(--n8n-warning)"},deploy:{icon:"↓",label:"TEMPLATE DEPLOYED",color:"var(--n8n-success)"}};function FT(a,i){if(a&&np[a])return np[a];const u=i.data;return u!=null&&u.deleted?"delete":u!=null&&u.templateId?"deploy":(u==null?void 0:u.fixesApplied)!==void 0||u!=null&&u.fixes?"autofix":u!=null&&u.executionId?"test":(u==null?void 0:u.operationsApplied)!==void 0?"partial_update":"create"}function PT({details:a}){if(!a)return null;const i=Array.isArray(a.applied)?a.applied:[],u=Array.isArray(a.failed)?a.failed:[],c=Array.isArray(a.warnings)?a.warnings:[];if(i.length===0&&u.length===0)return null;const r=[...i.map(g=>({icon:"✓",color:"var(--n8n-success)",text:String(g)})),...u.map(g=>({icon:"✗",color:"var(--n8n-error)",text:String(g)})),...c.map(g=>({icon:"!",color:"var(--n8n-warning)",text:String(g)}))],d=Y.jsxs("div",{style:{fontSize:"12px",color:"var(--color-text-secondary, var(--n8n-text-muted))",marginBottom:"6px"},children:[Y.jsxs("span",{style:{color:"var(--n8n-success)"},children:[i.length," applied"]}),u.length>0&&Y.jsxs(Y.Fragment,{children:[", ",Y.jsxs("span",{style:{color:"var(--n8n-error)"},children:[u.length," failed"]})]})]}),h=r.map((g,p)=>Y.jsxs("div",{style:{fontSize:"12px",padding:"2px 0",display:"flex",gap:"6px"},children:[Y.jsx("span",{style:{color:g.color,flexShrink:0},children:g.icon}),Y.jsx("span",{children:g.text})]},p));return r.length>5?Y.jsxs(Y.Fragment,{children:[d,Y.jsx(gi,{title:"Operation Log",count:r.length,children:h})]}):Y.jsxs(Y.Fragment,{children:[d,Y.jsx("div",{style:{marginBottom:"8px"},children:h})]})}function e2({data:a}){var r,d,h;const i=Array.isArray((r=a.data)==null?void 0:r.fixes)?a.data.fixes:[],u=((d=a.data)==null?void 0:d.preview)===!0,c=((h=a.data)==null?void 0:h.fixesApplied)??i.length;return Y.jsxs(Y.Fragment,{children:[u&&Y.jsx("div",{style:{fontSize:"11px",fontWeight:600,color:"var(--n8n-warning)",background:"var(--n8n-warning-light)",padding:"4px 10px",borderRadius:"var(--n8n-radius)",marginBottom:"8px",textAlign:"center"},children:"PREVIEW MODE"}),i.length>0&&Y.jsx(gi,{title:"Fixes",count:c,defaultOpen:!0,children:i.map((g,p)=>{const v=String(g.confidence??"").toUpperCase();return Y.jsx("div",{style:{fontSize:"12px",padding:"6px 8px",marginBottom:"4px",borderLeft:`3px solid ${v==="HIGH"?"var(--n8n-success)":"var(--n8n-warning)"}`,paddingLeft:"10px"},children:Y.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"6px"},children:[Y.jsx("span",{children:String(g.description??g.message??JSON.stringify(g))}),v&&Y.jsx(vi,{variant:v==="HIGH"?"success":"warning",children:v})]})},p)})})]})}function t2({data:a}){const i=a.data,u=Array.isArray(i==null?void 0:i.requiredCredentials)?i.requiredCredentials:[],c=i==null?void 0:i.triggerType,r=i==null?void 0:i.autoFixStatus;return Y.jsxs("div",{style:{fontSize:"12px",marginBottom:"8px"},children:[Y.jsxs("div",{style:{display:"flex",gap:"6px",flexWrap:"wrap",marginBottom:u.length>0?"8px":0},children:[c&&Y.jsx(vi,{variant:"info",children:String(c)}),r&&Y.jsx(vi,{variant:r==="success"?"success":"warning",children:String(r)})]}),u.length>0&&Y.jsxs("div",{children:[Y.jsx("div",{style:{fontWeight:500,marginBottom:"4px",color:"var(--color-text-secondary, var(--n8n-text-muted))"},children:"Required credentials:"}),u.map((d,h)=>Y.jsxs("div",{style:{padding:"1px 0"},children:["○ ",d]},h))]})]})}function n2({data:a}){var c,r;const i=(c=a.data)==null?void 0:c.executionId,u=(r=a.data)==null?void 0:r.triggerType;return!i&&!u?null:Y.jsxs("div",{style:{fontSize:"12px",marginBottom:"8px"},children:[i&&Y.jsxs("div",{style:{fontFamily:"var(--font-mono, monospace)",fontSize:"13px",fontWeight:600,marginBottom:"4px"},children:["Execution: ",i]}),u&&Y.jsx(vi,{variant:"info",children:String(u)})]})}function ap({details:a}){if(!a)return null;if(Array.isArray(a.errors)){const c=a.errors;return Y.jsx(gi,{title:"Errors",count:c.length,children:Y.jsx("ul",{style:{paddingLeft:"16px",fontSize:"12px"},children:c.map((r,d)=>Y.jsx("li",{style:{padding:"1px 0"},children:String(r)},d))})})}const i=Object.entries(a).filter(([,c])=>c!=null);return i.length===0?null:i.some(([,c])=>typeof c=="object")?Y.jsx(gi,{title:"Details",children:Y.jsx("pre",{style:{fontSize:"11px",whiteSpace:"pre-wrap",wordBreak:"break-word"},children:JSON.stringify(a,null,2)})}):Y.jsx(gi,{title:"Details",children:Y.jsx("div",{style:{fontSize:"12px"},children:i.map(([c,r])=>Y.jsxs("div",{style:{padding:"2px 0"},children:[Y.jsxs("span",{style:{color:"var(--color-text-secondary, var(--n8n-text-muted))"},children:[c,": "]}),Y.jsx("span",{children:String(r)})]},c))})})}function a2(){var re,_e,Ee,ve,me,V,xe,He,tn,xt;const{data:a,error:i,isConnected:u,toolName:c}=IT();if(i)return Y.jsxs("div",{style:{padding:"16px",color:"#ef4444"},children:["Error: ",i]});if(!u)return Y.jsx("div",{style:{padding:"16px",color:"var(--n8n-text-muted)"},children:"Connecting..."});if(!a)return Y.jsx("div",{style:{padding:"16px",color:"var(--n8n-text-muted)"},children:"Waiting for data..."});const r=a.success===!0,d=FT(c,a),h=WT[d],g=((re=a.data)==null?void 0:re.name)||((_e=a.data)==null?void 0:_e.workflowName),p=((Ee=a.data)==null?void 0:Ee.id)||((ve=a.data)==null?void 0:ve.workflowId),v=(me=a.data)==null?void 0:me.nodeCount,S=(V=a.data)==null?void 0:V.active,T=(xe=a.data)==null?void 0:xe.operationsApplied,H=(He=a.data)==null?void 0:He.executionId,j=(tn=a.data)==null?void 0:tn.fixesApplied,L=(xt=a.data)==null?void 0:xt.templateId,G=r?h.label:h.label+" FAILED",ee=[];p&&ee.push(`ID: ${p}`),v!==void 0&&ee.push(`${v} nodes`),S!==void 0&&ee.push(S?"active":"inactive"),T!==void 0&&ee.push(`${T} ops applied`),H&&ee.push(`exec: ${H}`),j!==void 0&&ee.push(`${j} fixes`),L&&ee.push(`template: ${L}`);const Te=d==="delete"?{maxWidth:"480px",borderLeft:"3px solid var(--n8n-error)",paddingLeft:"12px"}:{maxWidth:"480px"};return Y.jsxs("div",{style:Te,children:[Y.jsxs("div",{style:{display:"flex",alignItems:"flex-start",justifyContent:"space-between",marginBottom:"16px"},children:[Y.jsxs("div",{style:{display:"flex",alignItems:"flex-start",gap:"10px",flex:1,minWidth:0},children:[Y.jsx("span",{style:{fontSize:"18px",lineHeight:"24px",color:h.color,flexShrink:0},children:h.icon}),Y.jsxs("div",{style:{minWidth:0},children:[Y.jsx("div",{style:{fontSize:"11px",fontWeight:600,letterSpacing:"0.05em",textTransform:"uppercase",color:h.color,lineHeight:"16px"},children:G}),g&&Y.jsx("div",{style:{fontSize:"14px",fontWeight:600,color:"var(--color-text-primary, var(--n8n-text))",marginTop:"2px",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:g}),ee.length>0&&Y.jsx("div",{style:{fontSize:"12px",fontFamily:"var(--font-mono, monospace)",color:"var(--color-text-secondary, var(--n8n-text-muted))",marginTop:"2px"},children:ee.join(" · ")})]})]}),Y.jsx(vi,{variant:r?"success":"error",children:r?"Success":"Error"})]}),!r&&a.error&&Y.jsx("div",{style:{fontSize:"12px",color:"var(--n8n-error)",padding:"8px 12px",background:"var(--n8n-error-light)",borderRadius:"var(--n8n-radius)",marginBottom:"8px"},children:a.error}),r&&d==="partial_update"&&Y.jsx(PT,{details:a.details}),r&&d==="autofix"&&Y.jsx(e2,{data:a}),r&&d==="deploy"&&Y.jsx(t2,{data:a}),r&&d==="test"&&Y.jsx(n2,{data:a}),!r&&Y.jsx(ap,{details:a.details}),r&&!["partial_update","autofix","deploy","test"].includes(d)&&a.details&&Y.jsx(ap,{details:a.details})]})}const lp=document.getElementById("root");lp&&Yy.createRoot(lp).render(Y.jsx(a2,{}));</script>
132
132
  <style rel="stylesheet" crossorigin>:root{--n8n-primary: #ff6d5a;--n8n-primary-light: #ff8a7a;--n8n-success: #17bf79;--n8n-warning: #f59e0b;--n8n-error: #ef4444;--n8n-info: #3b82f6;--n8n-bg: #1a1a2e;--n8n-bg-card: #252540;--n8n-text: #e0e0e0;--n8n-text-muted: #9ca3af;--n8n-border: #374151;--n8n-error-light: #fee2e2;--n8n-warning-light: #fef3cd;--n8n-success-light: #e8f9f0;--n8n-info-light: #dbeafe;--n8n-radius: 8px;font-family:var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif)}[data-theme=light]{--n8n-bg: #ffffff;--n8n-bg-card: #f9fafb;--n8n-text: #1f2937;--n8n-text-muted: #6b7280;--n8n-border: #e5e7eb;--n8n-error-light: #fef2f2;--n8n-warning-light: #fffbeb;--n8n-success-light: #f0fdf4;--n8n-info-light: #eff6ff}*{margin:0;padding:0;box-sizing:border-box}body{background:var(--color-background-primary, var(--n8n-bg));color:var(--color-text-primary, var(--n8n-text));line-height:1.5;padding:16px}</style>
133
133
  </head>
134
134
  <body>
@@ -128,7 +128,7 @@ Boolean requesting whether a visible border and background is provided by the ho
128
128
  - omitted: host decides border`)});w({method:E("ui/request-display-mode"),params:w({mode:yi.describe("The display mode being requested.")})});var jT=w({mode:yi.describe("The display mode that was actually set. May differ from requested if not supported.")}).passthrough(),BT=me([E("model"),E("app")]).describe("Tool visibility scope - who can access the tool.");w({resourceUri:R().optional(),visibility:F(BT).optional().describe(`Who can access this tool. Default: ["model", "app"]
129
129
  - "model": Tool visible to and callable by the agent
130
130
  - "app": Tool callable by the app from this server only`)});w({mimeTypes:F(R()).optional().describe('Array of supported MIME types for UI resources.\nMust include `"text/html;profile=mcp-app"` for MCP Apps support.')});w({method:E("ui/download-file"),params:w({contents:F(me([Pp,eg])).describe("Resource contents to download — embedded (inline data) or linked (host fetches). Uses standard MCP resource types.")})});w({method:E("ui/message"),params:w({role:E("user").describe('Message role, currently only "user" is supported.'),content:F(Ai).describe("Message content blocks (text, image, etc.).")})});w({method:E("ui/notifications/sandbox-resource-ready"),params:w({html:R().describe("HTML content to load into the inner iframe."),sandbox:R().optional().describe("Optional override for the inner iframe's sandbox attribute."),csp:vr.optional().describe("CSP configuration from resource metadata."),permissions:yr.optional().describe("Sandbox permissions from resource metadata.")})});var YT=w({method:E("ui/notifications/tool-result"),params:so.describe("Standard MCP tool execution result.")}),ug=w({toolInfo:w({id:bi.optional().describe("JSON-RPC id of the tools/call request."),tool:pr.describe("Tool definition including name, inputSchema, etc.")}).optional().describe("Metadata of the tool call that instantiated this App."),theme:OT.optional().describe("Current color theme preference."),styles:ZT.optional().describe("Style configuration for theming the app."),displayMode:yi.optional().describe("How the UI is currently displayed."),availableDisplayModes:F(yi).optional().describe("Display modes the host supports."),containerDimensions:me([w({height:ie().describe("Fixed container height in pixels.")}),w({maxHeight:me([ie(),Bs()]).optional().describe("Maximum container height in pixels.")})]).and(me([w({width:ie().describe("Fixed container width in pixels.")}),w({maxWidth:me([ie(),Bs()]).optional().describe("Maximum container width in pixels.")})])).optional().describe(`Container dimensions. Represents the dimensions of the iframe or other
131
- container holding the app. Specify either width or maxWidth, and either height or maxHeight.`),locale:R().optional().describe("User's language and region preference in BCP 47 format."),timeZone:R().optional().describe("User's timezone in IANA format."),userAgent:R().optional().describe("Host application identifier."),platform:me([E("web"),E("desktop"),E("mobile")]).optional().describe("Platform type for responsive design decisions."),deviceCapabilities:w({touch:Ze().optional().describe("Whether the device supports touch input."),hover:Ze().optional().describe("Whether the device supports hover interactions.")}).optional().describe("Device input capabilities."),safeAreaInsets:w({top:ie().describe("Top safe area inset in pixels."),right:ie().describe("Right safe area inset in pixels."),bottom:ie().describe("Bottom safe area inset in pixels."),left:ie().describe("Left safe area inset in pixels.")}).optional().describe("Mobile safe area boundaries in pixels.")}).passthrough(),LT=w({method:E("ui/notifications/host-context-changed"),params:ug.describe("Partial context update containing only changed fields.")});w({method:E("ui/update-model-context"),params:w({content:F(Ai).optional().describe("Context content blocks (text, image, etc.)."),structuredContent:Te(R(),Ue().describe("Structured content for machine-readable context data.")).optional().describe("Structured content for machine-readable context data.")})});w({method:E("ui/initialize"),params:w({appInfo:oo.describe("App identification (name and version)."),appCapabilities:kT.describe("Features and capabilities this app provides."),protocolVersion:R().describe("Protocol version this app supports.")})});var GT=w({protocolVersion:R().describe('Negotiated protocol version string (e.g., "2025-11-21").'),hostInfo:oo.describe("Host application identification and version."),hostCapabilities:HT.describe("Features and capabilities provided by the host."),hostContext:ug.describe("Rich context about the host environment.")}).passthrough();function ep(a){let i=document.documentElement;i.setAttribute("data-theme",a),i.style.colorScheme=a}function tp(a,i=document.documentElement){for(let[u,c]of Object.entries(a))c!==void 0&&i.style.setProperty(u,c)}function np(a){if(document.getElementById("__mcp-host-fonts"))return;let i=document.createElement("style");i.id="__mcp-host-fonts",i.textContent=a,document.head.appendChild(i)}class XT extends zT{constructor(u,c={},r={autoResize:!0}){super(r);je(this,"_appInfo");je(this,"_capabilities");je(this,"options");je(this,"_hostCapabilities");je(this,"_hostInfo");je(this,"_hostContext");je(this,"eventSchemas",{toolinput:xT,toolinputpartial:CT,toolresult:YT,toolcancelled:DT,hostcontextchanged:LT});je(this,"_onteardown");je(this,"_oncalltool");je(this,"_onlisttools");je(this,"sendOpenLink",this.openLink);this._appInfo=u,this._capabilities=c,this.options=r,this.setRequestHandler(co,d=>(console.log("Received ping:",d.params),{})),this.setEventHandler("hostcontextchanged",void 0)}onEventDispatch(u,c){u==="hostcontextchanged"&&(this._hostContext={...this._hostContext,...c})}getHostCapabilities(){return this._hostCapabilities}getHostVersion(){return this._hostInfo}getHostContext(){return this._hostContext}get ontoolinput(){return this.getEventHandler("toolinput")}set ontoolinput(u){this.setEventHandler("toolinput",u)}get ontoolinputpartial(){return this.getEventHandler("toolinputpartial")}set ontoolinputpartial(u){this.setEventHandler("toolinputpartial",u)}get ontoolresult(){return this.getEventHandler("toolresult")}set ontoolresult(u){this.setEventHandler("toolresult",u)}get ontoolcancelled(){return this.getEventHandler("toolcancelled")}set ontoolcancelled(u){this.setEventHandler("toolcancelled",u)}get onhostcontextchanged(){return this.getEventHandler("hostcontextchanged")}set onhostcontextchanged(u){this.setEventHandler("hostcontextchanged",u)}get onteardown(){return this._onteardown}set onteardown(u){this.warnIfRequestHandlerReplaced("onteardown",this._onteardown,u),this._onteardown=u,this.replaceRequestHandler(qT,(c,r)=>{if(!this._onteardown)throw Error("No onteardown handler set");return this._onteardown(c.params,r)})}get oncalltool(){return this._oncalltool}set oncalltool(u){this.warnIfRequestHandlerReplaced("oncalltool",this._oncalltool,u),this._oncalltool=u,this.replaceRequestHandler(ng,(c,r)=>{if(!this._oncalltool)throw Error("No oncalltool handler set");return this._oncalltool(c.params,r)})}get onlisttools(){return this._onlisttools}set onlisttools(u){this.warnIfRequestHandlerReplaced("onlisttools",this._onlisttools,u),this._onlisttools=u,this.replaceRequestHandler(tg,(c,r)=>{if(!this._onlisttools)throw Error("No onlisttools handler set");return this._onlisttools(c.params,r)})}assertCapabilityForMethod(u){}assertRequestHandlerCapability(u){switch(u){case"tools/call":case"tools/list":if(!this._capabilities.tools)throw Error(`Client does not support tool capability (required for ${u})`);return;case"ping":case"ui/resource-teardown":return;default:throw Error(`No handler for method ${u} registered`)}}assertNotificationCapability(u){}assertTaskCapability(u){throw Error("Tasks are not supported in MCP Apps")}assertTaskHandlerCapability(u){throw Error("Task handlers are not supported in MCP Apps")}async callServerTool(u,c){if(typeof u=="string")throw Error(`callServerTool() expects an object as its first argument, but received a string ("${u}"). Did you mean: callServerTool({ name: "${u}", arguments: { ... } })?`);return await this.request({method:"tools/call",params:u},so,c)}async readServerResource(u,c){return await this.request({method:"resources/read",params:u},Fp,c)}async listServerResources(u,c){return await this.request({method:"resources/list",params:u},Wp,c)}sendMessage(u,c){return this.request({method:"ui/message",params:u},NT,c)}sendLog(u){return this.notification({method:"notifications/message",params:u})}updateModelContext(u,c){return this.request({method:"ui/update-model-context",params:u},er,c)}openLink(u,c){return this.request({method:"ui/open-link",params:u},MT,c)}downloadFile(u,c){return this.request({method:"ui/download-file",params:u},wT,c)}requestTeardown(u={}){return this.notification({method:"ui/notifications/request-teardown",params:u})}requestDisplayMode(u,c){return this.request({method:"ui/request-display-mode",params:u},jT,c)}sendSizeChanged(u){return this.notification({method:"ui/notifications/size-changed",params:u})}setupSizeChangedNotifications(){let u=!1,c=0,r=0,d=()=>{u||(u=!0,requestAnimationFrame(()=>{u=!1;let v=document.documentElement,p=v.style.height;v.style.height="max-content";let g=Math.ceil(v.getBoundingClientRect().height);v.style.height=p;let S=Math.ceil(window.innerWidth);(S!==c||g!==r)&&(c=S,r=g,this.sendSizeChanged({width:S,height:g}))}))};d();let h=new ResizeObserver(d);return h.observe(document.documentElement),h.observe(document.body),()=>h.disconnect()}async connect(u=new ig(window.parent,window.parent),c){var r;if(this.transport)throw Error("App is already connected. Call close() before connecting again.");await super.connect(u);try{let d=await this.request({method:"ui/initialize",params:{appCapabilities:this._capabilities,appInfo:this._appInfo,protocolVersion:TT}},GT,c);if(d===void 0)throw Error(`Server sent invalid initialize result: ${d}`);this._hostCapabilities=d.hostCapabilities,this._hostInfo=d.hostInfo,this._hostContext=d.hostContext,await this.notification({method:"ui/notifications/initialized"}),(r=this.options)!=null&&r.autoResize&&this.setupSizeChangedNotifications()}catch(d){throw this.close(),d}}}function VT({appInfo:a,capabilities:i,onAppCreated:u}){let[c,r]=kt.useState(null),[d,h]=kt.useState(!1),[v,p]=kt.useState(null);return kt.useEffect(()=>{let g=!0;async function S(){try{let T=new ig(window.parent,window.parent),H=new XT(a,i);u==null||u(H),await H.connect(T),g&&(r(H),h(!0),p(null))}catch(T){g&&(r(null),h(!1),p(T instanceof Error?T:Error("Failed to connect")))}}return S(),()=>{g=!1}},[]),{app:c,isConnected:d,error:v}}function QT(a,i){let u=kt.useRef(!1);kt.useEffect(()=>{var c,r;u.current||(i!=null&&i.theme&&ep(i.theme),(c=i==null?void 0:i.styles)!=null&&c.variables&&tp(i.styles.variables),(i!=null&&i.theme||(r=i==null?void 0:i.styles)!=null&&r.variables)&&(u.current=!0))},[i]),kt.useEffect(()=>{if(!a)return;let c=r=>{var d;r.theme&&ep(r.theme),(d=r.styles)!=null&&d.variables&&tp(r.styles.variables)};return a.addEventListener("hostcontextchanged",c),()=>a.removeEventListener("hostcontextchanged",c)},[a])}function $T(a,i){let u=kt.useRef(!1);kt.useEffect(()=>{var c,r;u.current||(r=(c=i==null?void 0:i.styles)==null?void 0:c.css)!=null&&r.fonts&&(np(i.styles.css.fonts),u.current=!0)},[i]),kt.useEffect(()=>{if(!a)return;let c=r=>{var d,h;(h=(d=r.styles)==null?void 0:d.css)!=null&&h.fonts&&np(r.styles.css.fonts)};return a.addEventListener("hostcontextchanged",c),()=>a.removeEventListener("hostcontextchanged",c)},[a])}function JT(a,i){QT(a,i),$T(a,i)}function KT(){var v,p;const[a,i]=kt.useState(null),u=kt.useCallback(g=>{g.ontoolresult=S=>{if(S!=null&&S.content){const T=Array.isArray(S.content)?S.content.find(H=>H.type==="text"):null;if(T&&"text"in T)try{i(JSON.parse(T.text))}catch{i(T.text)}}}},[]),{app:c,isConnected:r,error:d}=VT({appInfo:{name:"n8n-mcp-ui",version:"1.0.0"},capabilities:{},onAppCreated:u});JT(c,c==null?void 0:c.getHostContext());const h=((p=(v=c==null?void 0:c.getHostContext())==null?void 0:v.toolInfo)==null?void 0:p.tool.name)??null;return{data:a,error:(d==null?void 0:d.message)??null,isConnected:r,app:c,toolName:h}}function IT({errorCount:a,warningCount:i}){const u=a+i;if(u===0)return ee.jsxs("div",{style:{marginBottom:"12px"},children:[ee.jsx("div",{style:{height:"6px",borderRadius:"3px",background:"var(--n8n-success)",marginBottom:"6px"}}),ee.jsx("div",{style:{fontSize:"12px",color:"var(--n8n-success)",fontWeight:500},children:"All checks passed"})]});const c=a/u*100,r=i/u*100;return ee.jsxs("div",{style:{marginBottom:"12px"},children:[ee.jsxs("div",{style:{height:"6px",borderRadius:"3px",background:"var(--n8n-border)",overflow:"hidden",display:"flex"},children:[a>0&&ee.jsx("div",{style:{width:`${c}%`,background:"var(--n8n-error)",minWidth:"4px"}}),i>0&&ee.jsx("div",{style:{width:`${r}%`,background:"var(--n8n-warning)",minWidth:"4px"}})]}),ee.jsxs("div",{style:{fontSize:"12px",color:"var(--color-text-secondary, var(--n8n-text-muted))",marginTop:"6px"},children:[ee.jsx("span",{style:{color:"var(--n8n-error)",fontWeight:500},children:a})," error",a!==1?"s":""," · ",ee.jsx("span",{style:{color:"var(--n8n-warning)",fontWeight:500},children:i})," warning",i!==1?"s":""]})]})}function to({issue:a,variant:i}){const u=i==="error"?"var(--n8n-error)":"var(--n8n-warning)",c="fix"in a?a.fix:void 0;return ee.jsxs("div",{style:{padding:"6px 10px",marginBottom:"4px",borderLeft:`3px solid ${u}`,fontSize:"12px"},children:[ee.jsx("div",{style:{color:"var(--color-text-primary, var(--n8n-text))"},children:a.message}),a.property&&ee.jsx("div",{style:{color:"var(--color-text-secondary, var(--n8n-text-muted))",fontSize:"11px",marginTop:"2px"},children:a.property}),c&&ee.jsxs("div",{style:{color:u,fontSize:"11px",marginTop:"2px"},children:["→ ",c]})]})}function WT({group:a}){const i=a.errors.length,u=a.warnings.length;return ee.jsxs(Ku,{title:a.node,count:i+u,defaultOpen:i>0,children:[ee.jsxs("div",{style:{display:"flex",gap:"8px",marginBottom:"6px",flexWrap:"wrap"},children:[i>0&&ee.jsxs(Hs,{variant:"error",children:[i," error",i!==1?"s":""]}),u>0&&ee.jsxs(Hs,{variant:"warning",children:[u," warning",u!==1?"s":""]})]}),a.errors.map((c,r)=>ee.jsx(to,{issue:c,variant:"error"},`e-${r}`)),a.warnings.map((c,r)=>ee.jsx(to,{issue:c,variant:"warning"},`w-${r}`))]})}function FT(){var H,k,Y,L,re;const{data:a,error:i,isConnected:u}=KT(),c=(a==null?void 0:a.data)||a,r=(c==null?void 0:c.errors)||(a==null?void 0:a.errors)||[],d=(c==null?void 0:c.warnings)||(a==null?void 0:a.warnings)||[],h=kt.useMemo(()=>{if(r.length===0&&d.length===0)return null;const ue=r.some(K=>K.node)||d.some(K=>K.node),ae=new Set([...r.filter(K=>K.node).map(K=>K.node),...d.filter(K=>K.node).map(K=>K.node)]);if(!ue||ae.size<=1)return null;const ge=[];for(const K of ae)ge.push({node:K,errors:r.filter(G=>G.node===K),warnings:d.filter(G=>G.node===K)});const Ee=r.filter(K=>!K.node),_e=d.filter(K=>!K.node);return(Ee.length>0||_e.length>0)&&ge.push({node:"General",errors:Ee,warnings:_e}),ge.sort((K,G)=>G.errors.length+G.warnings.length-(K.errors.length+K.warnings.length)),ge},[r,d]);if(i)return ee.jsxs("div",{style:{padding:"16px",color:"#ef4444"},children:["Error: ",i]});if(!u)return ee.jsx("div",{style:{padding:"16px",color:"var(--n8n-text-muted)"},children:"Connecting..."});if(!a)return ee.jsx("div",{style:{padding:"16px",color:"var(--n8n-text-muted)"},children:"Waiting for data..."});const v=c.valid??a.valid??!1,p=a.displayName||((H=a.data)==null?void 0:H.workflowName),g=(c==null?void 0:c.suggestions)||(a==null?void 0:a.suggestions)||[],S=((k=a.summary)==null?void 0:k.errorCount)??((Y=c==null?void 0:c.summary)==null?void 0:Y.errorCount)??r.length,T=((L=a.summary)==null?void 0:L.warningCount)??((re=c==null?void 0:c.summary)==null?void 0:re.warningCount)??d.length;return ee.jsxs("div",{style:{maxWidth:"480px"},children:[ee.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"12px",marginBottom:"12px"},children:[ee.jsx(Hs,{variant:v?"success":"error",children:v?"Valid":"Invalid"}),p&&ee.jsx("span",{style:{fontSize:"14px",color:"var(--color-text-secondary, var(--n8n-text-muted))"},children:p})]}),ee.jsx(IT,{errorCount:S,warningCount:T}),h?h.map(ue=>ee.jsx(WT,{group:ue},ue.node)):ee.jsxs(ee.Fragment,{children:[r.length>0&&ee.jsx(Ku,{title:"Errors",count:r.length,defaultOpen:!0,children:r.map((ue,ae)=>ee.jsx(to,{issue:ue,variant:"error"},ae))}),d.length>0&&ee.jsx(Ku,{title:"Warnings",count:d.length,children:d.map((ue,ae)=>ee.jsx(to,{issue:ue,variant:"warning"},ae))})]}),g.length>0&&ee.jsx(Ku,{title:"Suggestions",count:g.length,children:ee.jsx("ul",{style:{paddingLeft:"16px",fontSize:"12px"},children:g.map((ue,ae)=>ee.jsxs("li",{style:{padding:"2px 0",color:"var(--n8n-info)"},children:["→ ",ue]},ae))})})]})}const ap=document.getElementById("root");ap&&Yy.createRoot(ap).render(ee.jsx(FT,{}));</script>
131
+ container holding the app. Specify either width or maxWidth, and either height or maxHeight.`),locale:R().optional().describe("User's language and region preference in BCP 47 format."),timeZone:R().optional().describe("User's timezone in IANA format."),userAgent:R().optional().describe("Host application identifier."),platform:me([E("web"),E("desktop"),E("mobile")]).optional().describe("Platform type for responsive design decisions."),deviceCapabilities:w({touch:Ze().optional().describe("Whether the device supports touch input."),hover:Ze().optional().describe("Whether the device supports hover interactions.")}).optional().describe("Device input capabilities."),safeAreaInsets:w({top:ie().describe("Top safe area inset in pixels."),right:ie().describe("Right safe area inset in pixels."),bottom:ie().describe("Bottom safe area inset in pixels."),left:ie().describe("Left safe area inset in pixels.")}).optional().describe("Mobile safe area boundaries in pixels.")}).passthrough(),LT=w({method:E("ui/notifications/host-context-changed"),params:ug.describe("Partial context update containing only changed fields.")});w({method:E("ui/update-model-context"),params:w({content:F(Ai).optional().describe("Context content blocks (text, image, etc.)."),structuredContent:Te(R(),Ue().describe("Structured content for machine-readable context data.")).optional().describe("Structured content for machine-readable context data.")})});w({method:E("ui/initialize"),params:w({appInfo:oo.describe("App identification (name and version)."),appCapabilities:kT.describe("Features and capabilities this app provides."),protocolVersion:R().describe("Protocol version this app supports.")})});var GT=w({protocolVersion:R().describe('Negotiated protocol version string (e.g., "2025-11-21").'),hostInfo:oo.describe("Host application identification and version."),hostCapabilities:HT.describe("Features and capabilities provided by the host."),hostContext:ug.describe("Rich context about the host environment.")}).passthrough();function ep(a){let i=document.documentElement;i.setAttribute("data-theme",a),i.style.colorScheme=a}function tp(a,i=document.documentElement){for(let[u,c]of Object.entries(a))c!==void 0&&i.style.setProperty(u,c)}function np(a){if(document.getElementById("__mcp-host-fonts"))return;let i=document.createElement("style");i.id="__mcp-host-fonts",i.textContent=a,document.head.appendChild(i)}class XT extends zT{constructor(u,c={},r={autoResize:!0}){super(r);je(this,"_appInfo");je(this,"_capabilities");je(this,"options");je(this,"_hostCapabilities");je(this,"_hostInfo");je(this,"_hostContext");je(this,"eventSchemas",{toolinput:xT,toolinputpartial:CT,toolresult:YT,toolcancelled:DT,hostcontextchanged:LT});je(this,"_onteardown");je(this,"_oncalltool");je(this,"_onlisttools");je(this,"sendOpenLink",this.openLink);this._appInfo=u,this._capabilities=c,this.options=r,this.setRequestHandler(co,d=>(console.log("Received ping:",d.params),{})),this.setEventHandler("hostcontextchanged",void 0)}onEventDispatch(u,c){u==="hostcontextchanged"&&(this._hostContext={...this._hostContext,...c})}getHostCapabilities(){return this._hostCapabilities}getHostVersion(){return this._hostInfo}getHostContext(){return this._hostContext}get ontoolinput(){return this.getEventHandler("toolinput")}set ontoolinput(u){this.setEventHandler("toolinput",u)}get ontoolinputpartial(){return this.getEventHandler("toolinputpartial")}set ontoolinputpartial(u){this.setEventHandler("toolinputpartial",u)}get ontoolresult(){return this.getEventHandler("toolresult")}set ontoolresult(u){this.setEventHandler("toolresult",u)}get ontoolcancelled(){return this.getEventHandler("toolcancelled")}set ontoolcancelled(u){this.setEventHandler("toolcancelled",u)}get onhostcontextchanged(){return this.getEventHandler("hostcontextchanged")}set onhostcontextchanged(u){this.setEventHandler("hostcontextchanged",u)}get onteardown(){return this._onteardown}set onteardown(u){this.warnIfRequestHandlerReplaced("onteardown",this._onteardown,u),this._onteardown=u,this.replaceRequestHandler(qT,(c,r)=>{if(!this._onteardown)throw Error("No onteardown handler set");return this._onteardown(c.params,r)})}get oncalltool(){return this._oncalltool}set oncalltool(u){this.warnIfRequestHandlerReplaced("oncalltool",this._oncalltool,u),this._oncalltool=u,this.replaceRequestHandler(ng,(c,r)=>{if(!this._oncalltool)throw Error("No oncalltool handler set");return this._oncalltool(c.params,r)})}get onlisttools(){return this._onlisttools}set onlisttools(u){this.warnIfRequestHandlerReplaced("onlisttools",this._onlisttools,u),this._onlisttools=u,this.replaceRequestHandler(tg,(c,r)=>{if(!this._onlisttools)throw Error("No onlisttools handler set");return this._onlisttools(c.params,r)})}assertCapabilityForMethod(u){}assertRequestHandlerCapability(u){switch(u){case"tools/call":case"tools/list":if(!this._capabilities.tools)throw Error(`Client does not support tool capability (required for ${u})`);return;case"ping":case"ui/resource-teardown":return;default:throw Error(`No handler for method ${u} registered`)}}assertNotificationCapability(u){}assertTaskCapability(u){throw Error("Tasks are not supported in MCP Apps")}assertTaskHandlerCapability(u){throw Error("Task handlers are not supported in MCP Apps")}async callServerTool(u,c){if(typeof u=="string")throw Error(`callServerTool() expects an object as its first argument, but received a string ("${u}"). Did you mean: callServerTool({ name: "${u}", arguments: { ... } })?`);return await this.request({method:"tools/call",params:u},so,{onprogress:()=>{},resetTimeoutOnProgress:!0,...c})}async readServerResource(u,c){return await this.request({method:"resources/read",params:u},Fp,c)}async listServerResources(u,c){return await this.request({method:"resources/list",params:u},Wp,c)}sendMessage(u,c){return this.request({method:"ui/message",params:u},NT,c)}sendLog(u){return this.notification({method:"notifications/message",params:u})}updateModelContext(u,c){return this.request({method:"ui/update-model-context",params:u},er,c)}openLink(u,c){return this.request({method:"ui/open-link",params:u},MT,c)}downloadFile(u,c){return this.request({method:"ui/download-file",params:u},wT,c)}requestTeardown(u={}){return this.notification({method:"ui/notifications/request-teardown",params:u})}requestDisplayMode(u,c){return this.request({method:"ui/request-display-mode",params:u},jT,c)}sendSizeChanged(u){return this.notification({method:"ui/notifications/size-changed",params:u})}setupSizeChangedNotifications(){let u=!1,c=0,r=0,d=()=>{u||(u=!0,requestAnimationFrame(()=>{u=!1;let v=document.documentElement,p=v.style.height;v.style.height="max-content";let g=Math.ceil(v.getBoundingClientRect().height);v.style.height=p;let S=Math.ceil(window.innerWidth);(S!==c||g!==r)&&(c=S,r=g,this.sendSizeChanged({width:S,height:g}))}))};d();let h=new ResizeObserver(d);return h.observe(document.documentElement),h.observe(document.body),()=>h.disconnect()}async connect(u=new ig(window.parent,window.parent),c){var r;if(this.transport)throw Error("App is already connected. Call close() before connecting again.");await super.connect(u);try{let d=await this.request({method:"ui/initialize",params:{appCapabilities:this._capabilities,appInfo:this._appInfo,protocolVersion:TT}},GT,c);if(d===void 0)throw Error(`Server sent invalid initialize result: ${d}`);this._hostCapabilities=d.hostCapabilities,this._hostInfo=d.hostInfo,this._hostContext=d.hostContext,await this.notification({method:"ui/notifications/initialized"}),(r=this.options)!=null&&r.autoResize&&this.setupSizeChangedNotifications()}catch(d){throw this.close(),d}}}function VT({appInfo:a,capabilities:i,onAppCreated:u}){let[c,r]=kt.useState(null),[d,h]=kt.useState(!1),[v,p]=kt.useState(null);return kt.useEffect(()=>{let g=!0;async function S(){try{let T=new ig(window.parent,window.parent),H=new XT(a,i);u==null||u(H),await H.connect(T),g&&(r(H),h(!0),p(null))}catch(T){g&&(r(null),h(!1),p(T instanceof Error?T:Error("Failed to connect")))}}return S(),()=>{g=!1}},[]),{app:c,isConnected:d,error:v}}function QT(a,i){let u=kt.useRef(!1);kt.useEffect(()=>{var c,r;u.current||(i!=null&&i.theme&&ep(i.theme),(c=i==null?void 0:i.styles)!=null&&c.variables&&tp(i.styles.variables),(i!=null&&i.theme||(r=i==null?void 0:i.styles)!=null&&r.variables)&&(u.current=!0))},[i]),kt.useEffect(()=>{if(!a)return;let c=r=>{var d;r.theme&&ep(r.theme),(d=r.styles)!=null&&d.variables&&tp(r.styles.variables)};return a.addEventListener("hostcontextchanged",c),()=>a.removeEventListener("hostcontextchanged",c)},[a])}function $T(a,i){let u=kt.useRef(!1);kt.useEffect(()=>{var c,r;u.current||(r=(c=i==null?void 0:i.styles)==null?void 0:c.css)!=null&&r.fonts&&(np(i.styles.css.fonts),u.current=!0)},[i]),kt.useEffect(()=>{if(!a)return;let c=r=>{var d,h;(h=(d=r.styles)==null?void 0:d.css)!=null&&h.fonts&&np(r.styles.css.fonts)};return a.addEventListener("hostcontextchanged",c),()=>a.removeEventListener("hostcontextchanged",c)},[a])}function JT(a,i){QT(a,i),$T(a,i)}function KT(){var v,p;const[a,i]=kt.useState(null),u=kt.useCallback(g=>{g.ontoolresult=S=>{if(S!=null&&S.content){const T=Array.isArray(S.content)?S.content.find(H=>H.type==="text"):null;if(T&&"text"in T)try{i(JSON.parse(T.text))}catch{i(T.text)}}}},[]),{app:c,isConnected:r,error:d}=VT({appInfo:{name:"n8n-mcp-ui",version:"1.0.0"},capabilities:{},onAppCreated:u});JT(c,c==null?void 0:c.getHostContext());const h=((p=(v=c==null?void 0:c.getHostContext())==null?void 0:v.toolInfo)==null?void 0:p.tool.name)??null;return{data:a,error:(d==null?void 0:d.message)??null,isConnected:r,app:c,toolName:h}}function IT({errorCount:a,warningCount:i}){const u=a+i;if(u===0)return ee.jsxs("div",{style:{marginBottom:"12px"},children:[ee.jsx("div",{style:{height:"6px",borderRadius:"3px",background:"var(--n8n-success)",marginBottom:"6px"}}),ee.jsx("div",{style:{fontSize:"12px",color:"var(--n8n-success)",fontWeight:500},children:"All checks passed"})]});const c=a/u*100,r=i/u*100;return ee.jsxs("div",{style:{marginBottom:"12px"},children:[ee.jsxs("div",{style:{height:"6px",borderRadius:"3px",background:"var(--n8n-border)",overflow:"hidden",display:"flex"},children:[a>0&&ee.jsx("div",{style:{width:`${c}%`,background:"var(--n8n-error)",minWidth:"4px"}}),i>0&&ee.jsx("div",{style:{width:`${r}%`,background:"var(--n8n-warning)",minWidth:"4px"}})]}),ee.jsxs("div",{style:{fontSize:"12px",color:"var(--color-text-secondary, var(--n8n-text-muted))",marginTop:"6px"},children:[ee.jsx("span",{style:{color:"var(--n8n-error)",fontWeight:500},children:a})," error",a!==1?"s":""," · ",ee.jsx("span",{style:{color:"var(--n8n-warning)",fontWeight:500},children:i})," warning",i!==1?"s":""]})]})}function to({issue:a,variant:i}){const u=i==="error"?"var(--n8n-error)":"var(--n8n-warning)",c="fix"in a?a.fix:void 0;return ee.jsxs("div",{style:{padding:"6px 10px",marginBottom:"4px",borderLeft:`3px solid ${u}`,fontSize:"12px"},children:[ee.jsx("div",{style:{color:"var(--color-text-primary, var(--n8n-text))"},children:a.message}),a.property&&ee.jsx("div",{style:{color:"var(--color-text-secondary, var(--n8n-text-muted))",fontSize:"11px",marginTop:"2px"},children:a.property}),c&&ee.jsxs("div",{style:{color:u,fontSize:"11px",marginTop:"2px"},children:["→ ",c]})]})}function WT({group:a}){const i=a.errors.length,u=a.warnings.length;return ee.jsxs(Ku,{title:a.node,count:i+u,defaultOpen:i>0,children:[ee.jsxs("div",{style:{display:"flex",gap:"8px",marginBottom:"6px",flexWrap:"wrap"},children:[i>0&&ee.jsxs(Hs,{variant:"error",children:[i," error",i!==1?"s":""]}),u>0&&ee.jsxs(Hs,{variant:"warning",children:[u," warning",u!==1?"s":""]})]}),a.errors.map((c,r)=>ee.jsx(to,{issue:c,variant:"error"},`e-${r}`)),a.warnings.map((c,r)=>ee.jsx(to,{issue:c,variant:"warning"},`w-${r}`))]})}function FT(){var H,k,Y,L,re;const{data:a,error:i,isConnected:u}=KT(),c=(a==null?void 0:a.data)||a,r=(c==null?void 0:c.errors)||(a==null?void 0:a.errors)||[],d=(c==null?void 0:c.warnings)||(a==null?void 0:a.warnings)||[],h=kt.useMemo(()=>{if(r.length===0&&d.length===0)return null;const ue=r.some(K=>K.node)||d.some(K=>K.node),ae=new Set([...r.filter(K=>K.node).map(K=>K.node),...d.filter(K=>K.node).map(K=>K.node)]);if(!ue||ae.size<=1)return null;const ge=[];for(const K of ae)ge.push({node:K,errors:r.filter(G=>G.node===K),warnings:d.filter(G=>G.node===K)});const Ee=r.filter(K=>!K.node),_e=d.filter(K=>!K.node);return(Ee.length>0||_e.length>0)&&ge.push({node:"General",errors:Ee,warnings:_e}),ge.sort((K,G)=>G.errors.length+G.warnings.length-(K.errors.length+K.warnings.length)),ge},[r,d]);if(i)return ee.jsxs("div",{style:{padding:"16px",color:"#ef4444"},children:["Error: ",i]});if(!u)return ee.jsx("div",{style:{padding:"16px",color:"var(--n8n-text-muted)"},children:"Connecting..."});if(!a)return ee.jsx("div",{style:{padding:"16px",color:"var(--n8n-text-muted)"},children:"Waiting for data..."});const v=c.valid??a.valid??!1,p=a.displayName||((H=a.data)==null?void 0:H.workflowName),g=(c==null?void 0:c.suggestions)||(a==null?void 0:a.suggestions)||[],S=((k=a.summary)==null?void 0:k.errorCount)??((Y=c==null?void 0:c.summary)==null?void 0:Y.errorCount)??r.length,T=((L=a.summary)==null?void 0:L.warningCount)??((re=c==null?void 0:c.summary)==null?void 0:re.warningCount)??d.length;return ee.jsxs("div",{style:{maxWidth:"480px"},children:[ee.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"12px",marginBottom:"12px"},children:[ee.jsx(Hs,{variant:v?"success":"error",children:v?"Valid":"Invalid"}),p&&ee.jsx("span",{style:{fontSize:"14px",color:"var(--color-text-secondary, var(--n8n-text-muted))"},children:p})]}),ee.jsx(IT,{errorCount:S,warningCount:T}),h?h.map(ue=>ee.jsx(WT,{group:ue},ue.node)):ee.jsxs(ee.Fragment,{children:[r.length>0&&ee.jsx(Ku,{title:"Errors",count:r.length,defaultOpen:!0,children:r.map((ue,ae)=>ee.jsx(to,{issue:ue,variant:"error"},ae))}),d.length>0&&ee.jsx(Ku,{title:"Warnings",count:d.length,children:d.map((ue,ae)=>ee.jsx(to,{issue:ue,variant:"warning"},ae))})]}),g.length>0&&ee.jsx(Ku,{title:"Suggestions",count:g.length,children:ee.jsx("ul",{style:{paddingLeft:"16px",fontSize:"12px"},children:g.map((ue,ae)=>ee.jsxs("li",{style:{padding:"2px 0",color:"var(--n8n-info)"},children:["→ ",ue]},ae))})})]})}const ap=document.getElementById("root");ap&&Yy.createRoot(ap).render(ee.jsx(FT,{}));</script>
132
132
  <style rel="stylesheet" crossorigin>:root{--n8n-primary: #ff6d5a;--n8n-primary-light: #ff8a7a;--n8n-success: #17bf79;--n8n-warning: #f59e0b;--n8n-error: #ef4444;--n8n-info: #3b82f6;--n8n-bg: #1a1a2e;--n8n-bg-card: #252540;--n8n-text: #e0e0e0;--n8n-text-muted: #9ca3af;--n8n-border: #374151;--n8n-error-light: #fee2e2;--n8n-warning-light: #fef3cd;--n8n-success-light: #e8f9f0;--n8n-info-light: #dbeafe;--n8n-radius: 8px;font-family:var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif)}[data-theme=light]{--n8n-bg: #ffffff;--n8n-bg-card: #f9fafb;--n8n-text: #1f2937;--n8n-text-muted: #6b7280;--n8n-border: #e5e7eb;--n8n-error-light: #fef2f2;--n8n-warning-light: #fffbeb;--n8n-success-light: #f0fdf4;--n8n-info-light: #eff6ff}*{margin:0;padding:0;box-sizing:border-box}body{background:var(--color-background-primary, var(--n8n-bg));color:var(--color-text-primary, var(--n8n-text));line-height:1.5;padding:16px}</style>
133
133
  </head>
134
134
  <body>
@@ -128,7 +128,7 @@ Boolean requesting whether a visible border and background is provided by the ho
128
128
  - omitted: host decides border`)});N({method:E("ui/request-display-mode"),params:N({mode:yi.describe("The display mode being requested.")})});var HT=N({mode:yi.describe("The display mode that was actually set. May differ from requested if not supported.")}).passthrough(),kT=se([E("model"),E("app")]).describe("Tool visibility scope - who can access the tool.");N({resourceUri:R().optional(),visibility:W(kT).optional().describe(`Who can access this tool. Default: ["model", "app"]
129
129
  - "model": Tool visible to and callable by the agent
130
130
  - "app": Tool callable by the app from this server only`)});N({mimeTypes:W(R()).optional().describe('Array of supported MIME types for UI resources.\nMust include `"text/html;profile=mcp-app"` for MCP Apps support.')});N({method:E("ui/download-file"),params:N({contents:W(se([Ip,Wp])).describe("Resource contents to download — embedded (inline data) or linked (host fetches). Uses standard MCP resource types.")})});N({method:E("ui/message"),params:N({role:E("user").describe('Message role, currently only "user" is supported.'),content:W(Ai).describe("Message content blocks (text, image, etc.).")})});N({method:E("ui/notifications/sandbox-resource-ready"),params:N({html:R().describe("HTML content to load into the inner iframe."),sandbox:R().optional().describe("Optional override for the inner iframe's sandbox attribute."),csp:mr.optional().describe("CSP configuration from resource metadata."),permissions:pr.optional().describe("Sandbox permissions from resource metadata.")})});var jT=N({method:E("ui/notifications/tool-result"),params:oo.describe("Standard MCP tool execution result.")}),ag=N({toolInfo:N({id:bi.optional().describe("JSON-RPC id of the tools/call request."),tool:dr.describe("Tool definition including name, inputSchema, etc.")}).optional().describe("Metadata of the tool call that instantiated this App."),theme:TT.optional().describe("Current color theme preference."),styles:xT.optional().describe("Style configuration for theming the app."),displayMode:yi.optional().describe("How the UI is currently displayed."),availableDisplayModes:W(yi).optional().describe("Display modes the host supports."),containerDimensions:se([N({height:ne().describe("Fixed container height in pixels.")}),N({maxHeight:se([ne(),Hs()]).optional().describe("Maximum container height in pixels.")})]).and(se([N({width:ne().describe("Fixed container width in pixels.")}),N({maxWidth:se([ne(),Hs()]).optional().describe("Maximum container width in pixels.")})])).optional().describe(`Container dimensions. Represents the dimensions of the iframe or other
131
- container holding the app. Specify either width or maxWidth, and either height or maxHeight.`),locale:R().optional().describe("User's language and region preference in BCP 47 format."),timeZone:R().optional().describe("User's timezone in IANA format."),userAgent:R().optional().describe("Host application identifier."),platform:se([E("web"),E("desktop"),E("mobile")]).optional().describe("Platform type for responsive design decisions."),deviceCapabilities:N({touch:Ze().optional().describe("Whether the device supports touch input."),hover:Ze().optional().describe("Whether the device supports hover interactions.")}).optional().describe("Device input capabilities."),safeAreaInsets:N({top:ne().describe("Top safe area inset in pixels."),right:ne().describe("Right safe area inset in pixels."),bottom:ne().describe("Bottom safe area inset in pixels."),left:ne().describe("Left safe area inset in pixels.")}).optional().describe("Mobile safe area boundaries in pixels.")}).passthrough(),BT=N({method:E("ui/notifications/host-context-changed"),params:ag.describe("Partial context update containing only changed fields.")});N({method:E("ui/update-model-context"),params:N({content:W(Ai).optional().describe("Context content blocks (text, image, etc.)."),structuredContent:ye(R(),xe().describe("Structured content for machine-readable context data.")).optional().describe("Structured content for machine-readable context data.")})});N({method:E("ui/initialize"),params:N({appInfo:io.describe("App identification (name and version)."),appCapabilities:qT.describe("Features and capabilities this app provides."),protocolVersion:R().describe("Protocol version this app supports.")})});var YT=N({protocolVersion:R().describe('Negotiated protocol version string (e.g., "2025-11-21").'),hostInfo:io.describe("Host application identification and version."),hostCapabilities:ZT.describe("Features and capabilities provided by the host."),hostContext:ag.describe("Rich context about the host environment.")}).passthrough();function Wm(a){let i=document.documentElement;i.setAttribute("data-theme",a),i.style.colorScheme=a}function Fm(a,i=document.documentElement){for(let[u,c]of Object.entries(a))c!==void 0&&i.style.setProperty(u,c)}function Pm(a){if(document.getElementById("__mcp-host-fonts"))return;let i=document.createElement("style");i.id="__mcp-host-fonts",i.textContent=a,document.head.appendChild(i)}class LT extends bT{constructor(u,c={},r={autoResize:!0}){super(r);je(this,"_appInfo");je(this,"_capabilities");je(this,"options");je(this,"_hostCapabilities");je(this,"_hostInfo");je(this,"_hostContext");je(this,"eventSchemas",{toolinput:NT,toolinputpartial:wT,toolresult:jT,toolcancelled:CT,hostcontextchanged:BT});je(this,"_onteardown");je(this,"_oncalltool");je(this,"_onlisttools");je(this,"sendOpenLink",this.openLink);this._appInfo=u,this._capabilities=c,this.options=r,this.setRequestHandler(uo,d=>(console.log("Received ping:",d.params),{})),this.setEventHandler("hostcontextchanged",void 0)}onEventDispatch(u,c){u==="hostcontextchanged"&&(this._hostContext={...this._hostContext,...c})}getHostCapabilities(){return this._hostCapabilities}getHostVersion(){return this._hostInfo}getHostContext(){return this._hostContext}get ontoolinput(){return this.getEventHandler("toolinput")}set ontoolinput(u){this.setEventHandler("toolinput",u)}get ontoolinputpartial(){return this.getEventHandler("toolinputpartial")}set ontoolinputpartial(u){this.setEventHandler("toolinputpartial",u)}get ontoolresult(){return this.getEventHandler("toolresult")}set ontoolresult(u){this.setEventHandler("toolresult",u)}get ontoolcancelled(){return this.getEventHandler("toolcancelled")}set ontoolcancelled(u){this.setEventHandler("toolcancelled",u)}get onhostcontextchanged(){return this.getEventHandler("hostcontextchanged")}set onhostcontextchanged(u){this.setEventHandler("hostcontextchanged",u)}get onteardown(){return this._onteardown}set onteardown(u){this.warnIfRequestHandlerReplaced("onteardown",this._onteardown,u),this._onteardown=u,this.replaceRequestHandler(UT,(c,r)=>{if(!this._onteardown)throw Error("No onteardown handler set");return this._onteardown(c.params,r)})}get oncalltool(){return this._oncalltool}set oncalltool(u){this.warnIfRequestHandlerReplaced("oncalltool",this._oncalltool,u),this._oncalltool=u,this.replaceRequestHandler(Pp,(c,r)=>{if(!this._oncalltool)throw Error("No oncalltool handler set");return this._oncalltool(c.params,r)})}get onlisttools(){return this._onlisttools}set onlisttools(u){this.warnIfRequestHandlerReplaced("onlisttools",this._onlisttools,u),this._onlisttools=u,this.replaceRequestHandler(Fp,(c,r)=>{if(!this._onlisttools)throw Error("No onlisttools handler set");return this._onlisttools(c.params,r)})}assertCapabilityForMethod(u){}assertRequestHandlerCapability(u){switch(u){case"tools/call":case"tools/list":if(!this._capabilities.tools)throw Error(`Client does not support tool capability (required for ${u})`);return;case"ping":case"ui/resource-teardown":return;default:throw Error(`No handler for method ${u} registered`)}}assertNotificationCapability(u){}assertTaskCapability(u){throw Error("Tasks are not supported in MCP Apps")}assertTaskHandlerCapability(u){throw Error("Task handlers are not supported in MCP Apps")}async callServerTool(u,c){if(typeof u=="string")throw Error(`callServerTool() expects an object as its first argument, but received a string ("${u}"). Did you mean: callServerTool({ name: "${u}", arguments: { ... } })?`);return await this.request({method:"tools/call",params:u},oo,c)}async readServerResource(u,c){return await this.request({method:"resources/read",params:u},Kp,c)}async listServerResources(u,c){return await this.request({method:"resources/list",params:u},Jp,c)}sendMessage(u,c){return this.request({method:"ui/message",params:u},MT,c)}sendLog(u){return this.notification({method:"notifications/message",params:u})}updateModelContext(u,c){return this.request({method:"ui/update-model-context",params:u},Ws,c)}openLink(u,c){return this.request({method:"ui/open-link",params:u},AT,c)}downloadFile(u,c){return this.request({method:"ui/download-file",params:u},RT,c)}requestTeardown(u={}){return this.notification({method:"ui/notifications/request-teardown",params:u})}requestDisplayMode(u,c){return this.request({method:"ui/request-display-mode",params:u},HT,c)}sendSizeChanged(u){return this.notification({method:"ui/notifications/size-changed",params:u})}setupSizeChangedNotifications(){let u=!1,c=0,r=0,d=()=>{u||(u=!0,requestAnimationFrame(()=>{u=!1;let v=document.documentElement,g=v.style.height;v.style.height="max-content";let p=Math.ceil(v.getBoundingClientRect().height);v.style.height=g;let S=Math.ceil(window.innerWidth);(S!==c||p!==r)&&(c=S,r=p,this.sendSizeChanged({width:S,height:p}))}))};d();let h=new ResizeObserver(d);return h.observe(document.documentElement),h.observe(document.body),()=>h.disconnect()}async connect(u=new ng(window.parent,window.parent),c){var r;if(this.transport)throw Error("App is already connected. Call close() before connecting again.");await super.connect(u);try{let d=await this.request({method:"ui/initialize",params:{appCapabilities:this._capabilities,appInfo:this._appInfo,protocolVersion:ST}},YT,c);if(d===void 0)throw Error(`Server sent invalid initialize result: ${d}`);this._hostCapabilities=d.hostCapabilities,this._hostInfo=d.hostInfo,this._hostContext=d.hostContext,await this.notification({method:"ui/notifications/initialized"}),(r=this.options)!=null&&r.autoResize&&this.setupSizeChangedNotifications()}catch(d){throw this.close(),d}}}function GT({appInfo:a,capabilities:i,onAppCreated:u}){let[c,r]=It.useState(null),[d,h]=It.useState(!1),[v,g]=It.useState(null);return It.useEffect(()=>{let p=!0;async function S(){try{let T=new ng(window.parent,window.parent),H=new LT(a,i);u==null||u(H),await H.connect(T),p&&(r(H),h(!0),g(null))}catch(T){p&&(r(null),h(!1),g(T instanceof Error?T:Error("Failed to connect")))}}return S(),()=>{p=!1}},[]),{app:c,isConnected:d,error:v}}function XT(a,i){let u=It.useRef(!1);It.useEffect(()=>{var c,r;u.current||(i!=null&&i.theme&&Wm(i.theme),(c=i==null?void 0:i.styles)!=null&&c.variables&&Fm(i.styles.variables),(i!=null&&i.theme||(r=i==null?void 0:i.styles)!=null&&r.variables)&&(u.current=!0))},[i]),It.useEffect(()=>{if(!a)return;let c=r=>{var d;r.theme&&Wm(r.theme),(d=r.styles)!=null&&d.variables&&Fm(r.styles.variables)};return a.addEventListener("hostcontextchanged",c),()=>a.removeEventListener("hostcontextchanged",c)},[a])}function VT(a,i){let u=It.useRef(!1);It.useEffect(()=>{var c,r;u.current||(r=(c=i==null?void 0:i.styles)==null?void 0:c.css)!=null&&r.fonts&&(Pm(i.styles.css.fonts),u.current=!0)},[i]),It.useEffect(()=>{if(!a)return;let c=r=>{var d,h;(h=(d=r.styles)==null?void 0:d.css)!=null&&h.fonts&&Pm(r.styles.css.fonts)};return a.addEventListener("hostcontextchanged",c),()=>a.removeEventListener("hostcontextchanged",c)},[a])}function QT(a,i){XT(a,i),VT(a,i)}function $T(){var v,g;const[a,i]=It.useState(null),u=It.useCallback(p=>{p.ontoolresult=S=>{if(S!=null&&S.content){const T=Array.isArray(S.content)?S.content.find(H=>H.type==="text"):null;if(T&&"text"in T)try{i(JSON.parse(T.text))}catch{i(T.text)}}}},[]),{app:c,isConnected:r,error:d}=GT({appInfo:{name:"n8n-mcp-ui",version:"1.0.0"},capabilities:{},onAppCreated:u});QT(c,c==null?void 0:c.getHostContext());const h=((g=(v=c==null?void 0:c.getHostContext())==null?void 0:v.toolInfo)==null?void 0:g.tool.name)??null;return{data:a,error:(d==null?void 0:d.message)??null,isConnected:r,app:c,toolName:h}}function JT(a){if(!a)return"";try{return new Date(a).toLocaleDateString(void 0,{month:"short",day:"numeric",year:"numeric"})}catch{return a}}function KT(){var h,v,g;const{data:a,error:i,isConnected:u}=$T();if(i)return Me.jsxs("div",{style:{padding:"16px",color:"#ef4444"},children:["Error: ",i]});if(!u)return Me.jsx("div",{style:{padding:"16px",color:"var(--n8n-text-muted)"},children:"Connecting..."});if(!a)return Me.jsx("div",{style:{padding:"16px",color:"var(--n8n-text-muted)"},children:"Waiting for data..."});if(!a.success&&a.error)return Me.jsxs("div",{style:{maxWidth:"480px"},children:[Me.jsx(By,{variant:"error",children:"Error"}),Me.jsx("div",{style:{marginTop:"8px",fontSize:"13px",color:"var(--n8n-error)"},children:a.error})]});const c=((h=a.data)==null?void 0:h.workflows)??[],r=((v=a.data)==null?void 0:v.returned)??c.length,d=(g=a.data)==null?void 0:g.hasMore;return Me.jsxs("div",{style:{maxWidth:"480px"},children:[Me.jsxs("div",{style:{fontSize:"12px",color:"var(--color-text-secondary, var(--n8n-text-muted))",marginBottom:"10px"},children:["Showing ",r," workflow",r!==1?"s":"",d&&" (more available)"]}),Me.jsxs("div",{style:{border:"1px solid var(--n8n-border)",borderRadius:"var(--n8n-radius)",overflow:"hidden"},children:[Me.jsxs("div",{style:{display:"grid",gridTemplateColumns:"1fr 60px 50px auto",gap:"8px",padding:"8px 12px",fontSize:"11px",fontWeight:600,textTransform:"uppercase",letterSpacing:"0.03em",color:"var(--color-text-secondary, var(--n8n-text-muted))",background:"var(--n8n-bg-card)",borderBottom:"1px solid var(--n8n-border)"},children:[Me.jsx("span",{children:"Name"}),Me.jsx("span",{children:"Status"}),Me.jsx("span",{children:"Nodes"}),Me.jsx("span",{children:"Updated"})]}),c.length===0&&Me.jsx("div",{style:{padding:"16px",textAlign:"center",color:"var(--n8n-text-muted)",fontSize:"13px"},children:"No workflows found"}),c.map(p=>Me.jsxs("div",{style:{display:"grid",gridTemplateColumns:"1fr 60px 50px auto",gap:"8px",padding:"8px 12px",fontSize:"12px",borderBottom:"1px solid var(--n8n-border)",opacity:p.isArchived?.5:1},children:[Me.jsxs("div",{style:{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:[Me.jsx("span",{style:{fontWeight:500},children:p.name}),p.tags&&p.tags.length>0&&Me.jsxs("div",{style:{display:"flex",gap:"4px",marginTop:"2px",flexWrap:"wrap"},children:[p.tags.slice(0,3).map((S,T)=>Me.jsx("span",{style:{fontSize:"10px",padding:"1px 6px",borderRadius:"8px",background:"var(--n8n-info-light)",color:"var(--n8n-info)"},children:S},T)),p.tags.length>3&&Me.jsxs("span",{style:{fontSize:"10px",color:"var(--n8n-text-muted)"},children:["+",p.tags.length-3]})]})]}),Me.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"4px"},children:[Me.jsx("span",{style:{display:"inline-block",width:"8px",height:"8px",borderRadius:"50%",background:p.active?"var(--n8n-success)":"var(--n8n-border)",flexShrink:0}}),Me.jsx("span",{style:{fontSize:"11px",color:"var(--color-text-secondary, var(--n8n-text-muted))"},children:p.isArchived?"Archived":p.active?"Active":"Off"})]}),Me.jsx("span",{style:{color:"var(--color-text-secondary, var(--n8n-text-muted))"},children:p.nodeCount??"–"}),Me.jsx("span",{style:{fontSize:"11px",color:"var(--color-text-secondary, var(--n8n-text-muted))",whiteSpace:"nowrap"},children:JT(p.updatedAt)})]},p.id))]})]})}const ep=document.getElementById("root");ep&&ky.createRoot(ep).render(Me.jsx(KT,{}));</script>
131
+ container holding the app. Specify either width or maxWidth, and either height or maxHeight.`),locale:R().optional().describe("User's language and region preference in BCP 47 format."),timeZone:R().optional().describe("User's timezone in IANA format."),userAgent:R().optional().describe("Host application identifier."),platform:se([E("web"),E("desktop"),E("mobile")]).optional().describe("Platform type for responsive design decisions."),deviceCapabilities:N({touch:Ze().optional().describe("Whether the device supports touch input."),hover:Ze().optional().describe("Whether the device supports hover interactions.")}).optional().describe("Device input capabilities."),safeAreaInsets:N({top:ne().describe("Top safe area inset in pixels."),right:ne().describe("Right safe area inset in pixels."),bottom:ne().describe("Bottom safe area inset in pixels."),left:ne().describe("Left safe area inset in pixels.")}).optional().describe("Mobile safe area boundaries in pixels.")}).passthrough(),BT=N({method:E("ui/notifications/host-context-changed"),params:ag.describe("Partial context update containing only changed fields.")});N({method:E("ui/update-model-context"),params:N({content:W(Ai).optional().describe("Context content blocks (text, image, etc.)."),structuredContent:ye(R(),xe().describe("Structured content for machine-readable context data.")).optional().describe("Structured content for machine-readable context data.")})});N({method:E("ui/initialize"),params:N({appInfo:io.describe("App identification (name and version)."),appCapabilities:qT.describe("Features and capabilities this app provides."),protocolVersion:R().describe("Protocol version this app supports.")})});var YT=N({protocolVersion:R().describe('Negotiated protocol version string (e.g., "2025-11-21").'),hostInfo:io.describe("Host application identification and version."),hostCapabilities:ZT.describe("Features and capabilities provided by the host."),hostContext:ag.describe("Rich context about the host environment.")}).passthrough();function Wm(a){let i=document.documentElement;i.setAttribute("data-theme",a),i.style.colorScheme=a}function Fm(a,i=document.documentElement){for(let[u,c]of Object.entries(a))c!==void 0&&i.style.setProperty(u,c)}function Pm(a){if(document.getElementById("__mcp-host-fonts"))return;let i=document.createElement("style");i.id="__mcp-host-fonts",i.textContent=a,document.head.appendChild(i)}class LT extends bT{constructor(u,c={},r={autoResize:!0}){super(r);je(this,"_appInfo");je(this,"_capabilities");je(this,"options");je(this,"_hostCapabilities");je(this,"_hostInfo");je(this,"_hostContext");je(this,"eventSchemas",{toolinput:NT,toolinputpartial:wT,toolresult:jT,toolcancelled:CT,hostcontextchanged:BT});je(this,"_onteardown");je(this,"_oncalltool");je(this,"_onlisttools");je(this,"sendOpenLink",this.openLink);this._appInfo=u,this._capabilities=c,this.options=r,this.setRequestHandler(uo,d=>(console.log("Received ping:",d.params),{})),this.setEventHandler("hostcontextchanged",void 0)}onEventDispatch(u,c){u==="hostcontextchanged"&&(this._hostContext={...this._hostContext,...c})}getHostCapabilities(){return this._hostCapabilities}getHostVersion(){return this._hostInfo}getHostContext(){return this._hostContext}get ontoolinput(){return this.getEventHandler("toolinput")}set ontoolinput(u){this.setEventHandler("toolinput",u)}get ontoolinputpartial(){return this.getEventHandler("toolinputpartial")}set ontoolinputpartial(u){this.setEventHandler("toolinputpartial",u)}get ontoolresult(){return this.getEventHandler("toolresult")}set ontoolresult(u){this.setEventHandler("toolresult",u)}get ontoolcancelled(){return this.getEventHandler("toolcancelled")}set ontoolcancelled(u){this.setEventHandler("toolcancelled",u)}get onhostcontextchanged(){return this.getEventHandler("hostcontextchanged")}set onhostcontextchanged(u){this.setEventHandler("hostcontextchanged",u)}get onteardown(){return this._onteardown}set onteardown(u){this.warnIfRequestHandlerReplaced("onteardown",this._onteardown,u),this._onteardown=u,this.replaceRequestHandler(UT,(c,r)=>{if(!this._onteardown)throw Error("No onteardown handler set");return this._onteardown(c.params,r)})}get oncalltool(){return this._oncalltool}set oncalltool(u){this.warnIfRequestHandlerReplaced("oncalltool",this._oncalltool,u),this._oncalltool=u,this.replaceRequestHandler(Pp,(c,r)=>{if(!this._oncalltool)throw Error("No oncalltool handler set");return this._oncalltool(c.params,r)})}get onlisttools(){return this._onlisttools}set onlisttools(u){this.warnIfRequestHandlerReplaced("onlisttools",this._onlisttools,u),this._onlisttools=u,this.replaceRequestHandler(Fp,(c,r)=>{if(!this._onlisttools)throw Error("No onlisttools handler set");return this._onlisttools(c.params,r)})}assertCapabilityForMethod(u){}assertRequestHandlerCapability(u){switch(u){case"tools/call":case"tools/list":if(!this._capabilities.tools)throw Error(`Client does not support tool capability (required for ${u})`);return;case"ping":case"ui/resource-teardown":return;default:throw Error(`No handler for method ${u} registered`)}}assertNotificationCapability(u){}assertTaskCapability(u){throw Error("Tasks are not supported in MCP Apps")}assertTaskHandlerCapability(u){throw Error("Task handlers are not supported in MCP Apps")}async callServerTool(u,c){if(typeof u=="string")throw Error(`callServerTool() expects an object as its first argument, but received a string ("${u}"). Did you mean: callServerTool({ name: "${u}", arguments: { ... } })?`);return await this.request({method:"tools/call",params:u},oo,{onprogress:()=>{},resetTimeoutOnProgress:!0,...c})}async readServerResource(u,c){return await this.request({method:"resources/read",params:u},Kp,c)}async listServerResources(u,c){return await this.request({method:"resources/list",params:u},Jp,c)}sendMessage(u,c){return this.request({method:"ui/message",params:u},MT,c)}sendLog(u){return this.notification({method:"notifications/message",params:u})}updateModelContext(u,c){return this.request({method:"ui/update-model-context",params:u},Ws,c)}openLink(u,c){return this.request({method:"ui/open-link",params:u},AT,c)}downloadFile(u,c){return this.request({method:"ui/download-file",params:u},RT,c)}requestTeardown(u={}){return this.notification({method:"ui/notifications/request-teardown",params:u})}requestDisplayMode(u,c){return this.request({method:"ui/request-display-mode",params:u},HT,c)}sendSizeChanged(u){return this.notification({method:"ui/notifications/size-changed",params:u})}setupSizeChangedNotifications(){let u=!1,c=0,r=0,d=()=>{u||(u=!0,requestAnimationFrame(()=>{u=!1;let v=document.documentElement,g=v.style.height;v.style.height="max-content";let p=Math.ceil(v.getBoundingClientRect().height);v.style.height=g;let S=Math.ceil(window.innerWidth);(S!==c||p!==r)&&(c=S,r=p,this.sendSizeChanged({width:S,height:p}))}))};d();let h=new ResizeObserver(d);return h.observe(document.documentElement),h.observe(document.body),()=>h.disconnect()}async connect(u=new ng(window.parent,window.parent),c){var r;if(this.transport)throw Error("App is already connected. Call close() before connecting again.");await super.connect(u);try{let d=await this.request({method:"ui/initialize",params:{appCapabilities:this._capabilities,appInfo:this._appInfo,protocolVersion:ST}},YT,c);if(d===void 0)throw Error(`Server sent invalid initialize result: ${d}`);this._hostCapabilities=d.hostCapabilities,this._hostInfo=d.hostInfo,this._hostContext=d.hostContext,await this.notification({method:"ui/notifications/initialized"}),(r=this.options)!=null&&r.autoResize&&this.setupSizeChangedNotifications()}catch(d){throw this.close(),d}}}function GT({appInfo:a,capabilities:i,onAppCreated:u}){let[c,r]=It.useState(null),[d,h]=It.useState(!1),[v,g]=It.useState(null);return It.useEffect(()=>{let p=!0;async function S(){try{let T=new ng(window.parent,window.parent),H=new LT(a,i);u==null||u(H),await H.connect(T),p&&(r(H),h(!0),g(null))}catch(T){p&&(r(null),h(!1),g(T instanceof Error?T:Error("Failed to connect")))}}return S(),()=>{p=!1}},[]),{app:c,isConnected:d,error:v}}function XT(a,i){let u=It.useRef(!1);It.useEffect(()=>{var c,r;u.current||(i!=null&&i.theme&&Wm(i.theme),(c=i==null?void 0:i.styles)!=null&&c.variables&&Fm(i.styles.variables),(i!=null&&i.theme||(r=i==null?void 0:i.styles)!=null&&r.variables)&&(u.current=!0))},[i]),It.useEffect(()=>{if(!a)return;let c=r=>{var d;r.theme&&Wm(r.theme),(d=r.styles)!=null&&d.variables&&Fm(r.styles.variables)};return a.addEventListener("hostcontextchanged",c),()=>a.removeEventListener("hostcontextchanged",c)},[a])}function VT(a,i){let u=It.useRef(!1);It.useEffect(()=>{var c,r;u.current||(r=(c=i==null?void 0:i.styles)==null?void 0:c.css)!=null&&r.fonts&&(Pm(i.styles.css.fonts),u.current=!0)},[i]),It.useEffect(()=>{if(!a)return;let c=r=>{var d,h;(h=(d=r.styles)==null?void 0:d.css)!=null&&h.fonts&&Pm(r.styles.css.fonts)};return a.addEventListener("hostcontextchanged",c),()=>a.removeEventListener("hostcontextchanged",c)},[a])}function QT(a,i){XT(a,i),VT(a,i)}function $T(){var v,g;const[a,i]=It.useState(null),u=It.useCallback(p=>{p.ontoolresult=S=>{if(S!=null&&S.content){const T=Array.isArray(S.content)?S.content.find(H=>H.type==="text"):null;if(T&&"text"in T)try{i(JSON.parse(T.text))}catch{i(T.text)}}}},[]),{app:c,isConnected:r,error:d}=GT({appInfo:{name:"n8n-mcp-ui",version:"1.0.0"},capabilities:{},onAppCreated:u});QT(c,c==null?void 0:c.getHostContext());const h=((g=(v=c==null?void 0:c.getHostContext())==null?void 0:v.toolInfo)==null?void 0:g.tool.name)??null;return{data:a,error:(d==null?void 0:d.message)??null,isConnected:r,app:c,toolName:h}}function JT(a){if(!a)return"";try{return new Date(a).toLocaleDateString(void 0,{month:"short",day:"numeric",year:"numeric"})}catch{return a}}function KT(){var h,v,g;const{data:a,error:i,isConnected:u}=$T();if(i)return Me.jsxs("div",{style:{padding:"16px",color:"#ef4444"},children:["Error: ",i]});if(!u)return Me.jsx("div",{style:{padding:"16px",color:"var(--n8n-text-muted)"},children:"Connecting..."});if(!a)return Me.jsx("div",{style:{padding:"16px",color:"var(--n8n-text-muted)"},children:"Waiting for data..."});if(!a.success&&a.error)return Me.jsxs("div",{style:{maxWidth:"480px"},children:[Me.jsx(By,{variant:"error",children:"Error"}),Me.jsx("div",{style:{marginTop:"8px",fontSize:"13px",color:"var(--n8n-error)"},children:a.error})]});const c=((h=a.data)==null?void 0:h.workflows)??[],r=((v=a.data)==null?void 0:v.returned)??c.length,d=(g=a.data)==null?void 0:g.hasMore;return Me.jsxs("div",{style:{maxWidth:"480px"},children:[Me.jsxs("div",{style:{fontSize:"12px",color:"var(--color-text-secondary, var(--n8n-text-muted))",marginBottom:"10px"},children:["Showing ",r," workflow",r!==1?"s":"",d&&" (more available)"]}),Me.jsxs("div",{style:{border:"1px solid var(--n8n-border)",borderRadius:"var(--n8n-radius)",overflow:"hidden"},children:[Me.jsxs("div",{style:{display:"grid",gridTemplateColumns:"1fr 60px 50px auto",gap:"8px",padding:"8px 12px",fontSize:"11px",fontWeight:600,textTransform:"uppercase",letterSpacing:"0.03em",color:"var(--color-text-secondary, var(--n8n-text-muted))",background:"var(--n8n-bg-card)",borderBottom:"1px solid var(--n8n-border)"},children:[Me.jsx("span",{children:"Name"}),Me.jsx("span",{children:"Status"}),Me.jsx("span",{children:"Nodes"}),Me.jsx("span",{children:"Updated"})]}),c.length===0&&Me.jsx("div",{style:{padding:"16px",textAlign:"center",color:"var(--n8n-text-muted)",fontSize:"13px"},children:"No workflows found"}),c.map(p=>Me.jsxs("div",{style:{display:"grid",gridTemplateColumns:"1fr 60px 50px auto",gap:"8px",padding:"8px 12px",fontSize:"12px",borderBottom:"1px solid var(--n8n-border)",opacity:p.isArchived?.5:1},children:[Me.jsxs("div",{style:{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:[Me.jsx("span",{style:{fontWeight:500},children:p.name}),p.tags&&p.tags.length>0&&Me.jsxs("div",{style:{display:"flex",gap:"4px",marginTop:"2px",flexWrap:"wrap"},children:[p.tags.slice(0,3).map((S,T)=>Me.jsx("span",{style:{fontSize:"10px",padding:"1px 6px",borderRadius:"8px",background:"var(--n8n-info-light)",color:"var(--n8n-info)"},children:S},T)),p.tags.length>3&&Me.jsxs("span",{style:{fontSize:"10px",color:"var(--n8n-text-muted)"},children:["+",p.tags.length-3]})]})]}),Me.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"4px"},children:[Me.jsx("span",{style:{display:"inline-block",width:"8px",height:"8px",borderRadius:"50%",background:p.active?"var(--n8n-success)":"var(--n8n-border)",flexShrink:0}}),Me.jsx("span",{style:{fontSize:"11px",color:"var(--color-text-secondary, var(--n8n-text-muted))"},children:p.isArchived?"Archived":p.active?"Active":"Off"})]}),Me.jsx("span",{style:{color:"var(--color-text-secondary, var(--n8n-text-muted))"},children:p.nodeCount??"–"}),Me.jsx("span",{style:{fontSize:"11px",color:"var(--color-text-secondary, var(--n8n-text-muted))",whiteSpace:"nowrap"},children:JT(p.updatedAt)})]},p.id))]})]})}const ep=document.getElementById("root");ep&&ky.createRoot(ep).render(Me.jsx(KT,{}));</script>
132
132
  <style rel="stylesheet" crossorigin>:root{--n8n-primary: #ff6d5a;--n8n-primary-light: #ff8a7a;--n8n-success: #17bf79;--n8n-warning: #f59e0b;--n8n-error: #ef4444;--n8n-info: #3b82f6;--n8n-bg: #1a1a2e;--n8n-bg-card: #252540;--n8n-text: #e0e0e0;--n8n-text-muted: #9ca3af;--n8n-border: #374151;--n8n-error-light: #fee2e2;--n8n-warning-light: #fef3cd;--n8n-success-light: #e8f9f0;--n8n-info-light: #dbeafe;--n8n-radius: 8px;font-family:var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif)}[data-theme=light]{--n8n-bg: #ffffff;--n8n-bg-card: #f9fafb;--n8n-text: #1f2937;--n8n-text-muted: #6b7280;--n8n-border: #e5e7eb;--n8n-error-light: #fef2f2;--n8n-warning-light: #fffbeb;--n8n-success-light: #f0fdf4;--n8n-info-light: #eff6ff}*{margin:0;padding:0;box-sizing:border-box}body{background:var(--color-background-primary, var(--n8n-bg));color:var(--color-text-primary, var(--n8n-text));line-height:1.5;padding:16px}</style>
133
133
  </head>
134
134
  <body>