Skip to main content
Glama

/ Spikes

AI支援開発のためのフィードバックループ

MIT License Widget Size Free + Pro

AIは1時間でプロトタイプを構築できる。 フィードバックを行動に変える部分が、依然として遅い。

クイックスタート · CLIリファレンス · ウィジェットドキュメント · ホスト型ダッシュボード · セルフホスティング


これは何か?

SpikesはAI支援開発のためのフィードバックツールです。レビュアーはWebページ上に直接、的を絞ったフィードバックを残せます。スクリーンショットも「あっちのボタン」も不要、文脈を失うこともありません。

任意の要素をクリックし、評価し、コメントします。Spikesは厳密なCSSセレクタ、バウンディングボックス、ページコンテキストを取得します。AIエージェントは即座にアクション可能な構造化JSONを受け取ります。

アカウント不要。ビルドステップ不要。file://、localhost、どこでも動作します。


Related MCP server: Aceto

クイックスタート

1. CLIをインストール

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

2. プロジェクトを初期化

spikes init                     # Defaults to hosted spikes.sh
# spikes init --self-host       # Opt out — scaffold a self-hosted config instead

spikes init は、デフォルトで https://spikes.sh を指す [remote] セクションを持つ .spikes/config.toml を作成します。--self-host を渡すか(またはプロンプトで s と回答する)と、ホスト型のデフォルトをスキップします。

3. HTMLにウィジェットを追加

spikes inject ./mockups/        # Injects widget script tag (uses configured endpoint)
spikes serve                    # http://localhost:3847

4. フィードバックを収集して活用

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コマンド

コマンド

説明

spikes init

.spikes/ ディレクトリを設定付きで作成(デフォルトはホスト型、--self-host でオプトアウト)

spikes list

フィードバックを一覧表示(--json、--page、--reviewer、--rating、--unresolved)

spikes show <id>

単一のスパイクの詳細を表示

spikes export

JSON/CSV/JSONL/Cursor/Claudeコンテキストにエクスポート

spikes hotspots

フィードバックが最モ多い要素

spikes reviewers

すべてのレビュアーを一覧表示

spikes inject <dir>

HTMLファイルにウィジェットを追加/削除(--endpoint <url> で設定済みエンドポインドを上書き)

spikes serve

ローカル開発サーバー(--port、--marked、--cors-allow-origin)

spikes mcp serve

AIエージェント統合用のMCPサーバーを起動

spikes pull/push/sync

リモートエンドポインドと同期

spikes share <dir>

インスタント共有のためにspikes.shにアップ口ード

spikes login/logout/whoami

認証管理

spikes upgrade/biling

StripeによるProテイアのサブスクリプション

spikes deploy cloudflare

セルフホスト型 Worker + D1 をスキャフォールド

すべてのコマンドがスクリプト用に --json をサポートしています。CLIリファレンス全文 を参照してください。

ホスト型プ口ジェクトのスパイクを表示:

https://spikes.sh/dashboard のホスト型ダシュボードには、所有するすべでのプ口ジェクトが一覧表示され、個々のスパイクをドリルダウンできます(ページ、評価、解決状態でフィルタリングし、resolved をインラインで切り替え)。ブラウザで直接サインインできます:サインインをクリックし、確認ページを開いて、メールに送信されたマジックリンクで確認するだけです — CLIは不要です。

ベアラートークン(spikes login で取得した $SPIKES_TOKEN)を使えば、JSON APIを直接呼び出すこともできます:

# GET /me/projects
# List all projects you own (with spike_count + last_activity)
curl -H "Authorization: Bearer $SPIKES_TOKEN" \
  https://spikes.sh/me/projects

# GET /me/projects/:key/spikes
# List spikes for one of your projects (paginated, filterable: page, per_page,
# filter_page, filter_rating, filter_resolved)
curl -H "Authorization: Bearer $SPIKES_TOKEN" \
  "https://spikes.sh/me/projects/my-project/spikes?page=1&per_page=50"

# PATCH /me/projects/:key/spikes/:id
# Toggle the `resolved` flag on one spike
curl -X PATCH -H "Authorization: Bearer $SPIKES_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{"resolved": true}' \
  https://spikes.sh/me/projects/my-project/spikes/<spike_id>

# POST /projects
# Create a new project (user bearer only)
curl -X POST -H "Authorization: Bearer $SPIKES_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{"key": "my-project", "allowed_origins": ["https://example.com"]}' \
  https://spikes.sh/projects

# Single-line variant (copy-paste friendly)
curl -H "Authorization: Bearer $SPIKES_TOKEN" https://spikes.sh/me/projects

すべての /me/* エンドポイントはユーザースコープです。自分が所有するプロジェクトとスパイクだけが表示されます。テナントをまたぐリクエストは 404 PROJECT_NOT_FOUND を返します(列挙防止)。

セキュリティに関する注意: APIキー(sk_spikes_*)と管理者用 SPIKES_TOKEN は、/me/* エンドポイントや POST /projects では受け付けられません — これらには spikes login で取得したユーザーベアラートークンが必要です。POST /spikes 収集エンドポイントは、プロジェクトごとのオリジン許可リストとプロジェクトごとのレート制限を適用します。拒否されたウィジェットリクエストは、ウィジェットボタン上の小さな赤い #spikes-error-dot インジケーターとして表示されます(404 / 403 / 429)。


AIエージェント統合

Spikesはエージェントにネイティブ対応しています。AIコーディングアシスタントは、ワークフローを離れることなくフィードバックの読み取り、書き込み、管理ができます。

npx spikes-mcp            # Zero-install MCP server — just works
# or: spikes mcp serve    # If you have the CLI installed

MCPサーバー — 9つのツール

spikes mcp serve は、9つのツールを公開する Model Context Protocol サーバーを起動します:

ツール

目的

get_spikes

フィードバックをフィルター付きで一覧表示(ページ、評価、未解決)

get_ellement_feedback

特定のCSSセレクタに対するフィードバックを取得

get_hotspots

フィードバックが最モ多い要素を見つける

submit_spike

プ口グラムでフィードバックを作成

resolve_spike

フィードバックを対応済みとしてマーク

delete_spike

スパイクを削除

create_share

ファイルをアップロードして共有可能なURLを取得

list_shares

アクティブな共有を表示

get_usage

利用統計、制限、支出を確認

stdio と HTTP トランスポート、ローカル と リモート データモードをサポート:

spikes mcp serve                              # stdio, local JSONL
spikes mcp serve --remote                     # stdio, hosted API
spikes mcp serve --transport http --port 3848 # HTTP for sandboxed agents

APIキー

エージェントは独自のアイデンティテイを取得します。メールもマジックリンクも人手も不要です:

spikes auth create-key --name "my-agent"   # → sk_spikes_...
spikes auth list-keys                       # See all keys
spikes auth revoke-key <key_id>            # Revoke

キーは読み取り/書き込み/フルのスコープと、オプションの予算上限をサポートします。

エージェント向け課金

エージェント規模の利用向けの従量課金制。シート単位ではなくスパイク単位で支払います:

spikes usage    # See current spend and limits

予算の強制は上限に達すると 429 BUDGET_EXCEEDED を返します — エージェントは消費する前に確認できます。

コンテキストエクスポート

エージェントによる利用に最適化された構造化マークダウンをエクスポート:

spikes export --format cursor-context > cursor-feedback.md
spikes export --format claude-context > claude-feedback.md

ディスカバリー

  • llms.txt — すべての9つのMCPツール、パラメータ、エージェント向けクイックスタート

  • agents.md — エージェント向けの機械可読なランディングページ

  • Smithery — MCPサーバーレレジストリに掲載

  • spikes mcp install — Claude Desktop / Cursor 用の設定を生成

詳細: llms.txt · agents.md


GitHub Action

フィードバック品質でCIをゲートします。spikes-action は、未解決の否定的フィードバックがしきい値を超えるとビルドを失敗させます。

name: CI
on: [push, pull_request]

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

完全なドキュメントは action/README.md を参照してください。


ウィジェット属性

簡単セットアップ — プロジェクトキーを追加するだけで、フィードバックを収集できます:

<script src="https://spikes.sh/spikes.js" data-project="my-app"></script>

data-project を設定すると、フィードバックは自動的に https://spikes.sh/spikes に同期されます。セルフホスティングでない限り、エンドポイントを設定する必要はありません。

フル設定 — 利用可能なすべての属性:

<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-collect-email="true"
  data-admin="true">
</script>

セルフホスティング — 独自のバックエンドを指定:

<script src="/spikes.js"
  data-project="my-app"
  data-endpoint="https://my-worker.workers.dev/spikes">
</script>

属性

説明

デフォルト

data-project

プロジェクトキーでフィードバックをグループ化

location.hostname

data-position

ボタンのコーナー: bottom-right、bottom-left、top-right、top-left

bottom-right

data-color

アクセントカラー(任意のCSS色)

#e74c3c

data-theme

モーダルのテーマ: dark または light

dark

data-reviewer

レビュアー名を事前設定

(ユーザーにプロンプト)

data-endpoint

複数レビュアー同期用のバックエンドURL。オプション — data-project 設定時はデフォルトで https://spikes.sh/spikes。

https://spikes.sh/spikes (data-project 指定時)、/spikes (ローカル開発)

data-collect-email

プロンプトにメール欄を表示

false

data-admin

レビューモード機能を有効化

false

data-offset-x/y

端からのボタンのオフセット

—

完全なドキュメントは ウィジェット属性リファレンス を参照してください。


アーキテクチャ

Spikesには、連携しても単独でも動作する3つのコンポーネントがあります:

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

CLI — ローカル開発、スパイク管理、デプロイのためのRustバイナリ。スパイクを ~/.local/share/spikes/ に保存します。

ウィジェット — 14KB gzip圧縮のバニラJS。要素セレクタ、バウンディングボックス、評価、コメントを取得します。localStorageによりオフラインでも動作します。

Worker — 複数レビュアー同期、共有、ホスト型デプロイのためのオプションのCloudflare Worker + D1バックエンド。spikes-hosted/ にあります。


開発

CLI

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

ウィジェット

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

ウィジェット回帰テスト

サイレントデータ損失バグのクラス(例: 許可されていないオリジンでウィジェットが読み込まれ、エラーを表示せずに同期に失敗する)を検出するCIスイート:

cd tests/widget
npm install
npx playwright install chromium    # one-time
npm test                           # 23 tests: marker checks + happy/reverse/boundary specs (<60s)

ローカルのagent-ciにも組み込まれています:

npx agent-ci run --workflow workflows-local/widget.yml

Worker

Workerバックエンドはプライベートリポジトリ spikes-hosted にあります。テストするには:

cd ../spikes-hosted/worker
npm test              # Worker test suite (vitest)
npx wrangler dev

セルフホスティング

独自のバックエンドが欲しいですか? 1コマンドで:

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

D1データベース、認証、Stripe課金の統合を含む完全なセットアップは セルフホスティングガイド を参照してください。

Share vs. Deploy Cloudflare: どちらを選ぶべきか?

セットアップなしでインスタント共有したい場合は spikes share を使います — ファイルはspikes.shにアップロードされ、当社のインフラから配信されます。クイックレビュー、クライアントフィードバック、バックエンドを管理したくない場合に最適です。

データの分離(フィードバックがCloudflareアカウント内に留まる)、カスタムドメイン、またはインフラの完全な制御が必要な場合は、spikes deploy cloudflare を使います。セルフホスティングにはCloudflareアカウントと一度だけのデプロイ設定が必要です。


変更点(最近の大改修)

  • セキュリティ: PBKDF2パスワードハッシュ、パストラバーサル修正、XSS保護

  • 認証: マジックリンク認証(忘れるパスワードはありません)

  • 課金: Proテイア対応のStripe統合

  • テスト: CLIテストスイート(Rust)+ Workerテストスイート(../spikes-hosted/worker 内)

  • アーキテクチャ: 関心事の明確な分離を備えたモジュラーWorker

  • CI/CD: 自動テストとデプロイパイプライン


詳細ドキュメント


Spikesを選ぶ理由

手間いらず

スクリプトタグ1つ、サインアップ不要、ビルドステップなし

どこでも動作

file://、localhost、あらゆるドメイン

高精度

正確なCSSセレクタによる要素レベルのフィードバック

エージェントネイティブ

あらゆる場所でJSON、パイプ、クエリ可能なCLI

あなたのインフラ

セルフホストまたはホスト型 — 選択はあなた次第

軽量

ウィジェットはgzip圧縮で14KB

プライバシー保護

トラッキングなし、あなたのデータはあなたのもの


料金

無料は永遠に。もっと必要ならPro。

始めるのにアカウントは不要です。Pro機能が必要になったらログインしてください。

無料

Pro

価格

永遠に$0

任意の金額

シェア数

5

無制限

シェアあたりのSpikes数

1,000

無制限

Widget + CLI

すべて

すべて

セルフホスティング

対応

対応

パスワード保護

—

対応

Webhooks

—

対応

バッジ除去

—

対応

MITライセンス。支払いは感謝の表明であり、アクセス権ではありません。

準備ができたら spikes upgrade。無理強いしません。


ウェブサイト · ドキュメント · GitHub · Issues

MITライセンス · AIと共に働くビルダーのために。

Related MCP Connectors

Related MCP Servers

  • A
    license
    Not graded
    quality
    C
    maintenance
    MCP server that enables AI coding agents to read and write to a local-first HTML/CSS design canvas, bridging visual design and code generation.
    1
    MIT
  • A
    license
    Not graded
    quality
    D
    maintenance
    A local dev server with MCP interface for building HTML mockups together with an AI agent, enabling live collaborative editing through element selection and live preview.
    5
    MIT
  • A
    license
    Not graded
    quality
    A
    maintenance
    A self-hosted MCP server and gallery for AI-generated mockups, enabling AI tools to send mockups via MCP tool calls for storage and browsing in a clean web gallery.
    2
    MIT
  • F
    license
    Not graded
    quality
    C
    maintenance
    An MCP server that establishes feedback-oriented development workflows with a Web UI and desktop app, allowing users to provide interactive feedback to AI models through prompts, images, and session tracking.
    -