Documentation
Complete reference for Spikes — feedback your AI agent can act on. Workflows, CLI commands, widget configuration, and data formats.
What is Spikes
Spikes is a feedback tool built for the AI-assisted building workflow. It solves a specific problem: AI can build a prototype in an hour, but turning feedback into actionable code changes is still slow and manual.
You add one script tag to any HTML file. A floating button appears. Click any element to "spike" it — rate it, leave a comment. Spikes captures the exact CSS selector, bounding box, text content, and viewport dimensions. Not a screenshot. Not a vague description. Structured data your agent can act on.
Why structured data? Screenshots lose context. "Make it bigger" is ambiguous. A spike gives your agent the CSS selector, pixel coordinates, and the reviewer's intent in one JSON object — no interpretation needed.
There are two main use cases:
- Reviewing your own agent's work — You build with Claude Code or Cursor, then spike elements that need changes instead of describing them in chat
- Collecting feedback from others — Share a link with your team, client, or friends. They click and comment. You get structured JSON instead of scattered WhatsApp messages
The widget is 14KB gzipped, has zero dependencies, works on file://, localhost, and any domain. No accounts needed. Feedback is stored in localStorage by default, or synced to your own backend for multi-reviewer workflows.
Installation
Widget
Add a single script tag to your HTML file:
<script src="https://spikes.sh/widget.js"></script>
CLI — Install Script
Download and install the CLI with a single command:
curl -fsSL https://spikes.sh/install.sh | sh
CLI — Cargo
Or install via Cargo if you have Rust installed:
cargo install spikes
Quick Start
Get feedback on your mockups in under a minute:
# Inject widget into all HTML files in a directory
spikes inject ./mockups/
# Start local server
spikes serve
# → http://localhost:3847
# Share URL with reviewer, collect feedback, then:
spikes list # See all feedback
spikes list --rating no # Find problems
spikes hotspots # Most-spiked elements
spikes list --json | jq '...' # Feed to agents
Tip: First-time reviewers are prompted for their name. All spikes are tagged with reviewer identity.
Workflow: Review Your Agent's Work
You've asked Claude Code to build a pricing page. It looks mostly right, but a few things are off. Instead of describing the problems in chat, spike them:
# 1. Add the widget to your mockup
spikes inject ./mockups/
# 2. Open it in your browser
spikes serve
# → http://localhost:3847
Now open the page. Click the floating / button to enter spike mode. Your cursor becomes a crosshair. Click any element that needs work — the pricing card that's too cramped, the button with the wrong color, the heading that needs rewording. Rate each one and leave a comment.
When you're done reviewing, pull the feedback into your agent:
# 3. See what needs fixing
spikes list --rating no
spikes list --rating meh
# 4. Feed structured data to your agent
spikes list --json
Paste the JSON output into Claude Code or Cursor. The agent gets exact CSS selectors, bounding boxes, and your comments — it knows precisely what to change without guessing.
Tip: Use spikes hotspots to find which elements got the most feedback. These are your highest-priority fixes.
Workflow: Collect Feedback from Others
You've built a prototype for a client, or you want friends to review your side project. You need their feedback to be structured, not scattered across five messaging apps.
Option A: Local server (same network)
# Inject widget and serve locally
spikes inject ./mockups/
spikes serve
# Share http://your-ip:3847 with people on your network
Option B: Deploy your own backend (anyone, anywhere)
# Scaffold and deploy a Cloudflare Worker
spikes deploy cloudflare
cd spikes-worker && npx wrangler deploy
# Inject widget into your HTML files
spikes inject ./mockups/
# Then add data-endpoint to the script tag in your HTML:
# <script src="/spikes.js" data-endpoint="https://your-worker.workers.dev/spikes"></script>
Share the URL. Reviewers see your mockup with a floating / button. First-time reviewers are prompted for their name. They click elements, leave ratings and comments. Everything syncs to your backend.
# Pull feedback from all reviewers
spikes pull
# See who reviewed and what they said
spikes reviewers
spikes list --reviewer "Sarah"
# Export everything for your agent
spikes list --json
Tip: Non-technical reviewers don't need to install anything. They just open a link and click. Their feedback comes out as structured JSON with exact selectors — technical output from non-technical people.
Workflow: Agent Integration
Every Spikes command supports --json output, making it straightforward to pipe feedback into any AI agent or automation tool.
Feed feedback directly to Claude Code
# Paste this prompt into your agent:
Here is the feedback on my mockup. Fix each issue:
$(spikes list --json)
Your agent receives structured data with selectors like .pricing-card, ratings, comments, and exact bounding boxes. It can map each spike to a file and make precise changes.
Filter before feeding
# Only fix negative feedback
spikes list --rating no --json
# Only fix feedback on a specific page
spikes list --page pricing.html --json
# Find the most-spiked elements first
spikes hotspots --json
# Export everything as CSV for a spreadsheet
spikes export --format csv > feedback.csv
Automate with scripts
#!/bin/bash
# Pull latest feedback and process with jq
spikes pull
spikes list --json | jq '.[] | select(.rating == "no")' | \
jq -s '{issues: length, selectors: [.[].selector]}'
What your agent gets per spike: CSS selector (.pricing-card), bounding box ({x, y, width, height}), element text, rating, reviewer comment, page URL, viewport dimensions, and timestamp. Everything needed to locate and fix the issue without asking follow-up questions.
CLI Commands
All commands support --json for machine-readable output, making Spikes perfect for scripting and AI agents.
init
Create a .spikes/ directory in the current project to store feedback data.
Creates .spikes/feedback.jsonl for storing spike data (one spike per line).
list
List all feedback with optional filtering.
- --json
- Output as JSON array
- --page <PAGE>
- Filter by page URL or filename
- --reviewer <NAME>
- Filter by reviewer name
- --rating <RATING>
- Filter by rating (love, like, meh, no)
- --unresolved
- Show only unresolved spikes
# List all negative feedback
spikes list --rating no
# Get JSON for a specific page
spikes list --page index.html --json
show
Display details for a single spike.
- --json
- Output as JSON object
spikes show abc123xyz
export
Export all feedback in various formats for processing.
- --format <FORMAT>
- Output format: json, csv, jsonl (default: json)
# Export as CSV for spreadsheets
spikes export --format csv > feedback.csv
# Export as JSONL for streaming processing
spikes export --format jsonl
hotspots
Find elements with the most feedback — useful for identifying problem areas.
- --json
- Output as JSON array
- --limit <N>
- Number of hotspots to show (default: 10)
spikes hotspots --limit 5 --json
reviewers
List all reviewers who have submitted feedback.
- --json
- Output as JSON array
inject
Add the Spikes widget script to HTML files in a directory.
- --remove
- Remove widget script tags instead of adding
- --widget-url <URL>
- URL for widget script (default: /spikes.js for local serve)
- --json
- Output as JSON
# Add widget to all HTML files in a directory
spikes inject ./mockups/
# Remove widget from all HTML files
spikes inject ./mockups/ --remove
serve
Start a local development server for reviewing mockups.
- --port <PORT>
- Port to listen on (default: 3847)
- --dir <DIR>
- Directory to serve (default: current)
spikes serve --port 8080 --dir ./mockups/
deploy
Scaffold deployment configuration for your own backend.
- cloudflare
- Generate Cloudflare Worker + D1 scaffolding
# Generate Cloudflare Worker project
spikes deploy cloudflare
cd spikes-worker
npx wrangler deploy
pull / push
Sync feedback with a remote endpoint.
- --endpoint <URL>
- Remote endpoint URL (or use SPIKES_API_URL env var)
# Fetch remote feedback
spikes pull --endpoint https://my-worker.workers.dev/spikes
# Upload local feedback
spikes push --endpoint https://my-worker.workers.dev/spikes
delete
Delete a spike from local storage. Supports prefix matching (minimum 4 characters).
- -f, --force
- Skip confirmation prompt
- --json
- Output as JSON
spikes delete abc123
spikes delete abc1 --force
resolve
Mark a spike as resolved (or unresolved). Resolved spikes are excluded from spikes list --unresolved.
- --unresolve
- Mark as unresolved instead
- --json
- Output as JSON
spikes resolve abc123
spikes resolve abc123 --unresolve
login / logout
Authenticate with spikes.sh via magic link. Token stored in ~/.config/spikes/auth.toml with 0600 permissions.
- --token <TOKEN>
- Auth token (or enter interactively)
- --json
- Output as JSON
Remove stored authentication for spikes.sh.
- --json
- Output as JSON
whoami
Show current user info and tier.
- --json
- Output as JSON
share / unshare
Upload a directory to spikes.sh for instant sharing.
- --name <NAME>
- Custom name for the share URL
- --password <PASSWORD>
- Password-protect the share (Pro only)
- --host <HOST>
- Host URL for the API (default: https://spikes.sh)
- --json
- Output as JSON
Delete a shared project from spikes.sh.
- -f, --force
- Skip confirmation prompt
- --json
- Output as JSON
spikes share ./mockups
spikes share ./mockups --name "design-review-v2"
spikes share ./mockups --password "secret123"
spikes unshare my-project
shares
List your shared projects on spikes.sh.
- --json
- Output as JSON
billing
Open Stripe billing portal in browser.
- --json
- Output as JSON
usage
Show usage statistics (shares, spikes, limits).
- --json
- Output as JSON
upgrade
Upgrade to Pro tier via Stripe checkout.
- --json
- Output as JSON
Widget Configuration
Configure the widget with data attributes on the script tag:
<script
src="https://spikes.sh/widget.js"
data-project="my-project"
data-position="bottom-left"
data-color="#3498db"
data-theme="dark"
data-endpoint="https://my-worker.workers.dev/spikes"
data-reviewer="alice"
data-admin="true"
data-offset-x="20px"
data-offset-y="20px"
></script>
| Attribute | Default | Description |
|---|---|---|
data-project |
hostname | Project key for grouping feedback across pages |
data-position |
bottom-right |
Button position: bottom-right, bottom-left, top-right, top-left |
data-color |
#e74c3c |
Button background color (any CSS color) |
data-theme |
dark |
Widget color theme: light or dark |
data-endpoint |
— | POST endpoint for multi-reviewer sync. When set, feedback is sent to this URL. |
data-reviewer |
— | Pre-set reviewer name (skip the name prompt) |
data-collect-email |
false |
Prompt reviewers for email address |
data-admin |
false |
Enable review mode with spike markers on the page |
data-offset-x |
— | Horizontal button offset from corner (e.g., 20px) |
data-offset-y |
— | Vertical button offset from corner (e.g., 20px) |
Data Format
Every spike follows this structure:
interface Spike {
id: string; // nanoid
type: "page" | "element";
projectKey: string;
page: string;
url: string;
reviewer: { id: string; name: string };
selector?: string; // Element spikes only
elementText?: string; // Element spikes only
boundingBox?: { x, y, width, height };
rating: "love" | "like" | "meh" | "no" | null;
comments: string;
timestamp: string; // ISO 8601
viewport: { width, height };
}
Storage: Feedback is stored in .spikes/feedback.jsonl — one spike per line in JSON Lines format.
Multi-Reviewer Sync
By default, feedback lives in each reviewer's browser (localStorage). For team reviews, deploy your own backend:
Deploy to Cloudflare
# Generate Cloudflare Worker scaffolding
spikes deploy cloudflare
# Deploy to your Cloudflare account
cd spikes-worker
npx wrangler deploy
Configure Widget
Add the endpoint to your widget configuration:
<script
src="https://spikes.sh/widget.js"
data-endpoint="https://your-worker.workers.dev/spikes"
></script>
Sync from CLI
Use pull and push to sync feedback between local storage and your remote endpoint:
# Fetch all remote feedback
spikes pull
# Upload local feedback
spikes push
Tip: Set the SPIKES_API_URL environment variable to avoid passing --endpoint every time.
Environment Variables
These environment variables override default behavior for authentication and API configuration:
| Variable | Description |
|---|---|
SPIKES_API_URL |
Override API base URL (for self-hosting or local development) |
SPIKES_TOKEN |
Auth token override (alternative to spikes login) |
SPIKES_TOKEN=abc123 spikes whoami
SPIKES_API_URL=http://localhost:8787 spikes shares