AI Integration

Whisq is designed for AI-assisted development. The entire API fits in under 5,000 tokens, which means any AI coding assistant can hold the complete framework reference in its context window.

CLAUDE.md

Every Whisq project includes a CLAUDE.md file at the root. This file contains the complete API reference in a format optimized for AI context windows.

To use it with any AI assistant, copy the contents of CLAUDE.md and paste it into your conversation. The AI will then generate correct Whisq code.

# Create a new project — CLAUDE.md is included automatically
npm create whisq@latest my-app

The file covers:

• All reactive primitives (signal, computed, effect, batch)
• All element functions (div, button, input, etc.)
• Component creation, lifecycle, and rendering
• Conditional rendering (when) and list rendering (each)
• Common patterns and anti-patterns

.cursorrules

For Cursor IDE users, Whisq includes a .cursorrules file that teaches Cursor how to write idiomatic Whisq code. Place it in your project root:

my-app/
  .cursorrules     # Cursor reads this automatically
  CLAUDE.md        # For other AI assistants
  src/
    main.ts

MCP Server

@whisq/mcp-server provides deep AI integration through the Model Context Protocol. It enables AI assistants to scaffold components and validate code.

Install it:

npm install -D @whisq/mcp-server

The MCP server provides tools for:

• Component scaffolding — generate component boilerplate from a description
• Code validation — check that generated code follows Whisq patterns
• API lookup — query the API reference programmatically

Effective Prompts

When asking an AI to write Whisq code, be specific about what you need:

Good prompts:

Create a Whisq component that shows a list of users fetched from /api/users.
Show a loading state while fetching and an error message if it fails.
Use resource() for data fetching and each() for the list.

Build a Whisq login form with email and password fields.
Use computed() to validate that email contains @ and password is 8+ chars.
Disable the submit button until the form is valid.

Create a Whisq store in stores/cart.ts with:
- items signal (array of {id, name, price, qty})
- total computed (sum of price * qty)
- addItem and removeItem functions

What makes these work: they mention specific Whisq APIs (resource(), computed(), signal()), which guides the AI to use the right patterns.

Common Patterns AI Generates Well

Whisq’s function-based API is straightforward for AI to generate correctly:

Pattern	AI Accuracy	Why
Signal + reactive text	Very high	signal() + () => value is simple
Event handlers	Very high	Standard DOM events, no special syntax
Conditional rendering	High	when() has a clear signature
List rendering	High	each() maps directly to array iteration
Form validation	High	computed() for derived boolean state
Data fetching	High	resource() wraps a single promise

Tips for Working with AI

1. Include CLAUDE.md in your context — paste it at the start of your conversation for the best results.
2. Name specific APIs — saying “use resource()” is better than “fetch some data.”
3. Show the anti-patterns — if AI generates div(count.value), point out it should be div(() => count.value). The AI will learn the pattern for the rest of the conversation.
4. Use stores for shared state — tell the AI to “create a store in stores/cart.ts” and it will export signals and functions correctly.

🐱 Whisker Tip

The smaller the API, the more accurate AI code generation becomes. Whisq’s under-5K-token API surface is a deliberate design choice for this reason.

Next Steps

• Quick Start — Set up your first project with AI context files
• Components — Understand what AI generates
• State Management — The store pattern AI handles well