Skip to main content
The <webmcp-agent> widget renders inside Shadow DOM, so external selectors cannot reach its internals. Customize the UI by setting CSS custom properties on the host element.

​
Quick Example

webmcp-agent {
  --wm-color-primary: #0f766e;
  --wm-color-primary-foreground: #ffffff;
  --wm-color-background: #ffffff;
  --wm-color-foreground: #0f172a;
  --wm-radius: 12px;
}

​
Color Tokens

VariableDescription
--wm-color-backgroundMain background color
--wm-color-foregroundPrimary text color
--wm-color-primaryPrimary action color
--wm-color-primary-foregroundText on primary surfaces
--wm-color-mutedMuted surface color
--wm-color-muted-foregroundMuted text color
--wm-color-borderBorders and dividers
--wm-color-inputInput border color
--wm-color-ringFocus ring color
--wm-color-cardCard background color
--wm-color-card-foregroundText on card surfaces
--wm-color-popoverPopover background
--wm-color-popover-foregroundText on popovers
--wm-color-secondarySecondary surface color
--wm-color-secondary-foregroundText on secondary surfaces
--wm-color-accentAccent surface color
--wm-color-accent-foregroundText on accent surfaces
--wm-color-destructiveDestructive action color
--wm-color-destructive-foregroundText on destructive surfaces
--wm-color-successSuccess state color
--wm-color-warningWarning state color
--wm-color-errorError state color

​
Message Bubbles

VariableDescription
--wm-user-bubble-bgUser message background
--wm-user-bubble-textUser message text
--wm-assistant-bubble-bgAssistant message background
--wm-assistant-bubble-textAssistant message text

​
Composer

VariableDescription
--wm-composer-bgInput background
--wm-composer-borderInput border
--wm-composer-textInput text
--wm-composer-placeholderPlaceholder text
--wm-composer-button-bgSend button background
--wm-composer-button-textSend button text/icon

​
Tool Cards

VariableDescription
--wm-tool-bgTool card background
--wm-tool-borderTool card border
--wm-tool-textTool card text
--wm-tool-header-bgTool header background
--wm-tool-approve-bgApprove button background
--wm-tool-approve-textApprove button text
--wm-tool-deny-bgDeny button background
--wm-tool-deny-textDeny button text

​
Code Blocks

VariableDescription
--wm-code-bgCode block background
--wm-code-textCode block text
--wm-code-header-bgCode header background

​
Radius & Spacing

VariableDescription
--wm-radiusBase radius
--wm-radius-smSmall radius
--wm-radius-mdMedium radius
--wm-radius-lgLarge radius
--wm-radius-xlExtra large radius
--wm-radius-fullFully rounded radius
--wm-spacing-unitBase spacing unit

​
Typography

VariableDescription
--wm-font-sansSans-serif font stack
--wm-font-monoMonospace font stack
--wm-font-size-xsExtra small font size
--wm-font-size-smSmall font size
--wm-font-size-baseBase font size
--wm-font-size-lgLarge font size

​
Motion & Effects

VariableDescription
--wm-duration-fastFast transitions
--wm-duration-normalNormal transitions
--wm-duration-slowSlow transitions
--wm-easing-defaultDefault easing curve
--wm-easing-springSpring easing curve
--wm-shadow-smSmall shadow
--wm-shadow-mdMedium shadow
--wm-shadow-lgLarge shadow
--wm-blur-smSmall blur
--wm-blur-mdMedium blur
--wm-blur-lgLarge blur

​
Z-Index

VariableDescription
--wm-z-baseBase layer
--wm-z-contentContent layer
--wm-z-overlayOverlay layer
--wm-z-maxMaximum z-index

​
Dark Mode

Scope variables to your existing dark mode selector: 
/* Light mode (default) */
webmcp-agent {
  --wm-color-background: #ffffff;
  --wm-color-foreground: #0f172a;
  --wm-color-muted: #f1f5f9;
  --wm-color-border: #e2e8f0;
}

/* Dark mode */
html.dark webmcp-agent,
[data-theme="dark"] webmcp-agent {
  --wm-color-background: #0b1220;
  --wm-color-foreground: #e2e8f0;
  --wm-color-muted: #111827;
  --wm-color-border: #1f2937;
}