<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Adeolu Adesina</title>
    <description>The latest articles on DEV Community by Adeolu Adesina (@adeoluwaadesina).</description>
    <link>https://dev.to/adeoluwaadesina</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3997486%2F50dacee0-e36c-4663-9d4d-7659f59ace78.jpg</url>
      <title>DEV Community: Adeolu Adesina</title>
      <link>https://dev.to/adeoluwaadesina</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/adeoluwaadesina"/>
    <language>en</language>
    <item>
      <title>Two undocumented bugs in MCP Apps I found building a task panel for Claude</title>
      <dc:creator>Adeolu Adesina</dc:creator>
      <pubDate>Mon, 22 Jun 2026 21:14:25 +0000</pubDate>
      <link>https://dev.to/adeoluwaadesina/two-undocumented-bugs-in-mcp-apps-i-found-building-a-task-panel-for-claude-4723</link>
      <guid>https://dev.to/adeoluwaadesina/two-undocumented-bugs-in-mcp-apps-i-found-building-a-task-panel-for-claude-4723</guid>
      <description>&lt;p&gt;I spent a week building &lt;a href="https://github.com/adeoluwaadesina/wingman-mcp" rel="noopener noreferrer"&gt;Wingman&lt;/a&gt;, an open source MCP server that renders a persistent task panel inline in Claude conversations using MCP Apps (SEP-1865). The spec is solid. The SDK is solid. But I hit two bugs that cost me most of a weekend each, and neither is documented anywhere I could find. Writing them up here in case they save someone else the time.&lt;/p&gt;

&lt;h2&gt;
  
  
  Bug 1: resourceUri has two valid-looking locations, and only one works
&lt;/h2&gt;

&lt;p&gt;MCP Apps needs a way to tell the host "render this resource as a UI for this tool call." That pointer lives in &lt;code&gt;_meta.ui.resourceUri&lt;/code&gt;. The question is: meta on what?&lt;/p&gt;

&lt;p&gt;I started with a parameterized resource template, &lt;code&gt;ui://wingman/panel/{plan_name}&lt;/code&gt;, registered per plan. That was my first mistake. Parameterized templates get listed under &lt;code&gt;resources/templates/list&lt;/code&gt;, not &lt;code&gt;resources/list&lt;/code&gt;, and hosts do not prefetch or render anything from the templates list. The fix was straightforward once I found it: register one static resource, &lt;code&gt;ui://wingman/panel&lt;/code&gt;, and pass the actual plan data through &lt;code&gt;structuredContent&lt;/code&gt; on the tool result instead of baking it into the URI.&lt;/p&gt;

&lt;p&gt;That fix surfaced the real bug. My &lt;code&gt;show_plan&lt;/code&gt; tool was returning a plain Python dict:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;plan&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;plan_data&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;_meta&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;ui&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;resourceUri&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;ui://wingman/panel&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;}}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This looks correct. It is not. FastMCP's result conversion takes a returned dict and serializes the whole thing into &lt;code&gt;structuredContent&lt;/code&gt;, verbatim, including any &lt;code&gt;_meta&lt;/code&gt; key the dict happens to carry. So the actual wire result looked like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="n"&gt;result&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;structuredContent&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;_meta&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;][&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;ui&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;][&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;resourceUri&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;  &lt;span class="c1"&gt;# == "ui://wingman/panel", but wrong place
&lt;/span&gt;&lt;span class="n"&gt;result&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;meta&lt;/span&gt;  &lt;span class="c1"&gt;# None — this is what the host actually reads
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;MCP Apps hosts read &lt;code&gt;resourceUri&lt;/code&gt; off the top-level &lt;code&gt;_meta&lt;/code&gt; on the &lt;code&gt;CallToolResult&lt;/code&gt;, not off whatever ended up inside &lt;code&gt;structuredContent&lt;/code&gt;. With that pointer effectively missing, the host had nowhere to bind the iframe. The visible symptom was strange: actions in the UI would update on screen but nothing persisted. The panel was rendering against the wrong contract entirely, but it rendered well enough to look like a smaller bug.&lt;/p&gt;

&lt;p&gt;The fix is to stop returning a dict and return a &lt;code&gt;CallToolResult&lt;/code&gt; directly, with &lt;code&gt;_meta&lt;/code&gt; set on the result object itself:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="kn"&gt;from&lt;/span&gt; &lt;span class="n"&gt;mcp.types&lt;/span&gt; &lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="n"&gt;CallToolResult&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;TextContent&lt;/span&gt;

&lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nc"&gt;CallToolResult&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="n"&gt;content&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nc"&gt;TextContent&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nb"&gt;type&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;text&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;text&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="n"&gt;summary&lt;/span&gt;&lt;span class="p"&gt;)],&lt;/span&gt;
    &lt;span class="n"&gt;structuredContent&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;plan&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;plan_data&lt;/span&gt;&lt;span class="p"&gt;},&lt;/span&gt;
    &lt;span class="n"&gt;_meta&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;ui&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;resourceUri&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;ui://wingman/panel&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;}},&lt;/span&gt;
&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;FastMCP's lowlevel handler passes a returned &lt;code&gt;CallToolResult&lt;/code&gt; through unchanged, so the top-level &lt;code&gt;_meta&lt;/code&gt; survives intact. I added a regression test that asserts on &lt;code&gt;result.meta&lt;/code&gt; directly, not on anything inside &lt;code&gt;structuredContent&lt;/code&gt;, so this can never silently regress again.&lt;/p&gt;

&lt;p&gt;If you are building an MCP App and using a framework that lets you return a plain dict from a tool, check exactly where that framework puts a &lt;code&gt;_meta&lt;/code&gt; key you pass in. There are two plausible-looking destinations and only one of them is real.&lt;/p&gt;

&lt;h2&gt;
  
  
  Bug 2: CSS specificity quietly killed three "fixed" bugs at once
&lt;/h2&gt;

&lt;p&gt;After fixing the resourceUri issue, I still had three visible UI bugs in the host: the empty state showed even when tasks existed, the three-dot menu would not close on a second click, and it would not close on click-outside either.&lt;/p&gt;

&lt;p&gt;I went through the JavaScript line by line. The toggle logic was correct. The empty-state gate (&lt;code&gt;tasks.length === 0&lt;/code&gt;) was correct. The click-outside listener was attaching and firing correctly, confirmed with console logging at every step. The DOM &lt;code&gt;hidden&lt;/code&gt; attribute was being set exactly when it should be. And the bugs were still visible.&lt;/p&gt;

&lt;p&gt;The browser's default stylesheet includes &lt;code&gt;[hidden] { display: none; }&lt;/code&gt;, but user-agent stylesheet rules have the lowest possible specificity. Any author-level class selector that sets &lt;code&gt;display&lt;/code&gt; wins over it. My stylesheet had:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight css"&gt;&lt;code&gt;&lt;span class="nc"&gt;.empty-state&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nl"&gt;display&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;flex&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="nc"&gt;.task-list&lt;/span&gt;   &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nl"&gt;display&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;flex&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="nc"&gt;.menu&lt;/span&gt;        &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nl"&gt;display&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;flex&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Every one of these elements also got &lt;code&gt;hidden&lt;/code&gt; set or removed correctly by JavaScript at the right moments. But the explicit &lt;code&gt;display: flex&lt;/code&gt; in each class rule outranked the UA stylesheet's &lt;code&gt;[hidden]&lt;/code&gt; rule, so the elements stayed visually displayed regardless of what the &lt;code&gt;hidden&lt;/code&gt; attribute said. The JavaScript was never wrong. The DOM state was never wrong. The CSS was just quietly overriding the one thing that was supposed to control visibility.&lt;/p&gt;

&lt;p&gt;One line fixed all three reported bugs at once:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight css"&gt;&lt;code&gt;&lt;span class="o"&gt;[&lt;/span&gt;&lt;span class="nt"&gt;hidden&lt;/span&gt;&lt;span class="o"&gt;]&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nl"&gt;display&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;none&lt;/span&gt; &lt;span class="cp"&gt;!important&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The lesson generalizes past this one panel: if your JS is setting state correctly, your event listeners are firing correctly, and the bug is still visible, check whether you have a &lt;code&gt;display&lt;/code&gt; rule anywhere that outranks &lt;code&gt;[hidden]&lt;/code&gt;. Three independent-looking bug reports were one missing CSS line.&lt;/p&gt;

&lt;h2&gt;
  
  
  Smaller findings, for completeness
&lt;/h2&gt;

&lt;p&gt;Building the v0.2 menu actions (export, delete, clear) surfaced three more iframe sandbox constraints inside MCP Apps hosts that are not called out in the spec docs:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;confirm()&lt;/code&gt; fails silently inside the sandboxed iframe. No dialog appears, no error throws. Replace it with an inline confirmation UI in the panel itself.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;navigator.clipboard.writeText&lt;/code&gt; is unavailable. For "export as markdown," route the text back through &lt;code&gt;sendMessage&lt;/code&gt; so it lands in the chat instead of trying to hit the clipboard.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;Blob&lt;/code&gt; and &lt;code&gt;URL.createObjectURL&lt;/code&gt; downloads are blocked. Same workaround: surface the content through &lt;code&gt;sendMessage&lt;/code&gt; rather than triggering a file download from inside the iframe.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;None of these throw errors you can catch cleanly. They just do nothing, which makes them easy to miss in testing and easy to misdiagnose as "my code is wrong" when the real answer is "this API does not exist in this sandbox."&lt;/p&gt;

&lt;h2&gt;
  
  
  Takeaway
&lt;/h2&gt;

&lt;p&gt;Both of the big bugs shared a shape: the code that looked wrong was fine, and the actual fault was one layer away from where I was looking; a field nested in the wrong container, a stylesheet rule with higher specificity than expected. Worth checking that layer early next time, before assuming the logic is at fault.&lt;/p&gt;

&lt;p&gt;Wingman is MIT licensed and on PyPI as &lt;code&gt;wingman-mcp&lt;/code&gt; if you want to see the fixes in context: &lt;a href="https://github.com/adeoluwaadesina/wingman-mcp" rel="noopener noreferrer"&gt;github.com/adeoluwaadesina/wingman-mcp&lt;/a&gt;&lt;/p&gt;

</description>
      <category>mcp</category>
      <category>llm</category>
      <category>opensource</category>
      <category>python</category>
    </item>
  </channel>
</rss>
