Vibe coding thường kết thúc bằng hàng chục lần grep và đọc file sai. CodeGraph — đồ thị index local, MCP cho Claude Code và Cursor — giúp agent trả lời “luồng này chạy thế nào?” trong vài lần codegraph_explore thay vì đoán mò.
Vibe coding without getting lost: how I wired CodeGraph into Claude Code & Cursor
After moving to Spec-Driven Development with SpecKit, I knew what to build before the agent wrote code. One gap remained: the agent still had to hunt through the tree — grep, ls, random file reads — until it (hopefully) hit the right module.
On RabbitSVN and other large native codebases, “good prompts + bad navigation” is a risky mix: you fix the symptom in the wrong layer or miss callers during a refactor.
I added CodeGraph — Colby McHenry’s open-source local semantic code graph — so the agent gets a map, not a maze. This post is how I use it to keep vibe coding directed, not to abolish fast iteration.
1. What vibe coding still lacks after you have a spec
Specs answer what and why. Implementation still needs where and how the existing code connects.
| Symptom with grep + Read only | Outcome |
|---|---|
| Many tool calls | Bloated context, higher token use, spec drifts out of focus |
| Irrelevant files | Locally pretty patches that break cross-module contracts |
| Ignored blast radius | Tiny API change breaks UI or sync paths elsewhere |
CodeGraph does not replace your judgment. It pre-indexes symbols, call paths, routes, and impact into on-disk SQLite, then exposes that via MCP (primarily codegraph_explore in Claude Code, Cursor, Codex, and others).
2. What CodeGraph is (short version)
- Code knowledge graph (Rust kernel, 20+ languages), stored under
.codegraph/— no code leaves your machine. - Auto-sync on file changes (watcher + debounce) so the index does not rot.
- Agent MCP: one primary tool —
codegraph_explore— returns line-numbered source, call paths between symbols, and a blast-radius summary in one call. - CLI + UI:
codegraph uilets you see the same graph the agent uses (callers, callees, flows).
My onboarding loop (CLI + MCP are two separate steps):
curl -fsSL …/install.sh | sh # or: npm i -g @colbymchenry/codegraph
codegraph install # MCP + hints in CLAUDE.md / AGENTS.md
cd your-project && codegraph init # .codegraph/ + graph build (per repo)
# Restart Claude Code or Cursor so the MCP server loads
Always check the official repo for the latest install steps.
Claude Code & Cursor
codegraph install auto-detects agents you have. I usually wire both:
codegraph install --target=claude,cursor --yes
| Step | Claude Code | Cursor |
|---|---|---|
After install | Restart the session / app so MCP loads | Restart Cursor |
| Agent hints | Installer adds a fenced section to CLAUDE.md | AGENTS.md / equivalent |
| Tool | codegraph_explore via MCP | Same MCP server, same tool name |
| Tip | If a fresh session “does not see” the tool, say “use codegraph explore first” — README documents alwaysLoad in ~/.claude.json to keep the tool warm from prompt one | Ensure CodeGraph MCP is enabled for the workspace |
codegraph install only configures agents — it does not index code. Each repo needs codegraph init (then auto-sync on save).
Clean removal: codegraph uninstall (drops MCP entries and instruction markers).
3. Workflow: SpecKit + CodeGraph for controlled vibe coding
The tools complement each other:
SpecKit: Constitution → Specify → Clarify → Plan → Tasks → Implement
CodeGraph: supports Plan + Implement — “where does X start?”, “who calls Y?”, “what breaks if I change Z?”
When I explicitly steer the agent to the graph:
- Before editing — trace from a UI action down to an SVN command (RabbitSVN is layered).
- While validating a plan — align
plan.mdwith real modules, not invented paths. - After a patch — quick impact check before merge, especially on shared utilities.
On Claude Code, a short “explore the call path from X to Y with CodeGraph” is usually enough for the model to hit MCP. On Cursor, same intent — confirm the CodeGraph MCP server is on for the project.
When I skip the graph: copy tweaks, one-off CSS, small site config — light vibe is fine; do not index a monorepo for a one-liner.
4. Case study: finding the “status icon” flow without an all-night grep
Same theme as my SpecKit post (file status / icons on huge folders), but from a code navigation angle:
Before CodeGraph: a prompt like “optimize status scan” → agent greps status, icon, SVN → reads 8–15 files → sometimes lands in networking instead of the existing queue/UI layer.
With CodeGraph: an explore-style question — “how does folder refresh trigger SVN status and update versioning icons?” → call path + snippets around entry points and the relevant worker/queue → implementation tasks attach to the modules the spec already targeted.
Subjective results (not my own formal benchmark):
| Without graph (typical) | With graph | |
|---|---|---|
| Discovery | Many greps/reads | ~1–4 codegraph_explore calls |
| Wrong layer | Common on unfamiliar repos | Much rarer after init |
| Later you | Chat log only | spec/plan plus codegraph ui trails |
The project’s README reports headless agent runs on real OSS repos: with the index, architecture questions often need fewer tools and fewer tokens than pure discovery — which matches what I see on real work.
5. Pros, cons, and rollout reality
Pros
- Local & private — good fit for a client like RabbitSVN.
- Surgical context — less dumping whole files into the window.
- Stays fresh — auto-sync after you or the agent saves.
- Claude Code & Cursor —
codegraph installwires MCP plus instruction snippets; restart the agent (official benchmarks on the README also use headless Claude).
Cons
- Upfront cost —
codegraph initon a huge repo takes minutes (per-file sync afterward is fast). - Not magic — agents can still ignore MCP; say plainly: “use codegraph explore first”.
- No index, no win — without
.codegraph/, you are back to grep.
Tip: run codegraph status in a fresh session; open codegraph ui when you want to see what the agent sees instead of trusting chat alone.
6. Closing
Vibe coding is not the enemy — blind vibe is. SpecKit stops me from building the wrong thing; CodeGraph stops the agent from editing the wrong place.
If you use Claude Code or Cursor (or Codex, Copilot, …) on a large codebase, try installing CodeGraph: install → init one project that matters → ask a flow question before “just implement it”. The first discovery loop is usually where you feel the difference.
Which repo did you index first? Tell me on GitHub — or read SpecKit + RabbitSVN if you want the spec side of the same workflow.
Read more: CodeGraph on GitHub · RabbitSVN showcase · SpecKit post
Vibe coding gặp “mù đường”: vì sao tôi gắn CodeGraph vào Claude Code & Cursor
Sau khi chuyển sang Spec-Driven Development với SpecKit, tôi đã biết cần build gì trước khi AI viết code. Nhưng còn một lỗ hổng: agent vẫn phải tự mò trong codebase — grep, ls, đọc file ngẫu nhiên — cho đến khi (hy vọng là) chạm đúng module.
Trên RabbitSVN và các repo native lớn, kiểu “prompt hay + mò đường kém” là combo nguy hiểm: sửa đúng symptom, sai layer, hoặc bỏ sót caller khi refactor.
Tôi bổ sung CodeGraph — công cụ mã nguồn mở của Colby McHenry — như bản đồ semantic 100% local cho agent. Bài này là cách tôi dùng nó để vibe coding có định hướng, không phải bỏ vibe coding hoàn toàn.
1. Vibe coding thiếu gì sau khi đã có spec?
Spec trả lời what và why. Khi implement, agent vẫn cần where và how code hiện tại đang nối với nhau.
| Triệu chứng khi chỉ dùng grep + Read | Hệ quả |
|---|---|
| Nhiều tool call | Context đầy, token tăng, session dễ “quên” spec |
| Đọc file không liên quan | Patch đẹp cục bộ, sai contract với module khác |
| Bỏ qua blast radius | Đổi API nhỏ, vỡ UI hoặc sync path ở tầng khác |
CodeGraph không thay thế tư duy của bạn — nó pre-index symbol, call path, route và impact radius vào SQLite trên máy, rồi expose qua MCP (tool chính codegraph_explore trên Claude Code, Cursor, Codex, …).
2. CodeGraph là gì (ngắn gọn)?
- Đồ thị tri thúc mã nguồn (kernel Rust, 20+ ngôn ngữ), lưu trong
.codegraph/— không gửi code ra cloud. - Auto-sync khi file đổi (file watcher + debounce), index không “cũ vĩnh viễn”.
- MCP cho agent: một tool chính —
codegraph_explore— trả source có line number, đường gọi giữa symbol, và tóm tắt blast radius trong một lần gọi. - CLI + UI:
codegraph uiđể bạn nhìn cùng graph mà agent đang dùng (callers / callees / flow).
Quy trình tôi dùng (CLI + MCP — hai bước tách biệt):
curl -fsSL …/install.sh | sh # hoặc: npm i -g @colbymchenry/codegraph
codegraph install # gắn MCP + gợi ý trong CLAUDE.md / AGENTS.md
cd your-project && codegraph init # .codegraph/ + build graph (bắt buộc mỗi repo)
# Khởi động lại Claude Code hoặc Cursor để MCP load
Chi tiết luôn cập nhật trên repo chính thức.
Claude Code & Cursor
codegraph install tự nhận agent đã cài. Tôi thường chọn cả hai:
codegraph install --target=claude,cursor --yes
| Bước | Claude Code | Cursor |
|---|---|---|
Sau install | Restart session / app để MCP server load | Restart Cursor |
| Gợi ý cho agent | Thêm section trong CLAUDE.md (installer ghi giúp) | AGENTS.md / rules tương ứng |
| Tool | codegraph_explore qua MCP | Cùng MCP server, tên tool giống |
| Mẹo | Nếu session mới “chưa thấy” tool, nhắc “dùng codegraph explore trước” — README gợi ý alwaysLoad trong ~/.claude.json để tool sẵn từ prompt đầu | Bật MCP trong Settings nếu project mới |
codegraph install chỉ cấu hình agent — không index code. Mỗi repo cần codegraph init (hoặc graph cũ + auto-sync khi save).
Gỡ sạch: codegraph uninstall (xóa MCP + marker trong file hướng dẫn agent).
3. Workflow: SpecKit + CodeGraph trong vibe coding có kiểm soát
Hai công cụ bổ sung nhau:
SpecKit: Constitution → Specify → Clarify → Plan → Tasks → Implement
CodeGraph: hỗ trợ Plan + Implement — “X chạy từ đâu?”, “ai gọi Y?”, “đổi Z ảnh hưởng gì?”
Khi nào tôi chủ động nhắc agent dùng graph:
- Trước khi sửa — “trace từ UI action xuống SVN command” (RabbitSVN có nhiều tầng).
- Khi clarify plan — đối chiếu
plan.mdvới module thật trong repo, tránh invent package/path. - Sau khi agent patch — impact check nhanh trước khi merge (đặc biệt shared util).
Trên Claude Code, câu ngắn kiểu “explore call path từ X đến Y bằng CodeGraph” thường đủ để model gọi MCP. Trên Cursor, cùng ý — kiểm tra MCP CodeGraph đã bật cho workspace.
Khi không cần graph: đổi copy, CSS một chỗ, config Docusaurus — cứ vibe nhẹ, không init cả monorepo vì một dòng.
4. Case study: tìm luồng “status icon” thay vì grep cả đêm
Cùng chủ đề với bài SpecKit (quét trạng thái file / icon trên thư mục lớn), nhưng góc nhìn navigation trong code:
Trước CodeGraph: prompt kiểu “tối ưu status scan” → agent grep status, icon, SVN → đọc 8–15 file → đôi khi nhảy vào layer networking thay vì queue/UI đã có.
Với CodeGraph: một câu explore dạng “how does folder refresh trigger SVN status and update versioning icons?” → nhận call path + snippet quanh entry point và worker/queue liên quan → task implement bám đúng chỗ spec đã chọn.
Kết quả cảm nhận (không phải benchmark chính thức của tôi):
| Không graph (thường gặp) | Có graph | |
|---|---|---|
| Discovery | Nhiều grep/read | 1–4 lần codegraph_explore |
| Sai layer | Thường xảy ra trên repo lạ | Giảm rõ khi đã init |
| Tài liệu cho sau | Chat log | Vẫn có spec/plan + bạn có thể codegraph ui lưu trail |
Trên README, nhóm tác giả đo agent có/không index trên nhiều OSS repo: với graph, câu trả lời kiến trúc thường ít tool call và ít token hơn so với vòng discovery thuần — phù hợp với trải nghiệm tôi thấy trên dự án thật.
5. Ưu, nhược và thực tế triển khai
Ưu điểm
- Local & privacy — index trên máy, phù hợp client như RabbitSVN.
- Surgical context — ít “đổ cả file” vào context window.
- Luôn tươi — auto-sync sau khi agent (hoặc bạn) save file.
- Claude Code & Cursor —
codegraph installgắn MCP + snippet hướng dẫn; restart agent là dùng (benchmark chính thức trên README cũng dùng Claude headless).
Hạn chế
- Chi phí ban đầu —
codegraph inittrên repo rất lớn mất vài phút (lần sau sync từng file nhanh). - Không phải silver bullet — agent vẫn có thể bỏ qua MCP nếu prompt không rõ; bạn nên nói thẳng “dùng codegraph explore trước”.
- Repo chưa index — không có
.codegraph/thì agent quay lại grep như cũ.
Mẹo: chạy codegraph status khi session lạ; mở codegraph ui khi bạn muốn cùng nhìn với agent thay vì tin hoàn toàn vào chat.
6. Lời kết
Vibe coding không xấu — xấu là vibe mù. SpecKit giúp tôi không build nhầm thứ; CodeGraph giúp agent không sửa nhầm chỗ.
Nếu bạn dùng Claude Code hoặc Cursor (hoặc Codex, Copilot, …) trên codebase lớn, thử cài CodeGraph: install → init một project quan trọng → đặt câu hỏi flow trước khi gõ “implement ngay”. Khác biệt thường thấy ngay ở vòng discovery đầu tiên.
Bạn đã index repo nào với CodeGraph chưa? Chia sẻ trên GitHub — hoặc đọc tiếp bài SpecKit + RabbitSVN nếu bạn muốn hoàn thiện phía đặc tả.
Đọc thêm: CodeGraph trên GitHub · RabbitSVN showcase · SpecKit trên blog