{"id":49002526,"url":"https://github.com/pyanchor/pyanchor","last_synced_at":"2026-04-25T15:00:48.866Z","repository":{"id":352260526,"uuid":"1214441248","full_name":"pyanchor/pyanchor","owner":"pyanchor","description":"Agent-agnostic AI live-edit sidecar for Next.js. Anchor edits straight into your running app.","archived":false,"fork":false,"pushed_at":"2026-04-24T13:40:08.000Z","size":2744,"stargazers_count":4,"open_issues_count":1,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-04-24T14:39:08.918Z","etag":null,"topics":["agent","ai","claude-code","developer-tools","express","live-edit","nextjs","openclaw","overlay","self-hosted","shadow-dom","sidecar","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pyanchor.png","metadata":{"files":{"readme":"README-ko.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":"audit-codex-static.md","citation":null,"codeowners":null,"security":".github/SECURITY.md","support":null,"governance":null,"roadmap":"docs/roadmap.md","authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-04-18T15:26:32.000Z","updated_at":"2026-04-24T13:40:09.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/pyanchor/pyanchor","commit_stats":null,"previous_names":["pyanchor/pyanchor"],"tags_count":91,"template":false,"template_full_name":null,"purl":"pkg:github/pyanchor/pyanchor","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pyanchor%2Fpyanchor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pyanchor%2Fpyanchor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pyanchor%2Fpyanchor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pyanchor%2Fpyanchor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pyanchor","download_url":"https://codeload.github.com/pyanchor/pyanchor/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pyanchor%2Fpyanchor/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32265977,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-25T09:15:33.318Z","status":"ssl_error","status_checked_at":"2026-04-25T09:15:31.997Z","response_time":59,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["agent","ai","claude-code","developer-tools","express","live-edit","nextjs","openclaw","overlay","self-hosted","shadow-dom","sidecar","typescript"],"created_at":"2026-04-18T19:01:59.364Z","updated_at":"2026-04-25T15:00:48.859Z","avatar_url":"https://github.com/pyanchor.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n# Pyanchor 🦞\n\n**웹 앱용 agent-agnostic AI 라이브 편집 사이드카.**\n*실행 중인 앱에 직접 편집을 anchor — Next.js, Vite, 또는 직접 만든 스택.*\n\n[![npm version](https://img.shields.io/npm/v/pyanchor.svg?style=flat-square\u0026color=cb3837)](https://www.npmjs.com/package/pyanchor)\n[![npm downloads](https://img.shields.io/npm/dm/pyanchor.svg?style=flat-square)](https://www.npmjs.com/package/pyanchor)\n[![License: MIT](https://img.shields.io/badge/license-MIT-yellow.svg?style=flat-square)](./LICENSE)\n\n[**English**](./README.md) · [**문서**](#-문서) · [**빠른 시작**](#-빠른-시작) · [**지원 agent**](#지원-agent) · [**보안**](#-보안)\n\n\u003c/div\u003e\n\n---\n\n\u003e Pyanchor는 실행 중인 웹 앱(Next.js / Vite / Astro / 또는 install + build\n\u003e 명령이 있는 어떤 스택)에 붙이는 작은 Express 사이드카입니다.\n\u003e 한 줄짜리 `\u003cscript\u003e` 태그가 페이지 안에 overlay를 주입(Shadow DOM, 스타일\n\u003e 충돌 없음)하고, 사용자는 UI element를 가리킨 뒤 자연어로 변경을 설명하면,\n\u003e AI 코딩 agent가 편집 → build → 프론트엔드 재시작 또는 PR 생성까지 — 누구도\n\u003e 브라우저를 떠나지 않고 끝납니다.\n\n**self-host + prod-attached** 워크플로우용. SaaS도, IDE 플러그인도 아님.\n\n## 누구를 위한가?\n\n세 가지 겹치는 use case. pyanchor가 셋 다 다루는 이유는 **페이지 자체가\n에디터가 된다**는 wedge 때문 — IDE 필요 없음.\n\n- **자기 deploy를 직접 dogfood하는 솔로 dev.** \"보고 → 클릭 →\n  ship\" 가장 빠른 루프. `apply` 모드는 라이브 앱에 직접 rsync.\n- **\"이거 좀 바꿔주세요\" 콜센터에 지친 프론트엔드 dev.** 요청자에게\n  token 하나 쥐어주고, 페이지 가리키게 하고, 셀프 서비스시키세요.\n  `PYANCHOR_OUTPUT_MODE=pr` 설정하면 모든 편집이 PR로 → 평소 cadence로\n  review만 → 깜짝 prod 쓰기 없음.\n- **디자이너, PM, 백엔드 dev** — 프론트엔드 팀 안 건드리고 작은 UI\n  변경만 직접 하고 싶은 사람들. 페이지 열고, floating 버튼 클릭,\n  \"이 버튼 보라색으로 + 로딩 스피너 추가\" 입력 → 1분 안에 PR.\n\n마지막이 진짜 pyanchor를 만든 이유. *\"about 페이지 카피 좀 바꿔줘\"*\nSlack ping에 지친 author가 만들었음. 이제 요청자가 직접 하고, 프론트엔드는\nPR review만.\n\n## Cursor / v0 / Lovable 대신 왜 이걸?\n\n|              | 어디서 동작           | 무엇을 편집           | 누가 편집할 수 있나                          |\n| ------------ | --------------------- | --------------------- | -------------------------------------------- |\n| Cursor       | 에디터                | 워크스페이스의 파일   | IDE를 켠 dev                                 |\n| v0 / Lovable | 벤더 클라우드         | 새로 만드는 앱        | 벤더 계정 소유자                             |\n| **Pyanchor** | 지금 보고 있는 페이지 | 이미 ship한 앱        | **token + (선택) PR review를 가진 누구나**   |\n\n스테이징의 라이브 로그인 페이지를 가리키며 *\"다크 모드로 바꿔\"*라고\n하고 싶은데, 코드는 절대 인프라 밖으로 나가면 안 되고, Cursor seat 가진\n사람만 쓸 수 있는 게 아니어야 한다면 — 이게 맞습니다.\n\n## 동작 원리\n\n```\n┌─────────────────────────┐     ┌──────────────────────────┐\n│  당신의 웹 앱            │     │  Pyanchor 사이드카        │\n│  (Next.js / Vite /      │     │  (port 3010, localhost)  │\n│   Astro / 직접 스택)     │     │                          │\n│                         │     │  Express 서버             │\n│  layout/index 주입:      │     │   /_pyanchor/bootstrap.js│\n│   \u003cscript               │ ──\u003e │   /_pyanchor/overlay.js  │\n│     src=\"/_pyanchor/    │     │   /_pyanchor/api/edit    │\n│     bootstrap.js\"       │     │   /api/admin/*           │\n│     defer /\u003e            │     │   /healthz + /readyz     │\n│                         │     │                          │\n│  Shadow DOM overlay     │     │  Workspace + Worker      │\n│  → 클릭 → 프롬프트       │ \u003c── │   AgentRunner adapter    │\n│                         │     │   (codex/claude/...)     │\n└─────────────────────────┘     │   build + apply / PR     │\n                                └──────────────────────────┘\n```\n\n## 🚀 빠른 시작\n\n```bash\n# 1. 설치 (dev dep — pyanchor는 dev-time 사이드카, prod 번들 미포함)\nnpm install --save-dev pyanchor\n\n# 2. 인터랙티브 init — 7개 prompt를 enter로 다닥\nnpx pyanchor init\n\n# 3. 진단 — 자동으로 cwd .env 로드\nnpx pyanchor doctor\n\n# 4. 사이드카 시작\nnpx pyanchor\n\n# 5. init이 알려준 bootstrap script 태그 + dev proxy 1줄씩\n#    layout.tsx (Next.js) / index.html (Vite) / Base.astro (Astro) 등에 paste\n\n# 6. 일반 dev 명령으로 앱 띄우기 (npm run dev / pnpm dev)\n#    브라우저: 우하단 anchor 아이콘 → 클릭 → 프롬프트 입력 → 30초 안에 편집 적용\n```\n\n5개 필수 env (`pyanchor init`이 자동 작성):\n- `PYANCHOR_TOKEN` — bearer auth secret\n- `PYANCHOR_AGENT` — `codex` / `claude-code` / `openclaw` / `aider` / `gemini`\n- `PYANCHOR_APP_DIR` — 당신 앱의 root\n- `PYANCHOR_WORKSPACE_DIR` — agent가 편집하는 scratch 디렉토리\n- `PYANCHOR_RESTART_SCRIPT` — 편집 후 프론트엔드 reload 방법\n\n나머지 ~60개 env는 모두 sensible default 있음. `.env.example` 참고.\n\n## 지원 agent\n\n5개 백엔드. `PYANCHOR_AGENT=\u003cname\u003e` 한 줄로 swap.\n\n| Agent         | 설치                                                 | 인증                                |\n| ------------- | ---------------------------------------------------- | ----------------------------------- |\n| `codex`       | `npm i -g @openai/codex`                             | `codex login` (ChatGPT account 또는 OpenAI API key) |\n| `claude-code` | `npm i @anthropic-ai/claude-agent-sdk`               | `ANTHROPIC_API_KEY` 또는 Claude OAuth |\n| `openclaw`    | OpenClaw 자체 설치 (per-agent profiles)              | OpenClaw OAuth                      |\n| `aider`       | `pip install aider-chat`                             | `OPENAI_API_KEY` 등                 |\n| `gemini`      | `npm i -g @google/gemini-cli`                        | `GEMINI_API_KEY` 또는 `gemini auth login` |\n\n## 지원 framework\n\n5개 first-class profile + override path. `PYANCHOR_FRAMEWORK=\u003cname\u003e`.\n\n| Framework   | install                            | build              | 워크스페이스 제외 |\n| ----------- | ---------------------------------- | ------------------ | ----------------- |\n| `nextjs`    | `corepack yarn install --frozen…`  | `next build`       | `.next`           |\n| `vite`      | `npm install`                      | `npm run build`    | `dist`, `.vite`   |\n| `astro`     | `npm install`                      | `npx astro build`  | `dist`, `.astro`  |\n| `sveltekit` | `npm install`                      | `npm run build`    | `.svelte-kit`, `build`, `dist`, `.vite` |\n| `remix`     | `npm install`                      | `npm run build`    | `build`, `.cache` |\n| `nuxt`      | `npm install`                      | `npx nuxt build`   | `.nuxt`, `.output`, `dist` |\n\n다른 스택은 `PYANCHOR_INSTALL_COMMAND` + `PYANCHOR_BUILD_COMMAND` env로\noverride.\n\n## 출력 모드\n\n| 모드     | 동작                                                              |\n| -------- | ----------------------------------------------------------------- |\n| `apply`  | workspace → app dir rsync + restart 스크립트 실행 (기본)          |\n| `pr`     | git push + `gh pr create` (자동 merge 안 함; 사람이 review)       |\n| `dryrun` | build만; rsync도 PR도 안 함 (agent 흐름 검증용)                   |\n\n`PYANCHOR_OUTPUT_MODE=\u003cmode\u003e` 또는 init prompt에서 선택.\n\n## 보안\n\n- **token = privilege**: `PYANCHOR_TOKEN`이 유일한 인증\n- **9-layer 접근 제어** (`docs/ACCESS-CONTROL.md`): token → bind →\n  origin → trusted hosts → gate cookie → bootstrap fail-safe →\n  reverse proxy → systemd IPAddress → HMAC actor signing\n- **non-loopback bind는 origin 허용목록 필수** (v0.18.0+, fail-closed)\n- **destructive path guard** (v0.33.0+): system dir (`/`, `/home`,\n  `/var`, ...) 거부 → typo로 `rm -rf`되는 사고 방지\n- **provenance attested**: 모든 npm tarball은 Sigstore + GitHub\n  Actions로 signed (`npm view pyanchor@latest --json | jq\n  '.dist.attestations'`)\n\n자세한 위협 모델 + 책임 있는 공개 → [`.github/SECURITY.md`](./.github/SECURITY.md).\n\n## 📚 문서\n\n- [`docs/TROUBLESHOOTING.md`](./docs/TROUBLESHOOTING.md) — 증상 →\n  진단 빠른 매핑\n- [`docs/PRODUCTION-DEPLOYMENT.md`](./docs/PRODUCTION-DEPLOYMENT.md)\n  — systemd / Docker / Coolify 배포 레시피\n- [`docs/ACCESS-CONTROL.md`](./docs/ACCESS-CONTROL.md) — 9-layer\n  접근 제어 자세히\n- [`docs/codex-setup.md`](./docs/codex-setup.md) — codex 백엔드\n- [`docs/claude-code-setup.md`](./docs/claude-code-setup.md) —\n  claude-code 백엔드\n- [`docs/openclaw-setup.md`](./docs/openclaw-setup.md) — openclaw\n- [`docs/aider-setup.md`](./docs/aider-setup.md) — aider\n- [`docs/gemini-setup.md`](./docs/gemini-setup.md) — gemini\n- [`docs/integrate-with-vite.md`](./docs/integrate-with-vite.md) —\n  Vite 통합 자세히\n\n## 라이브 데모\n\n[`https://pyanchor.pyan.kr`](https://pyanchor.pyan.kr) — recipe 1\n(systemd + nginx + magic-word gate cookie + 정적 React)로 운영 중.\ngate 쿠키 발급 후 페이지 element 클릭하면 codex 백엔드로 라이브 편집\n사이클 동작.\n\n## 라이선스\n\nMIT. © PYAN.\n\n## 영문 문서\n\n전체 영문 README는 [`README.md`](./README.md) — 이 한국어 README는\n핵심 섹션만 번역.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpyanchor%2Fpyanchor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpyanchor%2Fpyanchor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpyanchor%2Fpyanchor/lists"}