Neo

모든 웹 앱을 API로 전환합니다. 공식 API가 필요 없습니다. 브라우저 자동화도 필요 없습니다.

Neo는 브라우저가 만드는 모든 API 호출을 수동적으로 캡처하고, 패턴을 학습하며, AI(또는 사용자)가 직접 재생할 수 있도록 하는 Chrome 확장 프로그램입니다.

문제

현재 AI 에이전트가 웹 앱을 조작하는 방식은 두 가지이며, 둘 다 좋지 않습니다:

접근 방식	문제점
공식 API	대부분의 SaaS에는 API가 없거나 기능의 10%만 노출합니다
브라우저 자동화	스크린샷 → OCR → 클릭. 느리고 깨지기 쉬우며 UI가 변경될 때마다 망가집니다

Neo는 세 번째 방법입니다. 모든 웹 앱에는 이미 완전한 내부 API가 있습니다 — 프론트엔드는 무언가를 클릭할 때마다 이를 호출합니다. Neo는 이러한 호출을 캡처하여 재생 가능하게 만듭니다.

v2: 이제 UI 자동화 탑재. Neo v2는 접근성 트리 기반 UI 레이어를 추가합니다 — snapshot, click, fill, type, press, hover, scroll, select, screenshot, get, wait. API가 존재하면 직접 사용하고, 없으면 동일한 CLI를 통해 UI를 구동할 수 있습니다. 하나의 도구, 두 가지 레이어.

작동 방식

Browse normally → Neo records all API traffic → Schema auto-generated → AI replays APIs directly
                                                                      → Or drives UI via a11y tree

1. 캡처 (항상 켜짐)

Chrome 확장 프로그램은 모든 fetch() 및 XMLHttpRequest를 가로챕니다 — URL, 헤더, 요청/응답 본문, 타이밍, 호출을 트리거한 DOM 요소까지 포함합니다.

2. 학습

도메인에서 neo-schema를 실행하면 API 맵(엔드포인트, 필요한 인증 헤더, 쿼리 매개변수, 응답 구조, 오류 코드)이 자동 생성됩니다.

3. 실행

Chrome DevTools Protocol을 통해 브라우저 탭 컨텍스트 내에서 API 호출을 실행합니다. 쿠키, CSRF 토큰, 세션 인증이 모두 자동으로 상속됩니다. 토큰 관리가 필요 없습니다.

지원되는 브라우저

브라우저	유형	최적 용도
Chrome / Chromium	전체 브라우저	API 캡처 + UI 자동화 (기본)
Lightpanda	헤드리스 (Zig)	AI 에이전트, 스크래핑 — 11배 빠름, 9배 적은 메모리

빠른 시작

git clone https://github.com/4ier/neo.git
cd neo && npm install && npm run build
npm link  # makes `neo` available globally

확장 프로그램 로드:

chrome://extensions 열기
'개발자 모드' 활성화
'압축해제된 확장 프로그램 로드' 클릭 → extension/dist/ 선택
아무 웹사이트나 탐색 — Neo가 즉시 캡처 시작

Lightpanda (헤드리스, 확장 프로그램 필요 없음)

# Install Lightpanda
curl -L -o lightpanda https://github.com/lightpanda-io/browser/releases/download/nightly/lightpanda-x86_64-linux
chmod +x lightpanda && sudo mv lightpanda /usr/local/bin/

# Configure Neo to use Lightpanda
# In ~/.neo/config.json:
# { "chromePath": "/usr/local/bin/lightpanda", "browserType": "lightpanda", "cdpPort": 9222 }

neo start    # launches Lightpanda CDP server
neo connect  # attach to it
neo open https://example.com
neo snapshot # full a11y tree

CLI 도구

모든 명령어는 단일 CLI인 neo <command>를 통해 실행됩니다.

CDP(Chrome DevTools Protocol)가 활성화된 브라우저가 필요합니다.

# --- Connection & Sessions ---
neo connect [port]                          # Connect to CDP, save session
neo connect --electron <app-name>           # Auto-discover Electron app's CDP port
neo launch <app> [--port N]                 # Launch Electron app with CDP enabled
neo discover                                # Find reachable CDP endpoints on localhost
neo sessions                                # List saved sessions
neo tab                                     # List CDP targets in active session
neo tab <index> | neo tab --url <pattern>   # Switch active tab target
neo inject [--persist] [--tab pattern]      # Inject Neo capture script into target

# --- Capture & Traffic ---
neo status                                  # Overview of captured data
neo capture summary                         # Quick overview
neo capture list github.com --limit 10      # Shows IDs for replay/detail
neo capture list --since 1h                 # Time-filtered
neo capture domains
neo capture search "CreateTweet" --method POST
neo capture watch x.com                     # Live tail (like tail -f)
neo capture stats x.com                     # Method/status/timing breakdown
neo capture export x.com --since 2h > x.json
neo capture export x.com --format har > x.har  # HAR 1.2 for Postman/devtools
neo capture import x-captures.json
neo capture prune --older-than 7d
neo capture gc x.com [--dry-run]            # Smart dedup

# --- API Replay & Execution ---
neo replay <capture-id> --tab x.com         # Replay a captured call
neo exec <url> --method POST --body '{...}' --tab example.com --auto-headers
neo api x.com HomeTimeline                  # Smart call (schema lookup + auto-auth)

# --- Schema & Analysis ---
neo schema generate x.com                   # Generate from captures
neo schema generate --all                   # Batch all domains
neo schema show x.com [--json]
neo schema openapi x.com                    # Export OpenAPI 3.0 spec
neo schema diff x.com                       # Changes from previous version
neo schema coverage                         # Domains with/without schemas
neo label x.com [--dry-run]                 # Semantic endpoint labels
neo flows x.com [--window 5000]             # API call sequence patterns
neo deps x.com [--min-confidence 1]         # Response→request data dependencies
neo workflow discover|show|run <name>       # Multi-step workflow discovery & replay
neo suggest x.com                           # AI capability analysis
neo export-skill x.com                      # Generate agent-ready SKILL.md

# --- UI Automation (v2) ---
neo snapshot [-i] [-C] [--json]             # A11y tree with @ref mapping
neo click @ref [--new-tab]                  # Click element by @ref
neo fill @ref "text"                        # Clear + fill input
neo type @ref "text"                        # Append text to input
neo press <key>                             # Keyboard key (supports Ctrl+a, Enter, etc.)
neo hover @ref                              # Hover over element
neo scroll <dir> [px] [--selector css]      # Scroll by direction
neo select @ref "value"                     # Set dropdown value
neo screenshot [path] [--full] [--annotate] # Capture screenshot
neo get text @ref | neo get url | neo get title  # Extract info
neo wait @ref | neo wait --load networkidle | neo wait <ms>  # Wait for element/load/time

# --- Page Interaction ---
neo read github.com                         # Extract readable text
neo eval "document.title" --tab github.com  # Run JS in page
neo open https://example.com                # Open URL

# --- Mock & Bridge ---
neo mock x.com [--port 8080 --latency 200]  # Mock server from schema
neo bridge [--json] [--interactive]          # Real-time WebSocket capture stream

# --- Diagnostics ---
neo doctor                                  # Check Chrome, extension, schemas
neo reload                                  # Reload extension from CLI
neo tabs [filter]                           # List open Chrome tabs

세션 및 멀티 앱 지원

Neo는 Chrome뿐만 아니라 CDP를 지원하는 모든 앱( Electron 앱 포함)에서 작동합니다:

# Launch VS Code with CDP and connect
neo launch code --port 9230
neo snapshot                # See VS Code's accessibility tree
neo click @14               # Click a menu item

# Or connect to an already-running Electron app
neo connect --electron slack

# Inject Neo's capture script into any CDP target
neo inject --persist        # Survives page navigation
neo inject --tab slack      # Target specific tab

세션은 자동으로 저장됩니다. --session을 사용하여 전환할 수 있습니다:

neo --session vscode snapshot
neo --session chrome api x.com HomeTimeline

UI 자동화 (v2)

Neo v2는 접근성 트리를 기반으로 한 완전한 UI 상호작용 레이어를 추가합니다 — 스크린샷, 좌표, 픽셀 매칭이 필요 없습니다:

# 1. Take a snapshot — each interactive element gets a @ref
neo snapshot
#  @1  button "Sign in"
#  @2  textbox "Search"
#  @3  link "Pricing"

# 2. Interact by @ref
neo click @1
neo fill @2 "AI agents"
neo press Enter
neo screenshot results.png --full

이를 통해 AI 에이전트는 빠르고 의미론적인 방식으로 모든 UI와 상호작용할 수 있습니다. API 캡처와 결합하여 이중 채널 접근 방식을 사용할 수 있습니다: API가 있으면 사용하고, 없으면 UI로 대체합니다.

브리지는 확장 프로그램과 CLI 사이에 지속적인 WebSocket 채널을 생성합니다. 확장 프로그램은 ws://127.0.0.1:9234에 자동으로 연결되고 모든 캡처를 실시간으로 스트리밍합니다. 대화형 모드에서는 확장 프로그램에 직접 쿼리할 수 있습니다: ping, status, capture.count, capture.list, capture.domains, capture.search, capture.clear.

아키텍처

┌─────────────────────────────────────┐
│  Chrome / Electron App (CDP)         │
│                                      │
│  inject/interceptor.ts               │
│    ├─ Monkey-patches fetch & XHR     │
│    ├─ Intercepts WebSocket/SSE       │
│    ├─ Tracks DOM triggers (click →   │
│    │   API correlation)              │
│    └─ Records full request/response  │
│                                      │
│  content/index.ts                    │
│    └─ Bridges page ↔ extension       │
│                                      │
│  background/index.ts                 │
│    ├─ Persists to IndexedDB (Dexie)  │
│    ├─ Per-domain cap (500 entries)   │
│    └─ WebSocket Bridge client        │
│                                      │
└──────────────┬──────────────────────┘
               │ Chrome DevTools Protocol
┌──────────────┴──────────────────────┐
│  CLI: neo (Node.js)                  │
│                                      │
│  Layer 1: API Capture & Replay       │
│  ├─ neo capture → traffic management │
│  ├─ neo schema  → API discovery      │
│  ├─ neo exec    → execute in browser │
│  ├─ neo api     → smart schema call  │
│  ├─ neo replay  → re-run captured    │
│  └─ neo flows/deps → pattern analysis│
│                                      │
│  Layer 2: UI Automation (v2)         │
│  ├─ neo snapshot → a11y tree + @refs │
│  ├─ neo click/fill/type/press/hover  │
│  ├─ neo scroll/select/screenshot     │
│  └─ neo get/wait                     │
│                                      │
│  Session Management                  │
│  ├─ neo connect/launch/discover      │
│  ├─ neo tab → target switching       │
│  └─ neo inject → script injection    │
│                                      │
└──────────────┬──────────────────────┘
               │
┌──────────────┴──────────────────────┐
│  AI Agent (OpenClaw / any LLM)       │
│  ├─ API-first: schema → exec/api     │
│  ├─ UI fallback: snapshot → click    │
│  └─ Dual-channel automation          │
└──────────────────────────────────────┘

실제 데모

캡처된 API를 통해 트윗 게시

# 1. Browse X normally — Neo captures GraphQL mutations
neo schema show api.x.com

# 2. Find the CreateTweet endpoint
neo capture search "CreateTweet" --method POST

# 3. Replay with the original auth (cookies inherited automatically)
neo replay abc123 --tab x.com

# 4. Or craft a new call with auto-detected auth headers
neo exec "https://x.com/i/api/graphql/.../CreateTweet" \
  --method POST --auto-headers \
  --body '{"variables":{"tweet_text":"Hello from Neo!"},...}'

버튼의 기능 이해

Neo의 트리거 추적은 UI 상호작용을 API 호출에 매핑합니다:

neo schema show github.com
# Output includes:
#   POST /repos/:owner/:repo/star  (3x, 280ms)
#     ← click button.js-social-form "Star" (3x)

API 트래픽 실시간 모니터링

neo capture watch api.openai.com
# 14:23:01  POST 200 /v1/chat/completions (1230ms)
# 14:23:05  SSE_MSG 200 /v1/chat/completions (0ms) [sse]

저장

도메인당 상한: 도메인당 최대 500개 캡처, 오래된 것부터 자동 삭제
본문 제한: 응답 본문은 100KB로 제한
위치: Chrome의 IndexedDB (neo-capture-v01 데이터베이스)
스키마: 기기 간 유지를 위해 JSON 파일로 내보내기 가능

스마트 필터링

인터셉터는 자동으로 노이즈를 무시합니다:

정적 자산 (이미지, 폰트, CSS, JS 번들)
분석/추적 (Google Analytics, Meta Pixel, Sentry 등)
브라우저 내부 (chrome-extension://, data:, blob:)
속도 제한: URL 패턴당 분당 최대 3개 캡처 (폴링 엔드포인트 과다 방지)

보안 및 개인정보 보호

Neo는 완전히 로컬에서 실행됩니다 — 외부 서버, 원격 측정, 데이터가 머신을 떠나지 않습니다.

Neo가 캡처하는 것: 브라우저가 모든 웹사이트에서 만드는 모든 fetch/XHR/WebSocket 호출. 강력하지만 의도적으로 침입적입니다.

인증 헤더 편집 (v1.1.0+): 인증 헤더 값(Bearer 토큰, CSRF 토큰, 쿠키, 세션 ID)은 캡처 시점에 저장 전에 편집됩니다. IndexedDB에는 헤더 이름만 저장되고, 값은 저장되지 않습니다. --auto-headers로 API 호출을 실행하면 CDP를 통해 브라우저에서 실시간으로 라이브 인증 헤더를 가져옵니다 — 저장된 자격 증명을 재생하지 않습니다.

알아야 할 사항:

권장 사항:

캡처된 도메인을 주기적으로 검토: neo capture domains
민감한 캡처 제거: neo capture clear banksite.com
다른 사람이 로컬로 접근할 수 있는 공유 기계에 Neo를 설치하지 마십시오
CDP 포트(9222)는 localhost 이상으로 노출되지 않아야 합니다

Neo는 개인정보 보호 표면을 능력과 교환하는 개발자 도구입니다. 의식적으로 사용하십시오.

기술 스택

TypeScript, Vite (멀티 엔트리 빌드)
Chrome Manifest V3
Dexie.js (IndexedDB 래퍼)
CLI ↔ 브라우저 통신을 위한 Chrome DevTools Protocol
런타임에 백엔드 서버나 외부 종속성 없음

로드맵

라이선스

MIT

캡처 범위	`<all_urls>` — Neo는 은행, 이메일, 의료 포털을 포함한 모든 웹사이트의 트래픽을 봅니다
콘텐츠 스크립트	fetch/XHR을 가로채기 위해 `MAIN` 세계(페이지와 JS 컨텍스트 공유)에서 실행됩니다
CDP 포트	CLI는 포트 9222의 Chrome이 필요합니다 — 모든 로컬 프로세스가 이 포트에 연결할 수 있습니다
응답 본문	IndexedDB에 저장되며(100KB로 제한) API 응답에서 개인 데이터가 포함될 수 있습니다
스키마 파일	엔드포인트 구조(경로, 헤더 이름, 응답 형태)만 저장하며 자격 증명이나 사용자 데이터는 저장하지 않습니다
내보내기	`neo capture export`는 기본적으로 인증을 편집합니다; `--include-auth`는 명시적 동의가 필요합니다

인기

neo

Neo

문제