Follow Discord
Sweep 22 Oct 2026 · 21:04Z Build v2.1.309 528 read Stable v2.1.308 Latest v2.1.309 Next v2.1.309 Feeds RSS JSON llms.txt llms-full.txt Unofficial
HomeDocsClaude Documentation 25 Sep 2026
One change · claude-docs

Design guidelines changedconnectors/building/mcp-apps/design-guidelines

Nearest release: v2.1.283, published under an hour after upstream edited the page. Shown because the two are within 24 hours of each other. Nothing here says the release caused the edit.

Upstream edited this page at 25 Sep 2026 18:00 UTC, give or take a minute or two: the time comes from Anthropic’s own sitemap rather than from a commit. This site recorded the change at 22 Oct 2026 18:07 UTC.

Upstream edited
Recorded here
Lines+4added
Lines−4removed
From line 6 where the diff opens
First seen 14 Aug 2026 this site's first read of the page
Recorded edits5to this page, all time

The whole hunk

from line 6, old and new numbered
/
lines
from line 6
66 
77> [!NOTE]
88>
9> If you haven't built and connected an MCP App yet, see [Get started with MCP Apps](/docs/connectors/building/mcp-apps/getting-started).
9> If you haven't built and connected an MCP App yet, see [Get started with MCP Apps](/docs/connectors/building/mcp-apps/getting-started.md).
1010 
1111Use the guidelines to [pick a display mode](#display-modes), [adapt to mobile](#mobile-guidelines), match Claude's [visual design](#visual-design) with the host's [style variables](#style-variables), and decide which [interactions](#interaction-patterns) belong in your app and which belong in chat.
1212 
from line 287
287287 
288288## Style variables
289289 
290MCP Apps automatically receive style variables from the host client. Reference these CSS custom properties to create interfaces that feel native to Claude. [Blend your MCP App with Claude's theme](/docs/connectors/building/mcp-apps/transparent-theming) shows how to apply them at runtime.
290MCP Apps automatically receive style variables from the host client. Reference these CSS custom properties to create interfaces that feel native to Claude. [Blend your MCP App with Claude's theme](/docs/connectors/building/mcp-apps/transparent-theming.md) shows how to apply them at runtime.
291291 
292292### Color tokens
293293 
from line 436
436436 
437437## Related resources
438438 
439* [Blend your MCP App with Claude's theme](/docs/connectors/building/mcp-apps/transparent-theming): apply the style variables and keep your background transparent
439* [Blend your MCP App with Claude's theme](/docs/connectors/building/mcp-apps/transparent-theming.md): apply the style variables and keep your background transparent
440440* [Set `ui.domain` for Claude](/docs/connectors/building/mcp-apps/getting-started#set-ui-domain-for-claude): compute the sandbox origin Claude expects for your app
441* [Submit a connector](/docs/connectors/building/submission#carousel-screenshots-for-mcp-apps): screenshot specifications for listing an MCP App in the directory
441* [Submit a connector](/docs/connectors/building/submission.md#carousel-screenshots-for-mcp-apps): screenshot specifications for listing an MCP App in the directory
442442 
Feedback