Regenerate schemas after npm install
🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
martinalong
parent
a8b3bf0ccd
commit
f276ec6df9
4 changed files with 883 additions and 16 deletions
|
|
@ -264,6 +264,163 @@
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
"styles": {
|
||||||
|
"description": "CSS variables for theming the app.",
|
||||||
|
"type": "object",
|
||||||
|
"propertyNames": {
|
||||||
|
"description": "Style variables for theming MCP apps.",
|
||||||
|
"anyOf": [
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-background-primary"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-background-secondary"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-background-tertiary"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-background-inverted"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-text-primary"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-text-secondary"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-text-tertiary"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-text-inverted"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-icon-primary"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-icon-secondary"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-icon-tertiary"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-icon-inverted"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-border-primary"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-border-secondary"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-accent-info"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-accent-danger"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-accent-success"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-accent-warning"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--font-family-sans"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--font-size-heading"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--font-size-body"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--font-size-caption"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--font-weight-regular"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--font-weight-emphasized"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--font-leading-regular"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--font-leading-tight"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--font-style-heading"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--font-style-body"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--font-style-body-emphasized"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--font-style-caption"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--font-style-caption-emphasized"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--border-radius-small"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--border-radius-medium"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--border-radius-large"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--border-radius-full"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--border-width-regular"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"additionalProperties": {
|
||||||
|
"description": "Style variables for theming MCP apps.",
|
||||||
|
"type": "string"
|
||||||
|
}
|
||||||
|
},
|
||||||
"displayMode": {
|
"displayMode": {
|
||||||
"description": "How the UI is currently displayed.",
|
"description": "How the UI is currently displayed.",
|
||||||
"anyOf": [
|
"anyOf": [
|
||||||
|
|
@ -550,6 +707,163 @@
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
"styles": {
|
||||||
|
"description": "CSS variables for theming the app.",
|
||||||
|
"type": "object",
|
||||||
|
"propertyNames": {
|
||||||
|
"description": "Style variables for theming MCP apps.",
|
||||||
|
"anyOf": [
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-background-primary"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-background-secondary"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-background-tertiary"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-background-inverted"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-text-primary"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-text-secondary"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-text-tertiary"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-text-inverted"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-icon-primary"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-icon-secondary"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-icon-tertiary"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-icon-inverted"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-border-primary"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-border-secondary"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-accent-info"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-accent-danger"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-accent-success"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-accent-warning"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--font-family-sans"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--font-size-heading"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--font-size-body"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--font-size-caption"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--font-weight-regular"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--font-weight-emphasized"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--font-leading-regular"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--font-leading-tight"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--font-style-heading"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--font-style-body"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--font-style-body-emphasized"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--font-style-caption"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--font-style-caption-emphasized"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--border-radius-small"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--border-radius-medium"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--border-radius-large"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--border-radius-full"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--border-width-regular"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"additionalProperties": {
|
||||||
|
"description": "Style variables for theming MCP apps.",
|
||||||
|
"type": "string"
|
||||||
|
}
|
||||||
|
},
|
||||||
"displayMode": {
|
"displayMode": {
|
||||||
"description": "How the UI is currently displayed.",
|
"description": "How the UI is currently displayed.",
|
||||||
"anyOf": [
|
"anyOf": [
|
||||||
|
|
@ -1018,6 +1332,163 @@
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
"styles": {
|
||||||
|
"description": "CSS variables for theming the app.",
|
||||||
|
"type": "object",
|
||||||
|
"propertyNames": {
|
||||||
|
"description": "Style variables for theming MCP apps.",
|
||||||
|
"anyOf": [
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-background-primary"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-background-secondary"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-background-tertiary"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-background-inverted"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-text-primary"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-text-secondary"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-text-tertiary"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-text-inverted"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-icon-primary"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-icon-secondary"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-icon-tertiary"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-icon-inverted"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-border-primary"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-border-secondary"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-accent-info"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-accent-danger"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-accent-success"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-accent-warning"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--font-family-sans"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--font-size-heading"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--font-size-body"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--font-size-caption"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--font-weight-regular"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--font-weight-emphasized"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--font-leading-regular"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--font-leading-tight"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--font-style-heading"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--font-style-body"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--font-style-body-emphasized"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--font-style-caption"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--font-style-caption-emphasized"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--border-radius-small"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--border-radius-medium"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--border-radius-large"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--border-radius-full"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--border-width-regular"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"additionalProperties": {
|
||||||
|
"description": "Style variables for theming MCP apps.",
|
||||||
|
"type": "string"
|
||||||
|
}
|
||||||
|
},
|
||||||
"displayMode": {
|
"displayMode": {
|
||||||
"description": "How the UI is currently displayed.",
|
"description": "How the UI is currently displayed.",
|
||||||
"anyOf": [
|
"anyOf": [
|
||||||
|
|
@ -1718,6 +2189,314 @@
|
||||||
"required": ["method", "params"],
|
"required": ["method", "params"],
|
||||||
"additionalProperties": false
|
"additionalProperties": false
|
||||||
},
|
},
|
||||||
|
"McpUiStyleVariableKey": {
|
||||||
|
"$schema": "https://json-schema.org/draft/2020-12/schema",
|
||||||
|
"description": "CSS variable keys available to MCP apps for theming.",
|
||||||
|
"anyOf": [
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-background-primary"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-background-secondary"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-background-tertiary"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-background-inverted"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-text-primary"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-text-secondary"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-text-tertiary"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-text-inverted"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-icon-primary"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-icon-secondary"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-icon-tertiary"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-icon-inverted"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-border-primary"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-border-secondary"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-accent-info"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-accent-danger"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-accent-success"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-accent-warning"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--font-family-sans"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--font-size-heading"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--font-size-body"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--font-size-caption"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--font-weight-regular"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--font-weight-emphasized"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--font-leading-regular"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--font-leading-tight"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--font-style-heading"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--font-style-body"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--font-style-body-emphasized"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--font-style-caption"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--font-style-caption-emphasized"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--border-radius-small"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--border-radius-medium"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--border-radius-large"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--border-radius-full"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--border-width-regular"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"McpUiStyles": {
|
||||||
|
"$schema": "https://json-schema.org/draft/2020-12/schema",
|
||||||
|
"description": "Style variables for theming MCP apps.",
|
||||||
|
"type": "object",
|
||||||
|
"propertyNames": {
|
||||||
|
"description": "Style variables for theming MCP apps.",
|
||||||
|
"anyOf": [
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-background-primary"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-background-secondary"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-background-tertiary"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-background-inverted"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-text-primary"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-text-secondary"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-text-tertiary"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-text-inverted"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-icon-primary"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-icon-secondary"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-icon-tertiary"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-icon-inverted"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-border-primary"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-border-secondary"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-accent-info"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-accent-danger"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-accent-success"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--color-accent-warning"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--font-family-sans"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--font-size-heading"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--font-size-body"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--font-size-caption"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--font-weight-regular"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--font-weight-emphasized"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--font-leading-regular"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--font-leading-tight"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--font-style-heading"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--font-style-body"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--font-style-body-emphasized"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--font-style-caption"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--font-style-caption-emphasized"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--border-radius-small"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--border-radius-medium"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--border-radius-large"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--border-radius-full"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "string",
|
||||||
|
"const": "--border-width-regular"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"additionalProperties": {
|
||||||
|
"description": "Style variables for theming MCP apps.",
|
||||||
|
"type": "string"
|
||||||
|
}
|
||||||
|
},
|
||||||
"McpUiTheme": {
|
"McpUiTheme": {
|
||||||
"$schema": "https://json-schema.org/draft/2020-12/schema",
|
"$schema": "https://json-schema.org/draft/2020-12/schema",
|
||||||
"description": "Color theme preference for the host environment.",
|
"description": "Color theme preference for the host environment.",
|
||||||
|
|
|
||||||
|
|
@ -19,6 +19,14 @@ export type McpUiDisplayModeSchemaInferredType = z.infer<
|
||||||
typeof generated.McpUiDisplayModeSchema
|
typeof generated.McpUiDisplayModeSchema
|
||||||
>;
|
>;
|
||||||
|
|
||||||
|
export type McpUiStyleVariableKeySchemaInferredType = z.infer<
|
||||||
|
typeof generated.McpUiStyleVariableKeySchema
|
||||||
|
>;
|
||||||
|
|
||||||
|
export type McpUiStylesSchemaInferredType = z.infer<
|
||||||
|
typeof generated.McpUiStylesSchema
|
||||||
|
>;
|
||||||
|
|
||||||
export type McpUiOpenLinkRequestSchemaInferredType = z.infer<
|
export type McpUiOpenLinkRequestSchemaInferredType = z.infer<
|
||||||
typeof generated.McpUiOpenLinkRequestSchema
|
typeof generated.McpUiOpenLinkRequestSchema
|
||||||
>;
|
>;
|
||||||
|
|
@ -111,6 +119,14 @@ expectType<spec.McpUiTheme>({} as McpUiThemeSchemaInferredType);
|
||||||
expectType<McpUiThemeSchemaInferredType>({} as spec.McpUiTheme);
|
expectType<McpUiThemeSchemaInferredType>({} as spec.McpUiTheme);
|
||||||
expectType<spec.McpUiDisplayMode>({} as McpUiDisplayModeSchemaInferredType);
|
expectType<spec.McpUiDisplayMode>({} as McpUiDisplayModeSchemaInferredType);
|
||||||
expectType<McpUiDisplayModeSchemaInferredType>({} as spec.McpUiDisplayMode);
|
expectType<McpUiDisplayModeSchemaInferredType>({} as spec.McpUiDisplayMode);
|
||||||
|
expectType<spec.McpUiStyleVariableKey>(
|
||||||
|
{} as McpUiStyleVariableKeySchemaInferredType,
|
||||||
|
);
|
||||||
|
expectType<McpUiStyleVariableKeySchemaInferredType>(
|
||||||
|
{} as spec.McpUiStyleVariableKey,
|
||||||
|
);
|
||||||
|
expectType<spec.McpUiStyles>({} as McpUiStylesSchemaInferredType);
|
||||||
|
expectType<McpUiStylesSchemaInferredType>({} as spec.McpUiStyles);
|
||||||
expectType<spec.McpUiOpenLinkRequest>(
|
expectType<spec.McpUiOpenLinkRequest>(
|
||||||
{} as McpUiOpenLinkRequestSchemaInferredType,
|
{} as McpUiOpenLinkRequestSchemaInferredType,
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -24,6 +24,62 @@ export const McpUiDisplayModeSchema = z
|
||||||
.union([z.literal("inline"), z.literal("fullscreen"), z.literal("pip")])
|
.union([z.literal("inline"), z.literal("fullscreen"), z.literal("pip")])
|
||||||
.describe("Display mode for UI presentation.");
|
.describe("Display mode for UI presentation.");
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description CSS variable keys available to MCP apps for theming.
|
||||||
|
*/
|
||||||
|
export const McpUiStyleVariableKeySchema = z
|
||||||
|
.union([
|
||||||
|
z.literal("--color-background-primary"),
|
||||||
|
z.literal("--color-background-secondary"),
|
||||||
|
z.literal("--color-background-tertiary"),
|
||||||
|
z.literal("--color-background-inverted"),
|
||||||
|
z.literal("--color-text-primary"),
|
||||||
|
z.literal("--color-text-secondary"),
|
||||||
|
z.literal("--color-text-tertiary"),
|
||||||
|
z.literal("--color-text-inverted"),
|
||||||
|
z.literal("--color-icon-primary"),
|
||||||
|
z.literal("--color-icon-secondary"),
|
||||||
|
z.literal("--color-icon-tertiary"),
|
||||||
|
z.literal("--color-icon-inverted"),
|
||||||
|
z.literal("--color-border-primary"),
|
||||||
|
z.literal("--color-border-secondary"),
|
||||||
|
z.literal("--color-accent-info"),
|
||||||
|
z.literal("--color-accent-danger"),
|
||||||
|
z.literal("--color-accent-success"),
|
||||||
|
z.literal("--color-accent-warning"),
|
||||||
|
z.literal("--font-family-sans"),
|
||||||
|
z.literal("--font-size-heading"),
|
||||||
|
z.literal("--font-size-body"),
|
||||||
|
z.literal("--font-size-caption"),
|
||||||
|
z.literal("--font-weight-regular"),
|
||||||
|
z.literal("--font-weight-emphasized"),
|
||||||
|
z.literal("--font-leading-regular"),
|
||||||
|
z.literal("--font-leading-tight"),
|
||||||
|
z.literal("--font-style-heading"),
|
||||||
|
z.literal("--font-style-body"),
|
||||||
|
z.literal("--font-style-body-emphasized"),
|
||||||
|
z.literal("--font-style-caption"),
|
||||||
|
z.literal("--font-style-caption-emphasized"),
|
||||||
|
z.literal("--border-radius-small"),
|
||||||
|
z.literal("--border-radius-medium"),
|
||||||
|
z.literal("--border-radius-large"),
|
||||||
|
z.literal("--border-radius-full"),
|
||||||
|
z.literal("--border-width-regular"),
|
||||||
|
])
|
||||||
|
.describe("CSS variable keys available to MCP apps for theming.");
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description Style variables for theming MCP apps.
|
||||||
|
*/
|
||||||
|
export const McpUiStylesSchema = z
|
||||||
|
.record(
|
||||||
|
McpUiStyleVariableKeySchema.describe(
|
||||||
|
"Style variables for theming MCP apps.",
|
||||||
|
),
|
||||||
|
z.string().describe("Style variables for theming MCP apps."),
|
||||||
|
)
|
||||||
|
.describe("Style variables for theming MCP apps.");
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @description Request to open an external URL in the host's default browser.
|
* @description Request to open an external URL in the host's default browser.
|
||||||
* @see {@link app.App.sendOpenLink} for the method that sends this request
|
* @see {@link app.App.sendOpenLink} for the method that sends this request
|
||||||
|
|
@ -354,6 +410,10 @@ export const McpUiHostContextSchema = z.looseObject({
|
||||||
theme: McpUiThemeSchema.optional().describe(
|
theme: McpUiThemeSchema.optional().describe(
|
||||||
"Current color theme preference.",
|
"Current color theme preference.",
|
||||||
),
|
),
|
||||||
|
/** @description CSS variables for theming the app. */
|
||||||
|
styles: McpUiStylesSchema.optional().describe(
|
||||||
|
"CSS variables for theming the app.",
|
||||||
|
),
|
||||||
/** @description How the UI is currently displayed. */
|
/** @description How the UI is currently displayed. */
|
||||||
displayMode: McpUiDisplayModeSchema.optional().describe(
|
displayMode: McpUiDisplayModeSchema.optional().describe(
|
||||||
"How the UI is currently displayed.",
|
"How the UI is currently displayed.",
|
||||||
|
|
|
||||||
|
|
@ -1,22 +1,25 @@
|
||||||
import { useEffect, useRef } from "react";
|
import { useEffect, useRef } from "react";
|
||||||
import { App } from "../app";
|
import { App } from "../app";
|
||||||
import { applyHostStyles } from "../styles";
|
import { applyDocumentTheme, applyHostStyles } from "../styles";
|
||||||
import { McpUiHostContext } from "../types";
|
import { McpUiHostContext } from "../types";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* React hook that applies host styles as CSS custom properties.
|
* React hook that applies host styles and theme as CSS custom properties.
|
||||||
*
|
*
|
||||||
* This hook listens to host context changes and automatically applies the
|
* This hook listens to host context changes and automatically applies:
|
||||||
* `styles` CSS variables to `document.documentElement`. This allows your
|
* - `styles` CSS variables to `document.documentElement` (e.g., `--color-background-primary`)
|
||||||
* app to use the host's theming values via CSS variables like
|
* - `theme` via `color-scheme` CSS property, enabling `light-dark()` CSS function support
|
||||||
* `var(--color-background-primary)`.
|
|
||||||
*
|
*
|
||||||
* The hook also applies styles from the initial host context when the app
|
* The hook also applies styles and theme from the initial host context when
|
||||||
* first connects.
|
* the app first connects.
|
||||||
|
*
|
||||||
|
* **Note:** If the host provides style values using CSS `light-dark()` function,
|
||||||
|
* this hook ensures they work correctly by setting the `color-scheme` property
|
||||||
|
* based on the host's theme preference.
|
||||||
*
|
*
|
||||||
* @param app - The connected App instance, or null during initialization
|
* @param app - The connected App instance, or null during initialization
|
||||||
* @param initialContext - Initial host context from the connection (optional).
|
* @param initialContext - Initial host context from the connection (optional).
|
||||||
* If provided, styles will be applied immediately on mount.
|
* If provided, styles and theme will be applied immediately on mount.
|
||||||
*
|
*
|
||||||
* @example Basic usage with useApp
|
* @example Basic usage with useApp
|
||||||
* ```tsx
|
* ```tsx
|
||||||
|
|
@ -29,7 +32,7 @@ import { McpUiHostContext } from "../types";
|
||||||
* capabilities: {},
|
* capabilities: {},
|
||||||
* });
|
* });
|
||||||
*
|
*
|
||||||
* // Automatically apply host styles as CSS variables
|
* // Automatically apply host styles and theme
|
||||||
* useHostStyles(app);
|
* useHostStyles(app);
|
||||||
*
|
*
|
||||||
* return (
|
* return (
|
||||||
|
|
@ -49,33 +52,42 @@ import { McpUiHostContext } from "../types";
|
||||||
* useHostStyles(app, hostContext);
|
* useHostStyles(app, hostContext);
|
||||||
* ```
|
* ```
|
||||||
*
|
*
|
||||||
* @see {@link applyHostStyles} for the underlying function
|
* @see {@link applyHostStyles} for the underlying styles function
|
||||||
|
* @see {@link applyDocumentTheme} for the underlying theme function
|
||||||
* @see {@link McpUiStyles} for available CSS variables
|
* @see {@link McpUiStyles} for available CSS variables
|
||||||
*/
|
*/
|
||||||
export function useHostStyles(
|
export function useHostStyles(
|
||||||
app: App | null,
|
app: App | null,
|
||||||
initialContext?: McpUiHostContext | null,
|
initialContext?: McpUiHostContext | null,
|
||||||
): void {
|
): void {
|
||||||
const initialStylesApplied = useRef(false);
|
const initialApplied = useRef(false);
|
||||||
|
|
||||||
// Apply initial styles once on mount
|
// Apply initial styles and theme once on mount
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (initialStylesApplied.current) {
|
if (initialApplied.current) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
if (initialContext?.theme) {
|
||||||
|
applyDocumentTheme(initialContext.theme);
|
||||||
|
}
|
||||||
if (initialContext?.styles) {
|
if (initialContext?.styles) {
|
||||||
applyHostStyles(initialContext.styles);
|
applyHostStyles(initialContext.styles);
|
||||||
initialStylesApplied.current = true;
|
}
|
||||||
|
if (initialContext?.theme || initialContext?.styles) {
|
||||||
|
initialApplied.current = true;
|
||||||
}
|
}
|
||||||
}, [initialContext]);
|
}, [initialContext]);
|
||||||
|
|
||||||
// Listen for host context changes and apply updated styles
|
// Listen for host context changes and apply updated styles/theme
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!app) {
|
if (!app) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
app.onhostcontextchanged = (params) => {
|
app.onhostcontextchanged = (params) => {
|
||||||
|
if (params.theme) {
|
||||||
|
applyDocumentTheme(params.theme);
|
||||||
|
}
|
||||||
if (params.styles) {
|
if (params.styles) {
|
||||||
applyHostStyles(params.styles);
|
applyHostStyles(params.styles);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue