Skip to content

bierlingm/spikes

Repository files navigation

/ Spikes

The feedback loop for AI-assisted building

MIT License Widget Size Free + Pro

AI can build a prototype in an hour.
Turning feedback into action is still the slow part.

Quick Start · CLI Reference · Widget Docs · Self-Hosting


What Is This?

Spikes is a feedback tool for AI-assisted development. It lets reviewers leave targeted feedback directly on web pages — no screenshots, no "that button over there", no lost context.

Click any element. Rate it. Comment. Spikes captures the exact CSS selector, bounding box, and page context. Your AI agent gets structured JSON it can act on immediately.

No accounts required. No build step. Works on file://, localhost, anywhere.


Quick Start

1. Install the CLI

curl -fsSL https://spikes.sh/install.sh | sh
# Or: cargo install spikes-cli

2. Add the widget to your HTML

spikes inject ./mockups/        # Injects widget script tag
spikes serve                    # http://localhost:3847

3. Collect and use feedback

spikes list                     # See all feedback
spikes list --json              # Feed to your agent
spikes list --rating no         # Find problems
spikes hotspots                 # Elements with most feedback
spikes resolve <id>             # Mark items done

CLI Commands

Command Description
spikes init Create .spikes/ directory with config
spikes list List feedback (--json, --page, --reviewer, --rating, --unresolved)
spikes show <id> Show single spike details
spikes export Export to JSON/CSV/JSONL/Cursor/Claude context
spikes hotspots Elements with most feedback
spikes reviewers List all reviewers
spikes inject <dir> Add/remove widget from HTML files
spikes serve Local dev server (--port, --marked, --cors-allow-origin)
spikes mcp serve Start MCP server for AI agent integration
spikes pull/push/sync Sync with remote endpoint
spikes share <dir> Upload to spikes.sh for instant sharing
spikes login/logout/whoami Authentication management
spikes upgrade/billing Pro tier subscription via Stripe
spikes deploy cloudflare Scaffold self-hosted Worker + D1

All commands support --json for scripting. See full CLI reference.


AI Agent Integration

Spikes speaks agent natively. Two ways to feed feedback into your AI workflow:

MCP Server

spikes mcp serve starts a Model Context Protocol server (stdio transport) that exposes three tools:

Tool Purpose
get_spikes List feedback with filters (page, rating, unresolved)
get_element_feedback Get feedback for a specific CSS selector
get_hotspots Find elements with the most feedback

Agents like Claude and Cursor can query your feedback directly:

# Start the MCP server
spikes mcp serve

# In your agent's MCP config, add:
# { "command": "spikes", "args": ["mcp", "serve"] }

Context Exports

Export structured markdown optimized for agent consumption:

# Cursor-optimized context
spikes export --format cursor-context > cursor-feedback.md

# Claude-optimized context  
spikes export --format claude-context > claude-feedback.md

Both formats include blocking issues, hotspots, and element-specific notes — structured for immediate agent action.


GitHub Action

Gate CI on feedback quality. The spikes-action fails builds when unresolved negative feedback exceeds your threshold.

name: CI
on: [push, pull_request]

jobs:
  feedback-gate:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: moritzbierling/spikes/action@v0.3.1
        with:
          threshold: 0           # Fail if any blocking spikes
          ignore-paths: ""     # Optional: pages to ignore
          require-resolution: false

See action/README.md for full documentation.


Widget Attributes

<script src="https://spikes.sh/spikes.js"
  data-project="my-app"
  data-position="bottom-right"
  data-color="#e74c3c"
  data-theme="dark"
  data-reviewer="Pat"
  data-endpoint="https://api.example.com/spikes"
  data-collect-email="true"
  data-admin="true">
</script>
Attribute Description Default
data-project Group feedback by project key location.hostname
data-position Button corner: bottom-right, bottom-left, top-right, top-left bottom-right
data-color Accent color (any CSS color) #e74c3c
data-theme Modal theme: dark or light dark
data-reviewer Pre-set reviewer name (prompts user)
data-endpoint Backend URL for multi-reviewer sync (local only)
data-collect-email Show email field in prompt false
data-admin Enable review mode features false
data-offset-x/y Button offset from edge

See Widget Attributes Reference for complete documentation.


Architecture

Spikes has three components that work together or standalone:

┌─────────────┐     ┌─────────────┐     ┌─────────────┐
│   CLI       │────▶│   Widget    │◄────│   Worker    │
│  (Rust)     │     │  (Vanilla   │     │ (Cloudflare │
│             │     │    JS)      │     │  + D1)      │
└─────────────┘     └─────────────┘     └─────────────┘
     │                                            │
     │          spikes.sh (hosted)                │
     └────────────────────────────────────────────┘

CLI — Rust binary for local development, spike management, and deployment. Stores spikes in ~/.local/share/spikes/.

Widget — 8KB gzipped vanilla JS. Captures element selectors, bounding boxes, ratings, and comments. Works offline via localStorage.

Worker — Optional Cloudflare Worker + D1 backend for multi-reviewer sync, sharing, and hosted deployments. Lives in spikes-hosted/.


Development

CLI

cd cli
cargo build --release
cargo test              # 160+ tests
cargo run -- --help

Widget

cd widget
# Edit src/spikes.js
# Test by running: spikes serve from the project root

Worker

cd ../spikes-hosted/worker
npm install
npx vitest run          # 284+ tests
npx wrangler dev

Self-Hosting

Want your own backend? One command:

spikes deploy cloudflare    # Creates spikes-worker/ directory
cd spikes-worker && npx wrangler deploy

See Self-Hosting Guide for full setup with D1 database, authentication, and Stripe billing integration.


What's Changed (Recent Overhaul)

  • Security: PBKDF2 password hashing, path traversal fixes, XSS protection
  • Auth: Magic link authentication (no passwords to forget)
  • Billing: Stripe integration with Pro tier support
  • Testing: 160 CLI tests + 284 worker tests
  • Architecture: Modular worker with clean separation of concerns
  • CI/CD: Automated testing and deployment pipelines

Detailed Documentation


Why Spikes

Zero friction One script tag, no signup required, no build step
Works anywhere file://, localhost, any domain
Precise Element-level feedback with exact CSS selectors
Agent-native JSON everywhere, pipes, queryable CLI
Your infrastructure Self-host or use hosted — your choice
Tiny Widget is 8KB gzipped
Private No tracking, your data stays yours

Pricing

Free forever. Pro if you want more.

No accounts required to start. Login when you need Pro features.

Free Pro
Price $0 forever Pay what you can
Shares 5 Unlimited
Spikes per share 1,000 Unlimited
Widget + CLI Full Full
Self-hosting Yes Yes
Password protection Yes
Webhooks Yes
Badge removal Yes

MIT licensed. Payment is appreciation, not access.

spikes upgrade when you're ready. No pressure.


Website · Docs · GitHub · Issues

MIT License · Built for builders who work with AI.

About

Drop-in feedback collection for static HTML mockups

Resources

License

Contributing

Stars

Watchers

Forks

Packages

 
 
 

Contributors