Optics MCP Server
Server Configuration
Describes the environment variables required to run the server.
| Name | Required | Description | Default |
|---|---|---|---|
No arguments | |||
Capabilities
Features and capabilities supported by this server
| Capability | Details |
|---|---|
| tools | {
"listChanged": true
} |
| prompts | {
"listChanged": true
} |
| resources | {
"listChanged": true
} |
Tools
Functions exposed to the LLM to take actions
| Name | Description |
|---|---|
| get_tokenA | Get detailed information about a specific design token by name |
| get_token_usage_statsB | Get statistics about design token usage across the system |
| search_tokensA | Search for design tokens by category or name pattern |
| list_componentsA | List all available components in the design system |
| get_component_infoB | Get detailed information about a component including its design token dependencies |
| get_component_tokensB | Get all design tokens used by a specific component |
| search_documentationC | Search through Optics documentation |
| generate_themeB | Generate a complete theme with CSS variables and Figma Variables JSON using Optics design tokens |
| validate_token_usageB | Validate code for hard-coded values that should use design tokens |
| replace_hard_coded_valuesB | Replace hard-coded values with design tokens |
| check_contrastC | Check WCAG contrast ratio between two color tokens |
| suggest_token_migrationA | Suggest design tokens for a hard-coded value |
| generate_component_scaffoldB | Generate a React component scaffold with proper token usage |
| generate_sticker_sheetC | Generate a visual style guide with color swatches and component examples |
| validate_color_pairC | Check if the pair is meant to be used together |
Prompts
Interactive templates invoked by user choice
| Name | Description |
|---|---|
| create-themed-component | Generate a component styled with Optics design tokens |
| migrate-to-tokens | Convert hard-coded CSS values to Optics design tokens |
| accessible-color-combo | Suggest accessible foreground/background color token combinations |
| design-review | Review a design or component for Optics token usage and best practices |
| explain-token-system | Explain how a specific token category works in Optics |
| get-token-reference | Get complete list of all available Optics design tokens - USE THIS to prevent token name hallucination |
Resources
Contextual data attached and managed by the client
| Name | Description |
|---|---|
| system-overview | Critical errors AI agents make, quick reference for Cache Components |
| documentation-section | Documentation sections for the Optics design system |
| tokens-all | Complete list of all Optics design tokens |
| tokens-category | Design tokens filtered by category (color, spacing, typography, border, shadow) |
| components-all | Complete list of all Optics components |
| documentation-introduction | introduction documentation |
| documentation-getting-started | getting-started documentation |
| documentation-design-tokens | design-tokens documentation |
| documentation-color-system | color-system documentation |
| documentation-spacing | spacing documentation |
| documentation-typography | typography documentation |
| documentation-components | components documentation |
| documentation-accessibility | accessibility documentation |
| tokens-color | Design tokens for color |
| tokens-spacing | Design tokens for spacing |
| tokens-typography | Design tokens for typography |
| tokens-border | Design tokens for border |
| tokens-shadow | Design tokens for shadow |
Latest Blog Posts
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/RoleModel/optics-mcp'
If you have feedback or need assistance with the MCP directory API, please join our Discord server