Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type @ followed by the MCP server name and your instructions, e.g., "@Brand Context MCP Server What's the ApoSuite focus color for inputs?"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
An MCP server that exposes the Medovia / ApoSuite brand guidelines — colors, typography, and component specs (buttons, forms & fields, tabs, alerts, modals, tables, navigation, logos) — as context for AI coding agents. Instead of guessing brand values (or re-scraping the auth-gated portal), an agent can ask this server for the authoritative spec.
The brand data is a snapshot captured from the ApoSuite section of the
Medovia varumärkesplattform (the portal is behind Google auth, so it can't be
fetched live). Update src/brand.ts when the portal changes.
Tool | Purpose |
| List the available topics. |
| Full markdown spec for one topic (e.g. |
| Keyword search across all topics ("focus color", "hover", "disabled", "radius", "side menu width"). |
| Look up a color by name/token → hex, CSS token, semantic role. |
It also exposes each topic as a resource (brand://colors,
brand://buttons, …) so it can be @-referenced in clients that support
resources.
Related MCP server: mcpsystem.design MCP Server
cd brand-context-mcp
npm install
npm run build # compiles to dist/
# during development: npm run dev (runs src/index.ts via tsx)Project scope (commit a .mcp.json so the team shares it):
claude mcp add brand-context --scope project -- node /absolute/path/to/brand-context-mcp/dist/index.jsOr add it manually to .mcp.json / ~/.claude.json:
{
"mcpServers": {
"brand-context": {
"command": "node",
"args": ["/absolute/path/to/brand-context-mcp/dist/index.js"]
}
}
}For local dev without building, point it at tsx:
{
"mcpServers": {
"brand-context": {
"command": "npx",
"args": ["tsx", "/absolute/path/to/brand-context-mcp/src/index.ts"]
}
}
}Then in a session: "What's the ApoSuite focus color for inputs?" →
the agent calls search_brand/get_brand_topic and answers from the spec.
The server speaks JSON-RPC over stdio. To smoke-test tools/list:
printf '%s\n' \
'{"jsonrpc":"2.0","id":1,"method":"initialize","params":{"protocolVersion":"2024-11-05","capabilities":{},"clientInfo":{"name":"smoke","version":"0"}}}' \
'{"jsonrpc":"2.0","method":"notifications/initialized"}' \
'{"jsonrpc":"2.0","id":2,"method":"tools/list"}' \
| node dist/index.jsoverview, colors, typography, dimensions, buttons,
forms-and-fields, tabs, alerts, modals, tables, navigation, logos.
Get the full ApoSuite brand spec for one topic as markdown (e.g. the button states, the field focus colors, the color palette).
| Name | Required | Description | Default |
|---|---|---|---|
| topic | Yes | One of the topics returned by list_brand_topics. |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the burden. It discloses the output format (markdown) and the scope (full spec for one topic), which is useful. However, it doesn't disclose whether the tool is read-only (likely safe), whether it can fail for invalid topics, or any rate limits. The description is adequate but not rich in behavioral detail.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, well-structured sentence that front-loads the core action ('Get the full ApoSuite brand spec for one topic as markdown') and then provides clarifying examples. No wasted words.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a simple single-parameter tool with a clear enum, the description is nearly complete. It tells the agent what it returns (markdown spec) and how to pick a topic (from list_brand_topics). The only missing piece is explicit mention of error behavior for invalid topics, but the enum in the schema mitigates that. No output schema exists, but the description's mention of markdown format partially covers return expectations.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so the schema already documents the 'topic' parameter well, including an enum of valid values. The description adds context by explaining that the topic is one returned by list_brand_topics, which is helpful. But it doesn't add much beyond the schema, so baseline 3 is appropriate.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool's function: retrieving the full ApoSuite brand spec for a single topic as markdown. It provides concrete examples of what the content includes (button states, field focus colors, color palette), which makes the purpose immediately understandable. It also distinguishes itself from siblings by focusing on 'full brand spec for one topic' rather than listing topics or searching.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description implies usage context: use this when you need the complete brand specification for a specific topic. The parameter description references list_brand_topics, which tells the agent to first get the list of topics. However, it doesn't explicitly state when to use this vs. get_color or search_brand, though the 'full spec' wording helps differentiate.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Look up an ApoSuite color by name or token (e.g. 'bright-blue', 'Deep Blue 2', 'gray-5') and get its hex, CSS token and semantic role.
| Name | Required | Description | Default |
|---|---|---|---|
| name | Yes | Color name or token. |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description carries the full burden. It discloses that this is a read-style lookup and what it returns, plus input flexibility via examples. It does not state behavior for unknown names, matching semantics, or error cases.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
A single front-loaded sentence with examples in parentheses and no filler. Every part earns its place.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a one-parameter lookup with no output schema, it covers input format and return contents. Missing details like not-found behavior are minor for this simple tool.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The schema already documents the name parameter, but the description adds concrete example formats ('bright-blue', 'Deep Blue 2', 'gray-5') and clarifies the kind of values accepted, which goes beyond the schema's minimal description.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
States a specific operation ('look up') on ApoSuite colors by name or token, and names the outputs (hex, CSS token, semantic role). This clearly distinguishes it from the sibling brand-topic tools.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description conveys when to use it: when a color needs to be resolved from a name or token to its hex/token/role. It doesn't explicitly mention alternatives or exclusions, but the sibling tools are in a different domain, so confusion is unlikely.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
List the available Medovia / ApoSuite brand topics (colors, typography, buttons, forms-and-fields, etc.).
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description must carry the safety/behavior burden; 'List ... available' clearly signals a read-only enumeration and scopes the result to available topics. It could additionally note that no mutation occurs or how topics are ordered, but the read-only intent is unambiguous.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
A single sentence with the verb and object front-loaded and examples in a controlled parenthetical. Every word adds context; nothing is wasted.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a parameterless list operation, the description is complete: it names the operation, the data domain, and example topic categories. No output schema or parameters require additional documentation.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
There are zero parameters, so the description cannot add parameter-specific meaning and the baseline is high. The enumeration examples still provide useful context about the kinds of return values to expect.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
States a specific verb ('List'), a concrete resource ('Medovia / ApoSuite brand topics'), and gives illustrative examples (colors, typography, buttons). The plural scope and topic focus distinguish it from singular/brand-search/color siblings such as get_brand_topic and get_color.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The use case is implied by 'List the available ... brand topics'—an agent can infer it is for enumerating topics rather than fetching a single one. However, there is no explicit guidance about when to prefer this over get_brand_topic, search_brand, or get_color, and no stated exclusions.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Keyword search across all brand topics. Good for questions like 'focus color', 'hover', 'disabled button', 'radius', 'side menu width'.
| Name | Required | Description | Default |
|---|---|---|---|
| query | Yes | Search terms. |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the disclosure burden. It states the search scope ('across all brand topics') but does not describe matching behavior, result ordering, or return shape; for a read-only keyword search this is adequate but minimal.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Two short sentences, with the core purpose front-loaded and examples in the second sentence. No filler or repetition of schema details.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a simple one-parameter search tool with no annotations or output schema, the description covers the core purpose and gives usage examples. It stops short of describing what the result set contains or whether matching is partial/case-insensitive, but these are not blockers for an agent invoking the tool.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The schema already describes the single `query` parameter ('Search terms.'), so coverage is 100%. The description adds value by illustrating appropriate query values ('focus color', 'hover', 'disabled button'), making the parameter's expected semantics concrete.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description uses a specific verb–resource pair ('Keyword search across all brand topics') and gives concrete example queries. This clearly separates it from siblings like list_brand_topics (enumeration) and get_brand_topic/get_color (targeted retrieval).
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description indicates when to use the tool via example questions ('Good for questions like...'), giving an agent a clear match signal. It does not explicitly state when to prefer a sibling tool, so exclusions are left implicit.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
v1.0.0get_brand_topicget_colorlist_brand_topicssearch_brandScored across 4 tools
Each tool has a distinct primary purpose: listing topics, fetching a topic spec, searching across topics, and looking up a specific color. Minor overlap exists between get_brand_topic (which could include colors) and get_color, but the descriptions clearly differentiate the specific color lookup from the broader topic retrieval.
All tool names follow a consistent verb_noun snake_case pattern: list_brand_topics, get_brand_topic, search_brand, get_color. The verbs are all common and the nouns clearly indicate the target, with no mixed casing or vague naming.
With only 4 tools, the server is tightly scoped to its purpose: retrieving brand specs and color information. This is within the ideal 3-15 tool range and each tool serves a clear, non-redundant function without feeling sparse or bloated.
The server provides a complete read-only workflow: discover topics, fetch a topic's full spec, search for specific details, and look up individual colors. A minor gap is the absence of a bulk color listing, but search_brand and get_color together cover most practical needs, so no significant dead ends.
Serves your design system and coding standards to coding agents, so they stop guessing.
AI-agent design tools: fonts, font recognition, palettes, color naming, contrast, code, SVG, CSS.
Live React design-system APIs, patterns, and code validation so AI agents build real UI, not slop.
The documentation, as a tool your agent can call: 950+ AI-dev guides. Search + fetch tools.
