Skip to main content
Glama

/ Spikes

AI 지원 개발을 위한 피드백 루프

MIT License Widget Size Free + Pro

AI는 한 시간 안에 프로토타입을 만들 수 있습니다. 피드백을 실행으로 옮기는 것이 여전히 느린 부분입니다.

빠른 시작 · CLI 참조 · 위젯 문서 · 호스팅 대시보드 · 자체 호스팅


이게 뭔가요?

Spikes는 AI 지원 개발을 위한 피드백 도구입니다. 리뷰어가 웹 페이지에서 직접 대상 피드백을 남길 수 있습니다. 스크린샷도, "저기 있는 버튼" 같은 설명도 필요 없고, 맥락이 유실되지 않습니다.

아무 요소나 클릭하세요. 평가하고, 댓글을 다세요. Spikes는 정확한 CSS 선택자, 경계 상자(bounding box), 페이지 컨텍스트를 캡처합니다. 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>

단일 spike 세부 정보 표시

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/billing

Stripe를 통한 Pro 등급 구독

spikes deploy cloudflare

자체 호스팅 Worker + D1 스캐폴드

모든 명령어는 스크립팅을 위해 --json을 지원합니다. 전체 CLI 참조를 확인하세요.

호스팅된 프로젝트에서 spike 보기:

호스팅 대시보드 https://spikes.sh/dashboard 에는 소유한 모든 프로젝트가 나열되며 개별 spike로 드릴다운할 수 있습니다(페이지, 평점, 해결 여부로 필터링하고 resolved를 인라인으로 토글). 브라우저에서 직접 로그인하세요. 로그인을 클릭하고, 인증 페이지를 열고, 이메일로 전송된 매직 링크로 확인하면 됩니다. CLI가 필요 없습니다.

베어러 토큰($SPIKES_TOKEN, spikes login으로 발급)을 사용해 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/* 엔드포인트는 사용자 범위로 제한됩니다. 즉, 자신이 소유한 프로젝트와 spike만 볼 수 있습니다. 교차 테넌트 요청은 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_element_feedback

특정 CSS 선택자에 대한 피드백 가져오기

get_hotspots

피드백이 가장 많은 요소 찾기

submit_spike

프로그래밍 방식으로 피드백 생성

resolve_spike

피드백을 해결됨으로 표시

delete_spike

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

키는 읽기/쓰기/전체 권한 범위와 선택적 예산 상한을 지원합니다.

에이전트 등급 요금제

에이전트 규모 사용량에 대한 사용량 기반 가격 책정. 좌석별이 아니라 spike당 지불합니다:

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는 함께 또는 단독으로 작동하는 세 가지 구성 요소로 이루어져 있습니다:

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

CLI — 로컬 개발, spike 관리, 배포를 위한 Rust 바이너리. spike를 ~/.local/share/spikes/에 저장합니다.

위젯 — 14KB gzipped 순수 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

자체 호스팅

자체 백엔드를 원하시나요? 명령 하나면 됩니다:

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

D1 데이터베이스, 인증, Stripe 결제 통합을 포함한 전체 설정은 자체 호스팅 가이드를 참조하세요.

Share와 Deploy Cloudflare 중 무엇을 선택할까?

아무 설정 없이 즉시 공유하려면 **spikes share**를 사용하세요. 파일은 spikes.sh에 업로드되어 당사 인프라에서 제공됩니다. 빠른 리뷰, 클라이언트 피드백, 또는 백엔드를 관리하고 싶지 않을 때 적합합니다.

데이터 격리(피드백이 Cloudflare 계정에 유지됨), 사용자 지정 도메인, 또는 인프라에 대한 완전한 제어가 필요하다면 **spikes deploy cloudflare**를 사용하세요. 자체 호스팅에는 Cloudflare 계정과 일회성 배포 설정이 필요합니다.


변경 사항 (최근 개편)

  • 보안: PBKDF2 비밀번호 해싱, 경로 탐색(path traversal) 수정, XSS 보호

  • 인증: 매직 링크 인증(기억할 비밀번호 없음)

  • 결제: Pro 등급 지원을 포함한 Stripe 통합

  • 테스트: CLI 테스트 스위트(Rust) + Worker 테스트 스위트(../spikes-hosted/worker)

  • 아키텍처: 관심사가 명확히 분리된 모듈식 worker

  • CI/CD: 자동화된 테스트 및 배포 파이프라인


상세 문서


왜 Spikes인가

마찰 제로

스크립트 태그 하나, 가입 불필요, 빌드 단계 없음

어디서나 작동

file://, localhost, 모든 도메인

정밀함

정확한 CSS 선택자를 사용한 요소 단위 피드백

에이전트 네이티브

어디서나 JSON, 파이프, 쿼리 가능한 CLI

당신의 인프라

셀프 호스팅 또는 호스팅 서비스 — 선택은 당신의 몫

초소형

위젯은 gzip 기준 14KB

프라이버시 보호

추적 없음, 당신의 데이터는 당신의 것


가격

평생 무료. 더 원한다면 Pro.

시작하려면 계정이 필요하지 않습니다. Pro 기능이 필요할 때 로그인하세요.

무료

Pro

가격

영원히 $0

원하는 만큼 지불

공유

5

무제한

공유당 Spikes 수

1,000

무제한

위젯 + CLI

전체

전체

셀프 호스팅

지원

지원

비밀번호 보호

—

지원

웹훅

—

지원

배지 제거

—

지원

MIT 라이선스. 결제는 감사의 표현이지 접근 권한이 아닙니다.

준비되면 spikes upgrade. 부담 없이요.


웹사이트 · 문서 · GitHub · 이슈

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.
    -