Skip to content
Whisq logo Whisq logo whisq

MCP Server

@whisq/mcp-server provides AI coding assistants with two tools: scaffold_component for generating components from descriptions, and validate_code for checking Whisq code against common anti-patterns.

Installation

Section titled “Installation”
Terminal window
npm install -D @whisq/mcp-server

The package includes a binary whisq-mcp that runs as a stdio-based MCP server.

Configuration

Section titled “Configuration”

Claude Code

Section titled “Claude Code”

Add the server to your Claude Code MCP configuration:

{
  "mcpServers": {
    "Whisq": {
      "command": "npx",
      "args": ["whisq-mcp"]
    }
  }
}

Cursor

Section titled “Cursor”

In Cursor settings, add:

{
  "mcp.servers": {
    "Whisq": {
      "command": "npx",
      "args": ["whisq-mcp"]
    }
  }
}

Other MCP Clients

Section titled “Other MCP Clients”

Any MCP-compatible client can connect using the stdio transport:

Terminal window
npx whisq-mcp

The server communicates over stdin/stdout using the Model Context Protocol.

Tools

Section titled “Tools”

scaffold_component

Section titled “scaffold_component”

Generates a Whisq component from a natural language description.

Parameters:

ParamTypeRequiredDescription
namestringYesComponent name in PascalCase
descriptionstringYesWhat the component does
propsstring[]NoOptional prop names

Example prompt:

Use the scaffold_component tool to create a UserCard component
that displays a user's name and email, with props for name and email.

Generated output:

import { component, div, h3, p } from "@whisq/core";


/**
 * UserCard — Displays a user's name and email.
 */
const UserCard = component((props: { name: string; email: string }) => {
  return div({ class: "user-card" },
    h3(props.name),
    p(props.email),
  );
});


export default UserCard;

validate_code

Section titled “validate_code”

Checks Whisq code for common mistakes and anti-patterns.

Parameters:

ParamTypeRequiredDescription
codestringYesTypeScript/JavaScript code to validate

What it checks:

  • Static signal values used as children (should be wrapped in () =>)
  • Direct array mutation (.push() instead of spread)
  • Missing preventDefault on form submissions
  • Import from wrong package paths

Example prompt:

Use validate_code to check this component:


const App = component(() => {
  const count = signal(0);
  return div(count.value);
});

Response:

Line 3: Signal value used directly as child — wrap in () => for reactivity
  Found: div(count.value)
  Fix: div(() => count.value)

How It Works

Section titled “How It Works”

The MCP server runs as a local process alongside your editor. When you (or the AI) invokes a tool:

  1. The AI sends a tool call request over the MCP protocol
  2. The server processes the request (scaffolding or validation)
  3. The result is returned to the AI for use in its response

No data leaves your machine. The server runs entirely locally.

Next Steps

Section titled “Next Steps”