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

사용량 통계, 한도, 지출 확인

stdioHTTP 전송, 로컬원격 데이터 모드를 지원합니다:

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와 함께 작업하는 개발자를 위해 만들어졌습니다.

A
license - permissive license
Not graded
quality - not tested
B
maintenance

Maintenance

Maintainers
8dResponse time
2wRelease cycle
5Releases (12mo)
Commit activity

Resources

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Related MCP Servers

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

View all related MCP servers

Related MCP Connectors

  • Hosted MCP for creating, checking, deploying, and hosting static sites for AI agents.

  • AI Reasoning Cache & Consensus Layer with 11 MCP tools via Streamable HTTP.

  • Hosted MCP endpoint with realistic fake data for prototyping agents. 12 tools, no setup.

View all MCP Connectors

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/bierlingm/spikes'

If you have feedback or need assistance with the MCP directory API, please join our Discord server