MCP Server

Give your AI coding agent accurate Reactive CSS 0.9.0 knowledge. The @reactivecss/mcp server provides documentation, API lookup, code validation, examples, migration guidance and bundle recommendations to any MCP-compatible client.

Package

@reactivecss/mcp

Source

packages/mcp/

Targets

Reactive CSS 0.9.0

Provides

7 tools · 8 resources · 4 prompts

Why use it

Language models learn from whatever Reactive CSS they saw in training, which is often an older API. Without help, an agent may write on: click(toggle(--open)) instead of :on(click), or invent functions the runtime doesn’t have.

The MCP server gives the agent the current documentation and a validator, so it can check its own output before showing it to you.

• Current syntax. Answers come from the 0.9.0 reference, not from training data.
• Checked code. The agent can validate a stylesheet with the library’s own compiler, and fix what the runtime would reject.
• Migration help. Older declarations such as on:, bind: and text: are mapped to their 0.9.0 forms.
• Smaller bundles. The agent can recommend Full, Compact or a Custom bundle from the features your CSS uses.

1 Install

Nothing to install: clients start the server with npx -y @reactivecss/mcp. It needs Node.js 22 or later.

To run a copy installed in your project instead, add it as a dev dependency and use npx -p @reactivecss/mcp reactivecss-mcp as the command. Keep the -p: npx then runs your installed copy, and never looks up the unscoped name reactivecss-mcp on npm, which this project does not own.

npm install --save-dev @reactivecss/mcp

2 Connect your client

Most MCP clients read a JSON configuration that names the server and the command that starts it.

{  "mcpServers": {    "reactivecss": {      "command": "npx",      "args": ["-y", "@reactivecss/mcp"]    }  }}

In Claude Code, add it from the terminal:

claude mcp add reactivecss -- npx -y @reactivecss/mcp

3 Check that it works

Ask your agent a question only the current docs can answer, such as how to read the click position in an event rule. A connected agent should look it up and answer with set(event(client-x)) inside a :on(click) rule, stored in a length state such as state(0px), citing the 0.9.0 reference.

Supported clients

The server speaks MCP over stdio, the transport every client listed here supports.

What it provides

Everything is read-only and offline: the server reads no files of yours, opens no network connections and runs no code from its input.

Tools

7: API lookup, documentation search, examples, validation, feature analysis, bundle advice and migration

Resources

8: reference documents the client can read directly

Prompts

4: ready-made tasks such as migrating a stylesheet

Tools

Actions the agent calls with arguments, for example “look up increment()” or “validate this stylesheet”: get_api_reference, search_docs, get_example, validate_css, analyze_features, suggest_bundle and migrate_css. Their parameters are in the package README.

Resources

Read-only documents the client can attach to a conversation: the API reference, the bundle features and their dependencies, the migration guide, compatibility, experimental APIs and common mistakes.

Prompts

Templates your client can offer as commands: create_reactive_component, migrate_to_v09, review_reactive_css and optimize_reactive_bundle. Each one tells the agent which tools to call and to validate the result.

Example: validating agent output

An agent asked for a disclosure menu first produces older syntax. It calls validate_css, which reports the legacy declarations, and the agent rewrites them before replying.

.nav {  --open: state(false);}.nav button {  on: click(toggle(--open));  attr: aria-expanded var(--open);}

.nav {  --open: state(false);}.nav button {  --attr-aria-expanded: var(--open);}.nav button:on(click) {  --open: toggle();}

Limits

• The server describes Reactive CSS. It doesn’t run your page or see your DOM.
• Validation checks syntax and API usage, not visual results. Test in a browser.
• Answers target 0.9.0. Use the server version that matches your runtime.

Run from source

To work on the server itself, build it from the repository. It bundles the library’s compiler, so build the library first:

git clone https://github.com/troshkinpavel/reactivecss.gitcd reactivecssnpm install && npm run buildcd packages/mcpnpm install && npm run build

Then use node /absolute/path/to/packages/mcp/dist/index.js as the client command. npm test runs the unit and protocol tests.

Links

Related