Claude Code

Claude Code works with Whisq out of the box. Every Whisq project includes a CLAUDE.md file that gives Claude the complete API reference in under 5,000 tokens.

Setup

When you create a new Whisq project, CLAUDE.md is included automatically:

npm create whisq@latest my-app
cd my-app
# CLAUDE.md is already at the project root

Claude Code reads CLAUDE.md when it opens your project — no extra configuration needed.

What CLAUDE.md Contains

The file provides Claude with:

• Complete API reference — every export from @whisq/core
• Usage patterns — signal creation, element functions, component structure
• Anti-patterns — what NOT to generate (e.g., count.value as a child instead of () => count.value)
• Project conventions — file structure, naming, git workflow

This is enough for Claude to generate correct Whisq components on the first attempt.

Example Workflow

Open your Whisq project in Claude Code and describe what you need:

Create a todo list component with:
- An input field to add new items
- A list of todos with checkboxes to mark as done
- A count of remaining items
- A "Clear completed" button

Claude will generate working Whisq code using signal(), computed(), each(), and proper reactive patterns — because it has the full API in context.

Tips for Better Results

1. Name specific APIs — “use resource() to fetch data” is better than “load some data from the server.”

2. Describe the component structure — “a form with email and password fields, a submit button that’s disabled until valid” gives Claude clear requirements.

3. Reference the store pattern — “create a store in stores/cart.ts with exported signals and functions” and Claude will follow the convention.

4. Point out mistakes — if Claude generates span(count.value), tell it to use span(() => count.value). It will apply the pattern consistently for the rest of the conversation.

Using the MCP Server

For deeper integration, install the @whisq/mcp-server:

npm install -D @whisq/mcp-server

This gives Claude Code access to two tools:

• scaffold_component — generate components from descriptions
• validate_code — check code for common Whisq anti-patterns

See MCP Server for setup details.

Next Steps

• MCP Server — Advanced AI tooling
• LLM Reference — The complete API in paste-ready format
• AI Integration Guide — Prompt patterns and tips