spikes-mcp
/ Spikes
AI 지원 개발을 위한 피드백 루프
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 spikes2. 프로젝트 초기화
spikes init # Defaults to hosted spikes.sh
# spikes init --self-host # Opt out — scaffold a self-hosted config insteadspikes 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:38474. 피드백 수집 및 활용
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 doneCLI 명령어
명령어 | 설명 |
|
|
| 피드백 목록 표시 ( |
| 단일 spike 세부 정보 표시 |
| JSON/CSV/JSONL/Cursor/Claude 컨텍스트로 내보내기 |
| 피드백이 가장 많은 요소 |
| 모든 리뷰어 목록 |
| HTML 파일에서 위젯 추가/제거 ( |
| 로컬 개발 서버 ( |
| AI 에이전트 통합을 위한 MCP 서버 시작 |
| 원격 엔드포인트와 동기화 |
| 즉시 공유를 위해 spikes.sh에 업로드 |
| 인증 관리 |
| Stripe를 통한 Pro 등급 구독 |
| 자체 호스팅 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 installedMCP 서버 — 9가지 도구
spikes mcp serve는 9가지 도구를 노출하는 Model Context Protocol 서버를 시작합니다:
도구 | 용도 |
| 필터(페이지, 평점, 미해결)로 피드백 목록 표시 |
| 특정 CSS 선택자에 대한 피드백 가져오기 |
| 피드백이 가장 많은 요소 찾기 |
| 프로그래밍 방식으로 피드백 생성 |
| 피드백을 해결됨으로 표시 |
| spike 제거 |
| 파일 업로드, 공유 가능한 URL 받기 |
| 활성 공유 보기 |
| 사용량 통계, 한도, 지출 확인 |
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 agentsAPI 키
에이전트는 고유한 신원을 갖습니다. 이메일도, 매직 링크도, 사람의 개입도 필요 없습니다:
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용 구성 생성
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>속성 | 설명 | 기본값 |
| 프로젝트 키로 피드백 그룹화 |
|
| 버튼 모서리: |
|
| 강조 색상(모든 CSS 색상) |
|
| 모달 테마: |
|
| 리뷰어 이름 사전 설정 | (사용자에게 입력 요청) |
| 다중 리뷰어 동기화용 백엔드 URL. 선택 사항 — |
|
| 프롬프트에 이메일 필드 표시 |
|
| 리뷰 모드 기능 활성화 |
|
| 가장자리에서 버튼 오프셋 | — |
전체 문서는 위젯 속성 참조를 참조하세요.
아키텍처
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.ymlWorker
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 deployD1 데이터베이스, 인증, 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: 자동화된 테스트 및 배포 파이프라인
상세 문서
CLI 레퍼런스 — 전체 명령어 문서
위젯 속성 — 모든 구성 옵션
셀프 호스팅 가이드 — 자체 백엔드 배포
API 레퍼런스 — REST API 문서
롤백 가이드 — 긴급 절차
왜 Spikes인가
마찰 제로 | 스크립트 태그 하나, 가입 불필요, 빌드 단계 없음 |
어디서나 작동 |
|
정밀함 | 정확한 CSS 선택자를 사용한 요소 단위 피드백 |
에이전트 네이티브 | 어디서나 JSON, 파이프, 쿼리 가능한 CLI |
당신의 인프라 | 셀프 호스팅 또는 호스팅 서비스 — 선택은 당신의 몫 |
초소형 | 위젯은 gzip 기준 14KB |
프라이버시 보호 | 추적 없음, 당신의 데이터는 당신의 것 |
가격
평생 무료. 더 원한다면 Pro.
시작하려면 계정이 필요하지 않습니다. Pro 기능이 필요할 때 로그인하세요.
무료 | Pro | |
가격 | 영원히 $0 | 원하는 만큼 지불 |
공유 | 5 | 무제한 |
공유당 Spikes 수 | 1,000 | 무제한 |
위젯 + CLI | 전체 | 전체 |
셀프 호스팅 | 지원 | 지원 |
비밀번호 보호 | — | 지원 |
웹훅 | — | 지원 |
배지 제거 | — | 지원 |
MIT 라이선스. 결제는 감사의 표현이지 접근 권한이 아닙니다.
준비되면 spikes upgrade. 부담 없이요.
MIT 라이선스 · AI와 함께 작업하는 개발자를 위해 만들어졌습니다.
This server cannot be installed
Maintenance
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
- AlicenseNot gradedqualityAmaintenanceMCP server that enables AI coding agents to read and write to a local-first HTML/CSS design canvas, bridging visual design and code generation.MIT
- AlicenseNot gradedqualityDmaintenanceA 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.5MIT
- AlicenseNot gradedqualityAmaintenanceA 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.2MIT
- FlicenseNot gradedqualityCmaintenanceAn 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.
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.
Latest Blog Posts
- Who's Calling? MCP Hosts Are an Identity Blind Spot (And the Spec Knows It)By Om-Shree-0709 on .mcpAgent IdentityOAuth 2.1
- Your AI Chatbot Just Exposed Your CEO's Salary to an InternBy Om-Shree-0709 on .Agent IdentityMCP SecurityOAuth Delegation
- Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)By Om-Shree-0709 on .Agentic AiPrompt InjectionWebAssembly
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