Skip to main content
Glama
Sign In

HelpCenter.io

by io.helpcenter
OverviewDiscussionsAdmin

Add Custom CSS

helpcenter_add_template_css

Add a labelled block of custom CSS to the design, to restyle components, regions or the whole help center beyond what the settings offer.

It edits the help center's design DRAFT (its v2 template): the draft the dashboard's Template Editor opens, with a live preview. Nothing reaches visitors until helpcenter_publish_template — after editing, give the customer the Template Editor link from the result to review, and publish only when they ask. v2 help centers only (a classic one answers template_migration_required). Ids come from helpcenter_get_template.

The CSS is scoped to the help center automatically. Target one component with [data-hc-instance-id=""] and every component of a type with [data-hc-component-type="Hero"]; the guide's 'css' topic (helpcenter_get_template_guide) lists the other hooks. Use var(--hc-color-*) rather than literal colours so dark mode keeps working, and keep text at 4.5:1 contrast: on a primary-coloured band, set text and links to var(--hc-color-on-primary). Blocks apply in order and a later one wins, so override a theme's CSS with a block of your own rather than editing the theme's. @import and javascript: URLs are stripped. This is the guide's add_css operation.

Args:

  • css (string): the CSS.

  • label (string, optional): e.g. 'Cards · hover lift'.

  • enabled (boolean, optional): default true.

  • index (integer, optional): position among the blocks; omit to append.

  • id (string, optional): an id of your choosing.

  • etag (string, optional): from your last read or edit; refuses (stale_draft) if the draft changed since.

Returns: what each entry did (new ids), warnings worth relaying, and the draft status with its new etag.

Tool call template

Replace each placeholder with a value matching the input schema. Only required parameters are included; add optional parameters as needed.

{
  "id": 1,
  "jsonrpc": "2.0",
  "method": "tools/call",
  "params": {
    "arguments": {
      "css": "<css>"
    },
    "name": "helpcenter_add_template_css"
  }
}

Input Schema

NameRequiredDescriptionDefault
idNoOptional id of your choosing for the block. Omit and one is generated (and returned).
cssYesThe CSS. Scoped to the help center automatically; see the guide's 'css' topic.
etagNoOptimistic lock: the draft etag from your last read, or the one your last edit returned. When given, the call is refused (stale_draft) if someone changed the draft since — so you never build on a state you have not seen. Omit to apply to the current draft.
indexNo0-based position among the CSS blocks (they apply in order). Omit to append.
labelNoA name for the block, e.g. 'Cards · hover lift'.
enabledNofalse keeps the block without applying it. Default true.
site_idNoWhich help center to act on: an id from helpcenter_list_sites. Needed when this connection reaches more than one help center; omit it when it reaches one. Applies to this call only — pass it on every call of a task, and ask the user which help center they mean if their request does not say.

Schema Changelog

Changes observed during successful MCP inspections.

  1. First observed

TDQS

A4.8/5.0
Behavior5/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

Adds substantial behavioral context beyond the annotations: draft/live separation, publish gating, the classic-site error, automatic scoping, selector hooks, color-variable and contrast constraints, stripped @import and javascript: URLs, block ordering/override semantics, and etag stale_draft behavior. These details materially help the agent avoid mistakes.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description front-loads purpose and keeps most detail relevant to correct invocation. It is dense and prose-heavy for a 7-parameter mutation, but the length is largely justified; slightly more scannable structure would improve it.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness5/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a non-idempotent draft mutation with 7 parameters and no output schema, the description covers the workflow, safety constraints, v2 requirement, CSS restrictions, etag behavior, and what the result contains. An agent has enough information to call it correctly and explain next steps to the customer.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters4/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema coverage is 100%, and the schema descriptions already explain each parameter. The description adds useful CSS-specific meaning for selectors, variables, ordering, and etag conflict behavior, though it omits site_id from its Args list even though the schema documents it.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

States a specific verb ('add') and resource ('labelled block of custom CSS'), plus its scope: restyling components, regions, or the whole help center beyond settings. It explicitly identifies itself as the guide's `add_css` operation, making it distinguishable from update_template_css and theme editing.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines5/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Explains that this edits the design draft, nothing reaches visitors until helpcenter_publish_template, and the agent should give the customer the Template Editor link to review and publish only when asked. It also gives the v2-only condition, where IDs come from, and an explicit alternative: override a theme's CSS with a block rather than editing the theme's.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

All HelpCenter.io toolsInspect
Try in Browser
One endpoint for every MCP toolRayrun runs every MCP server behind one URL and holds the credentials. Each call is decided per client, tool, and argument, then recorded.ray.runAd

Glama MCP Gateway

Add one secure layer between your agents and this server.

Resources