Getting Started
Install Pulse, run one command, and have an AI agent building your first page — with streaming SSR, security headers, and a 100 Lighthouse score already in place.
Requirements
- Node.js 22 or later — nodejs.org
- Google Chrome — used by the agent for screenshots and Lighthouse audits — google.com/chrome
- An AI agent — Claude Code or GitHub Copilot CLI (pick one):
- Claude Code — installation guide — the default; no extra config needed
- GitHub Copilot CLI — documentation — use with the
--agent copilotflag
Pulse launches your chosen agent automatically with the Pulse MCP server wired in — so the agent has instant access to the framework reference, your project structure, and all Pulse tools without any manual configuration.
Install Pulse
Install the Pulse CLI globally:
npm install -g @invisibleloop/pulse
Create your project
Run pulse in any empty directory:
mkdir my-app
cd my-app
pulse
Pulse detects the directory is empty and scaffolds a project there. It creates the project files, installs dependencies, and exits with:
✓ Project ready. Run `pulse` again to start your AI session.
pulse in a non-empty directory prompts for a project name, then creates and scaffolds a subdirectory with that name — so you can run it from anywhere.Start a session
Run pulse again from inside your project directory:
pulse
Pulse detects the existing project and launches Claude Code with the Pulse MCP server already connected. Claude opens with the complete framework guide loaded, your project structure visible, and all Pulse tools available — ready to build immediately.
pulse every time you open a working session. It handles starting the agent and wiring up the MCP server. Once the agent is open, use /pulse-dev (Claude) or the build-page skill (Copilot) to start the dev server.Using GitHub Copilot
To use GitHub Copilot CLI instead of Claude, pass the --agent flag when scaffolding:
pulse --agent copilot
This scaffolds the project and writes agent: 'copilot' into pulse.config.js — so subsequent pulse runs pick up the preference automatically. You can also set it manually in pulse.config.js at any time:
export default {
agent: 'copilot',
}
When using Copilot, project skills (build-page, verify, new-doc-page) are available via the /skills command inside the Copilot CLI session. The Pulse MCP server is automatically injected into your Copilot MCP config for the duration of the session and removed cleanly on exit.
Build your first page
Once Claude opens, start the dev server and ask for something:
/pulse-dev
"Create a contact form with name, email, and message fields.
Validate the email format before submitting."
The agent will:
- Fetch the Pulse guide from the MCP server — spec format, component library, quality rules
- Check what pages already exist in your project
- Write the spec — route, state, validation, action lifecycle, view
- Validate it against the schema and fix every error and warning
- Open the page in the browser and confirm it looks right
You do not need to explain Pulse to the agent. The MCP server supplies the reference. Just describe what you want.
What got created
When you ran pulse in step 2, these files were written to your directory:
my-app/
├── src/
│ ├── pages/
│ │ └── home.js ← your first page spec (a working counter)
│ └── components/ ← shared view components go here
├── public/
│ ├── app.css ← global stylesheet
│ ├── pulse-ui.css ← Pulse component library styles
│ └── pulse-ui.js ← Pulse component library behaviour
├── .claude/ ← Claude Code agent context
│ ├── CLAUDE.md ← session instructions Claude reads on startup
│ ├── settings.json ← hooks: syntax checks, colour guards, package blocklist
│ ├── pulse-checklist.md ← spec review checklist, kept in sync by Pulse
│ └── commands/ ← slash commands available inside Claude
│ ├── pulse-dev.md
│ ├── pulse-stop.md
│ ├── pulse-build.md
│ └── pulse-start.md
├── .copilot/ ← GitHub Copilot CLI agent context
│ └── skills/ ← project skills available inside Copilot
│ ├── build-page/
│ ├── verify/
│ └── new-doc-page/
├── .github/
│ ├── copilot-instructions.md ← session instructions for Copilot
│ └── instructions/
│ └── pulse-checklist.instructions.md
├── package.json
└── pulse.config.js ← port, agent, and project settings
src/pages/home.js is a complete working spec — a counter with increment and decrement buttons. Open localhost:3000 after starting the dev server to see it. Every new page you create goes into src/pages/ and is discovered automatically.
The .claude/ directory contains the Claude agent's operating context. The .copilot/ directory contains the equivalent context for GitHub Copilot — project skills and instructions. Both are scaffolded by default so you can switch agents at any time.
Agent commands
These slash commands are available once Claude is open:
/pulse-dev # start (or restart) the dev server
/pulse-stop # stop the dev server
/pulse-build # production build → public/dist/
/pulse-start # run the production server
/pulse-report # Lighthouse audit + performance report
When using GitHub Copilot CLI, the equivalent capabilities are available as project skills. Type /skills inside Copilot to browse them — build-page, verify, and new-doc-page are all pre-installed.
You can also skip commands and skills entirely — just describe what you want and the agent handles the rest.
Keeping up to date
When a new version of Pulse is released, update the package and then run pulse update from your project root:
npm update @invisibleloop/pulse
pulse update
pulse update copies the latest UI assets and agent files into your project:
public/pulse-ui.cssandpublic/pulse-ui.js— component library styles and behaviour.claude/pulse-checklist.mdand.claude/commands/— Claude agent files.copilot/skills/— Copilot project skills.github/instructions/pulse-checklist.instructions.md— Copilot checklist
Your own source files, CLAUDE.md, .github/copilot-instructions.md, and pulse.config.js are never touched.
Next steps
- How It Works — the MCP server, what the agent knows, and the full build cycle
- Project Structure — where files live and how pages are discovered
- Spec Reference — every field the spec supports
- State — client state and mutations
- Server Data — fetch data on the server before the page renders
- Prompt Examples — real prompts with the output they produce