component · ai surface

TuxMcpEmbed

Interactive third-party app frame for the MCP shape — when the assistant hands off to Linear / Notion / Figma and renders the app's UI inline in the conversation. Sister to TuxArtifact, not a replacement: that's for static AI-generated output (code, doc, image); this is for live third-party surfaces. Window-chrome action set (collapse · expand · exit) instead of the file-chrome set (copy · download · regenerate · share).

flagship · inline app card

Default inline display

The default shape — fits inline after an assistant turn, just like TuxArtifact. The accent strip on the left edge signals "this is third-party, not first-party output." Click the controls; they all emit events the host wires up.

Linear

mcp://linear · v1.2.0

MOBILITY · sprint 8

  • MOB-412Segment-level outliers in corridor-strip renderingin progress
  • MOB-417TuxMapMarker cluster glyph contrast in dark themetodo
  • MOB-41936-month follow-up CSV ingestion timeoutreview
<tux-mcp-embed
  app-name="Linear"
  app-icon="lucide:square-kanban"
  source="mcp://linear · v1.2.0"
  @collapse="onCollapse"
  @expand="onExpand"
  @exit="onExit"
>
  <iframe :src="appUrl" class="w-full h-72" />
</tux-mcp-embed>

async lifecycle · skeleton

Loading state

MCP apps initialize over the network. Pass loading while the connection establishes; the component renders three shimmer bars + a content block in place of the slot. Honors prefers-reduced-motion with a static muted fill.

Notion

mcp://notion · workspace.tti

<tux-mcp-embed
  app-name="Notion"
  app-icon="lucide:notebook"
  source="mcp://notion · workspace.tti"
  :loading="loading"
>
  <iframe :src="notionUrl" class="w-full h-64" />
</tux-mcp-embed>

fixed chrome

Hide window controls

Some surfaces don't want collapse / expand / exit — pinned canvas tools, hero embeds, in-page demos. Disable individually via :collapsible="false" / :expandable="false" / :closable="false".

Figma

mcp://figma · TUX library

TUX component library mirror — 132 components synced. 

<tux-mcp-embed
  app-name="Figma"
  app-icon="lucide:component"
  source="mcp://figma · TUX library"
  :collapsible="false"
  :expandable="false"
>
  <div class="figma-canvas">...</div>
</tux-mcp-embed>

when to reach for which

MCP display taxonomy

From the MCP Apps for Claude reference. Pick the tier that matches the assistant's intent — inline-card for a single result the user reads and reacts to; inline-carousel for a small browse-then-pick set; full-screen for the focus-and-work mode this component's expand event triggers.

  • Inline card — one MCP result rendered right after the assistant turn. Use TuxMcpEmbed alone.
  • Inline carousel — 3+ comparable results (places, sources, items). Use TuxCardCarousel with one TuxMcpEmbed per slide, sized to ~320–360px wide.
  • Full screen — user wants to focus and work. Host listens for @expand and switches to a focus-view layout (e.g. TuxFocusView or a slideover) holding the same embed.