Languages / Dillər: English · Azərbaycanca
Note / Qeyd: Built as an idea for the Vercel hackathon. · Vercel hackathonu üçün yazılmış bir ideya idi.
A new developer opens a GitHub repo and has no idea where to start. Solution: GitHub URL + role → AI gives you the first 5 files to read in order + a "Why is this code like this?" explanation.
Yeni developer GitHub repo-nu açır və hardan başlayacağını bilmir. Həll: GitHub URL + role → AI sənə oxumalı olduğun ilk 5 faylı sıra ilə + "Niyə bu kod belədir?" izahını verir.
An AI-guided onboarding tool that turns any public GitHub repository into a structured walkthrough — architecture, business logic, file tour, commit history, and a project-aware chat.
İstənilən public GitHub repo-nu strukturlaşdırılmış onboarding-ə çevirən AI alət — architecture, business logic, file tour, commit tarixçəsi və layihəni tanıyan chat.
When a developer joins a new team or wants to contribute to an OSS project:
- The repo has hundreds of files, but no answer to "where do I start?"
- READMEs usually explain how to install, not how to read the code
- Developers waste 1–2 days just building a mental model
- Different roles (frontend / backend / devops / fullstack) need different entry points, but no one tells you that
Paste a URL + pick your role → get a full architectural picture, not just file names:
- Project overview with three tabs at the top of the tour:
- Architecture — 3-5 layers from your role's perspective (e.g. backend: Entry & Config · Routes & API · Business Logic · Data Layer · Middleware), each with purpose, why-it-matters, and clickable file paths.
- Business logic — what this product actually IS in user-facing terms: product summary, problem solved, core features, domain entities, and user journeys. So newcomers see what the project does, not just which files it has.
- How it works — the system's operating principles: end-to-end data flow, 2-4 core flows broken into ordered steps, and key technical patterns the system relies on.
- 10-file guided tour grouped by layer — files are bucketed into the same role-specific categories so you see the full structure, not five disconnected files.
- Per-file deep "why" — for every file the AI answers four questions:
- What it does (concrete behavior)
- Why it exists (the problem it solves)
- Why you, the {role}, should read it (role-specific value)
- Connects to (1-3 related files in the tour)
- Q&A chat — every step ships the current file as context, so you can ask "why is this a client component?" and get an answer rooted in the actual code.
- Key takeaways + concept tags per file so the mental model sticks.
┌──────────────────┐ ┌─────────────────┐ ┌──────────────────┐
│ Landing Page │─URL─▶│ /api/analyze │─────▶│ GitHub API │
│ (URL + role) │ │ │ │ (tree + files) │
└──────────────────┘ └────────┬────────┘ └──────────────────┘
│
▼
┌─────────────────────┐
│ Scoring Engine │ role-based ranking
│ (lib/scoring.ts) │ + categorization
└──────────┬──────────┘ (10 files / 5 categories)
│
▼
┌────────────────────────────────────────┐
│ AI SDK 6 │
│ ┌──────────────────────────────────┐ │
│ │ Project overview call │──┼─▶ AI Gateway
│ │ (1× generateText + │ │ (zero-config)
│ │ Output.object → │ │
│ │ layers[] │ │
│ │ + businessLogic │ │
│ │ + operatingPrinciples) │ │
│ └──────────────────────────────────┘ │
│ ┌──────────────────────────────────┐ │
│ │ Per-file analysis (10×) │──┼─▶ AI Gateway
│ │ what / why / connects │ │
│ └──────────────────────────────────┘ │
└────────────────────┬───────────────────┘
│ Tour JSON
▼
┌──────────────────────────────────────────────────────────────────────────┐
│ /tour/[owner]/[repo] │
│ │
│ ┌──────────────────────────────────────────────────────────────────┐ │
│ │ Project Overview (tabs) │ │
│ │ • Architecture — layers + jump-to-file │ │
│ │ • Business logic — product, features, entities, user journeys │ │
│ │ • How it works — data flow, core flows, key patterns │ │
│ └──────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌────────────┐ ┌────────────────────────────────┐ ┌──────────────┐ │
│ │ Sidebar │ │ File Viewer │ │ Q&A Chat │ │
│ │ Grouped │ │ • What it does │ │ (slide-over) │ │
│ │ by layer │ │ • Why it exists │ │ │ │
│ │ │ │ • Why you, the {role} │ │ useChat + │ │
│ │ │ │ • Code · Key takeaways │ │ /api/chat │ │
│ │ │ │ • Connects to → other files │ │ │ │
│ └────────────┘ └────────────────────────────────┘ └──────────────┘ │
└──────────────────────────────────────────────────────────────────────────┘
- User enters a GitHub URL + role (
frontend/backend/devops/fullstack) /api/analyzeendpoint:- Parses the URL and fetches repo metadata + the recursive tree (
lib/github.ts) - Filters out
node_modules, builds, binaries, lockfiles, etc. lib/scoring.tsscores every remaining file for the role (route handlers, configs, entry points, infra files all get role-specific weights) and assigns each file a category (entry,routes,logic,data,middleware,components,state,ci,containers,infra, …)- Picks 10 files distributed across 5 categories (max 3 per category) so the tour reflects the full structure, not one hot folder
- Parses the URL and fetches repo metadata + the recursive tree (
- Two AI passes with AI SDK 6 +
Output.object():- Project overview (1 call): produces
summary+stack+ 3-5layers(architecture) plus a fullbusinessLogicblock (productSummary,problemSolved,coreFeatures,domainEntities,userJourneys) plus anoperatingPrinciplesblock (dataFlow,coreFlows[]with ordered steps,keyPatterns[]). All in a single structured-output call. - Per-file analysis (10 calls in sequence): for each file, returns
whatItDoes,whyItExists,whyYouShouldRead,whyItMatters,keyConceptTags,keyTakeaways, andconnectsTo(linked files in the tour).
- Project overview (1 call): produces
- Heuristic fallbacks: every AI call has a per-category template fallback so the tour still works fully if the AI Gateway is unreachable or out of credit. No empty cards, ever.
- Tour page renders three things:
- The collapsible Architecture Overview at the top (with click-to-jump file paths)
- A sidebar grouped by category (e.g. backend → "Entry & Config", "Routes & API", "Business Logic", "Data Layer", "Middleware & Infra")
- A File Viewer showing 3 insight cards (what / why exists / why you), code with line numbers, key takeaways, concept tags, and clickable "Connects to" links
- Q&A chat —
useChat+DefaultChatTransport, each message ships the current file content + path as context - Demo mode —
lib/demos.tsships pre-cached tours forvercel/next.js,shadcn-ui/ui,supabase/supabase. Demos are auto-enriched at runtime with categories + a synthetic architecture so they look identical to live tours.
| Layer | Technology |
|---|---|
| Framework | Next.js 16 (App Router, RSC) |
| AI | AI SDK 6 (generateText + Output.object, useChat) |
| Model | Vercel AI Gateway (zero-config, default OpenAI/Anthropic) |
| GitHub | @octokit/rest |
| State | React server components + client islands |
| Styling | Tailwind v4 + shadcn/ui (dark, terminal-green accent) |
| Validation | Zod |
| Persistence | (Optional) Vercel KV — pre-cached tours |
app/
├── page.tsx # Landing: hero, role selector, demos
├── layout.tsx # Geist + dark theme + nav
├── api/
│ ├── analyze/route.ts # GitHub fetch → score → AI tour
│ └── chat/route.ts # File-context Q&A streaming
└── tour/[owner]/[repo]/page.tsx # 3-pane tour view
components/
├── tour/
│ ├── sidebar.tsx # Steps grouped by category
│ ├── file-viewer.tsx # 3 insight cards + code + takeaways + connections
│ ├── architecture-overview.tsx # Layer map with jump-to-file
│ └── top-bar.tsx # Repo meta + role badge
├── chat/
│ ├── chat-panel.tsx # Slide-over (useChat)
│ ├── chat-input.tsx
│ ├── message-list.tsx
│ └── message.tsx
└── shared/
├── role-selector.tsx
└── loading-state.tsx
lib/
├── github.ts # GitHub REST + raw content fetch
├── scoring.ts # Role-based ranking + categorization
├── ai/
│ ├── prompts.ts # Architecture + per-file prompts
│ └── schemas.ts # Zod schemas for Output.object()
├── demos.ts # Pre-cached tours (Next.js, shadcn, Supabase)
└── types.ts # Tour, TourStep, Architecture, Category, Role
pnpm install
pnpm devCreate a .env.local file at the project root (Next.js loads it automatically) and add the keys you need. You can also set them in the Vars panel of your Vercel project (top-right settings → Vars).
# Required for live AI analysis (without it the app falls back to heuristics)
AI_GATEWAY_API_KEY=vag_...
# Optional — strongly recommended
GITHUB_TOKEN=ghp_...
# Optional — only if you want to cache tours across requests
KV_REST_API_URL=https://...
KV_REST_API_TOKEN=...Powers the project overview, per-file analysis, commit timeline, and chat.
- Go to vercel.com/dashboard → open any project (or create a free one).
- Open the AI tab from the top nav, then click Get API key under AI Gateway.
- Click Create key, give it a name (e.g.
repoguide-local), and copy the value. It starts withvag_. - Paste it into
.env.localasAI_GATEWAY_API_KEY=..., then restartpnpm dev.
Vercel's free tier includes credits for OpenAI, Anthropic, Google, and others through the Gateway, so a single key unlocks every model. If credit runs out, the app automatically falls back to heuristic analysis instead of crashing — no broken UX. Add a credit card on the same page to lift the limit: https://vercel.com/d?to=%2F%5Bteam%5D%2F%7E%2Fai%3Fmodal%3Dadd-credit-card.
Without a token, GitHub allows only 60 unauthenticated requests/hour per IP — large repos exceed that on a single tour. With a token you get 5,000 requests/hour.
- Go to https://github.com/settings/tokens?type=beta (Fine-grained personal access tokens).
- Click Generate new token.
- Repository access: choose Public repositories (read-only) — that's all the app needs.
- Permissions: leave everything at the default; the app only reads metadata, the file tree, raw file contents, and the commit list.
- Click Generate token and copy the value. It starts with
github_pat_. - Paste it into
.env.localasGITHUB_TOKEN=....
A classic personal access token (
ghp_...) works too, but a fine-grained read-only token is safer because it can't write to anything.
Only needed if you want to cache generated tours across cold starts. The app works fine without them — every analysis runs fresh.
- In your Vercel project, open the Storage tab → Create Database → Upstash for Redis (free tier).
- After creation, click Connect Project to bind it.
- Vercel will inject
KV_REST_API_URLandKV_REST_API_TOKENinto your environment automatically. For local dev, copy both values from the Vars panel into your.env.local.
There are three places you might need to add the keys depending on how you're running RepoGuide. Pick the scenario that matches you.
The keys live in a file called .env.local at the root of the repo (same folder as package.json). This file is git-ignored by default, so secrets never leave your machine.
# 1. From the repo root, create the file
touch .env.local
# 2. Open it in your editor and paste:
echo 'AI_GATEWAY_API_KEY=vag_your_key_here' >> .env.local
echo 'GITHUB_TOKEN=github_pat_your_token_here' >> .env.local
# 3. Restart the dev server so Next.js reloads env vars
pnpm devImportant: Next.js reads
.env.localonly at startup. If you change a key while the server is running, you must stop (Ctrl+C) and runpnpm devagain.
When the app is deployed, .env.local does not exist on Vercel's servers — you have to add the keys through Vercel's dashboard so they're injected at build + runtime.
- Go to https://vercel.com/dashboard and click your RepoGuide project.
- Top nav: click Settings.
- Left sidebar: click Environment Variables.
- For each key, fill in:
- Key:
AI_GATEWAY_API_KEY(orGITHUB_TOKEN, etc.) - Value: paste the key value (the part starting with
vag_/github_pat_) - Environments: check all three — Production, Preview, Development — unless you have a reason not to.
- Key:
- Click Save.
- Go to the Deployments tab → click the three dots on the latest deployment → Redeploy (without cache). New environment variables only apply to new deployments.
Vercel encrypts these values at rest and never exposes them to the browser. They're only readable by your serverless functions.
If you're iterating on RepoGuide inside v0 itself, the env vars panel is the same idea but accessible directly from chat.
- In the chat preview, click the Settings icon at the top right.
- Open the Vars tab.
- Click Add Variable for each key, paste the value, save.
- The preview rebuilds automatically with the new vars available.
Save this as .env.local.example (or use it as a reference) so teammates know exactly what's required:
# === REQUIRED for AI features ===
# Get from: https://vercel.com/dashboard → AI tab → Get API Key
AI_GATEWAY_API_KEY=vag_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
# === RECOMMENDED ===
# Get from: https://github.com/settings/tokens?type=beta
# Permissions: Public repositories (read-only)
GITHUB_TOKEN=github_pat_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
# === OPTIONAL — only for tour caching ===
# Get from: Vercel project → Storage → Create Database → Upstash for Redis
KV_REST_API_URL=https://xxxxx.upstash.io
KV_REST_API_TOKEN=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxAfter saving .env.local, restart the dev server and open http://localhost:3000. Paste any public repo URL (e.g. https://github.com/vercel/next.js) and pick a role:
- If you see a full AI-generated architecture map and per-file insights, the AI key works.
- If the cards say "AI Gateway is unavailable — heuristic analysis", the AI key is missing or out of credit (everything still works, just without LLM-generated text).
- If the analysis stalls on "Fetching repository", you've hit the GitHub rate limit — add
GITHUB_TOKEN.
No-key mode: if you don't want to set up any keys, the
/demo/[slug]routes serve pre-cached tours forvercel/next.js,shadcn-ui/ui, andsupabase/supabase. The landing page surfaces a fallback button automatically.
- On the landing page paste a public GitHub URL (or click one of the demo buttons).
- Pick your role — frontend, backend, devops, or fullstack.
- The tour opens with the Project Overview tab: architecture map, business logic, how-it-works flows, and commit-evolution timeline.
- Step through the file tour. Each file ships with what-it-does, why-it-exists, why-you-should-read-it, key takeaways, declared exports, and a wiring panel showing imports and importers.
- Open the chat in the bottom right and ask anything about the project or the open file. Hit Export report to download the full briefing as Markdown.
Yeni developer komandaya qoşulanda və ya OSS contribute etmək istəyəndə:
- Repo-da yüzlərlə fayl olur, amma "harda başlayım?" sualına cavab yoxdur
- README adətən "necə install edirsən"i izah edir, "necə oxuyursan"ı yox
- Developer 1-2 gün itirir sadəcə mental model qurmağa
- Roluna görə (frontend / backend / devops / fullstack) fərqli giriş nöqtələri lazımdır, amma heç kim onu sənə deməz
URL + rol ver → sadəcə fayl adları yox, tam arxitektur xəritə al:
- Tour-un üstündə 3 tab-lı project overview:
- Architecture — sənin rolundan 3-5 layer (məs. backend üçün: Entry & Config · Routes & API · Business Logic · Data Layer · Middleware), hər biri üçün purpose, why-it-matters, click-edilə bilən fayl path-ları.
- Business logic — bu proyekt istifadəçi gözündə nə edir: product summary, həll etdiyi problem, core features, domain entity-lər, user journey-lər. Yəni yeni gələn dev görür proyekt nə edir, yox təkcə hansı fayllar var.
- How it works — sistemin işləmə prinsipləri: end-to-end data flow, 2-4 core flow (sıralı step-lərlə), və sistemin söykəndiyi key technical pattern-lər.
- Layer-lərə bölünmüş 10-fayllıq tour — fayllar eyni kateqoriyalara bucket-lənir, 5 ayrı fayl yox, bütün strukturu görürsən.
- Hər fayl üçün dərin "niyə" — AI 4 suala cavab verir:
- What it does (konkret nə edir)
- Why it exists (hansı problemi həll edir)
- Why you, the {role}, should read it (sənin rolun üçün niyə vacibdir)
- Connects to (tour-dakı 1-3 əlaqəli fayl)
- Q&A chat — hər mesaj cari faylı kontekst kimi göndərir, "bu niyə client component-dir?" deyə soruşanda real koda əsaslanan cavab alırsan.
- Key takeaways + concept tag-lər hər fayl üçün, mental model qalsın deyə.
- İstifadəçi GitHub URL + rol seçir (
frontend/backend/devops/fullstack) /api/analyzeendpoint:- URL-i parse edir, repo meta + recursive tree çəkir (
lib/github.ts) node_modules, build, binary, lockfile-ları filter edirlib/scoring.tshər faylı rol üçün ballaşdırır və kateqoriya təyin edir (entry,routes,logic,data,middleware,components,state,ci,containers,infra, …)- 5 kateqoriyaya bölünmüş 10 fayl seçir (kateqoriyada max 3) — bir folder-dən deyil, bütün strukturdan
- URL-i parse edir, repo meta + recursive tree çəkir (
- AI SDK 6 +
Output.object()ilə 2 AI pass:- Project overview (1 call):
summary+stack+ 3-5layers(architecture), plusbusinessLogic(productSummary,problemSolved,coreFeatures,domainEntities,userJourneys), plusoperatingPrinciples(dataFlow, sıralıcoreFlows,keyPatterns). Hamısı bir structured-output çağırışında. - Per-file analysis (10 call): hər fayl üçün
whatItDoes,whyItExists,whyYouShouldRead,whyItMatters,keyConceptTags,keyTakeaways,connectsTo.
- Project overview (1 call):
- Heuristic fallback: hər AI call-un kateqoriya əsaslı template fallback-i var. AI Gateway down olsa belə tour tam işləyir.
- Tour səhifəsi üç hissəni render edir:
- Yuxarıda collapsible Architecture Overview (jump-to-file ilə)
- Solda kateqoriyaya görə qruplaşdırılmış sidebar
- Mərkəzdə File Viewer (3 insight kartı + kod + takeaways + concept tag + Connects to link-lər)
- Q&A chat —
useChat+DefaultChatTransport, hər mesaj cari faylı kontekst kimi göndərir - Demo mode —
lib/demos.ts-dəvercel/next.js,shadcn-ui/ui,supabase/supabaseüçün pre-cached tour. Runtime-da kateqoriya + sintetik architecture əlavə olunur, live tour-larla eynilik qoruyur.
Layihəni lokal işlətmək üçün .env.local faylı yarat (Next.js avtomatik yükləyir) və lazımi key-ləri əlavə et:
# Live AI üçün lazımdır (yoxdursa heuristic fallback işləyir)
AI_GATEWAY_API_KEY=vag_...
# Tövsiyə olunur — GitHub rate limit-i 60/saat → 5000/saat
GITHUB_TOKEN=ghp_...
# Optional — yalnız tour-ları cache-ləmək üçün
KV_REST_API_URL=https://...
KV_REST_API_TOKEN=...AI_GATEWAY_API_KEY necə alınır:
- https://vercel.com/dashboard → istənilən proyekti aç (və ya yenisini yarat, free).
- Yuxarı nav-dan AI tab-ına keç → AI Gateway → Get API key.
- Create key → ad ver (məs.
repoguide-local) → kopyala.vag_ilə başlayır. .env.local-aAI_GATEWAY_API_KEY=...kimi yapışdır vəpnpm dev-i yenidən başlat.
Vercel free tier OpenAI / Anthropic / Google modellərinə kredit verir. Kredit bitsə app crash etmir — heuristic analysis-ə avtomatik keçir.
GITHUB_TOKEN necə alınır:
- https://github.com/settings/tokens?type=beta → Generate new token.
- Repository access: Public repositories (read-only) kifayətdir.
- Permissions-ı default saxla — app yalnız metadata, tree, raw file content və commit list oxuyur.
- Token-i kopyala (
github_pat_...) və.env.local-aGITHUB_TOKEN=...kimi yapışdır.
KV_REST_API_URL / KV_REST_API_TOKEN (optional): Vercel Storage → Upstash for Redis (free) → Connect Project. Vars panel-dən dəyərləri .env.local-a kopyala.
Yoxlama: dev server-i restart et, http://localhost:3000-da https://github.com/vercel/next.js URL-ini ver. Tam AI cavabı görünürsə key işləyir; "AI Gateway is unavailable" yazılırsa key yoxdur və ya kredit bitib (app yenə də işləyir, sadəcə LLM mətni yoxdur); "Fetching repository"-də dayanırsa GitHub rate limit-ə dəyib — GITHUB_TOKEN əlavə et.
Layihəni necə işlətdiyindən asılı olaraq 3 fərqli yer var. Öz halına uyğun olanı seç.
Key-lər repo root-undakı (yəni package.json-un olduğu folder) .env.local faylında saxlanır. Bu fayl git-ignore-dadır, secret-lər heç vaxt repository-ə getmir.
# 1. Repo root-undasan, fayl yarat
touch .env.local
# 2. Redaktorda aç və key-ləri yapışdır:
echo 'AI_GATEWAY_API_KEY=vag_sənin_keyin' >> .env.local
echo 'GITHUB_TOKEN=github_pat_sənin_tokenin' >> .env.local
# 3. Dev server-i restart et ki Next.js env-i yenidən oxusun
pnpm devVacib: Next.js
.env.local-i yalnız başlanğıcda oxuyur. Server işləyəndə key dəyişsən,Ctrl+Cilə dayandır vəpnpm dev-i yenidən qaldır.
Deploy olanda .env.local Vercel-in serverində olmur — key-ləri Vercel dashboard-dan əlavə etməlisən ki build + runtime zamanı inject olsun.
- https://vercel.com/dashboard → RepoGuide proyektini aç.
- Yuxarı nav-da Settings-ə klik.
- Sol sidebar-da Environment Variables-ə klik.
- Hər key üçün:
- Key:
AI_GATEWAY_API_KEY(və yaGITHUB_TOKENvə s.) - Value: key dəyərini yapışdır (
vag_/github_pat_ilə başlayan hissə) - Environments: üçünü də işarələ — Production, Preview, Development.
- Key:
- Save-ə klik.
- Deployments tab-ına keç → ən son deploy-un yanındakı 3 nöqtə → Redeploy (cache olmadan). Env var-lar yalnız yeni deploy-da işləyir.
Vercel bu dəyərləri encrypted saxlayır, browser-ə heç vaxt görünmür. Yalnız serverless function-ların oxuya bilir.
v0 daxilində layihə üzərində işləyirsənsə, env panel-i chat-dan birbaşa açılır.
- Chat preview-da yuxarı sağdakı Settings icon-una klik.
- Vars tab-ını aç.
- Hər key üçün Add Variable → dəyəri yapışdır → save.
- Preview avtomatik rebuild olur, yeni var-lar dərhal işləyir.
Bu template-i .env.local.example kimi saxla, komanda yoldaşların nəyin lazım olduğunu dəqiq bilsin:
# === AI üçün VACIB ===
# Hardan: https://vercel.com/dashboard → AI tab → Get API Key
AI_GATEWAY_API_KEY=vag_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
# === TÖVSIYƏ ===
# Hardan: https://github.com/settings/tokens?type=beta
# Permission: Public repositories (read-only)
GITHUB_TOKEN=github_pat_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
# === OPTIONAL — tour cache üçün ===
# Hardan: Vercel project → Storage → Create Database → Upstash for Redis
KV_REST_API_URL=https://xxxxx.upstash.io
KV_REST_API_TOKEN=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx- Landing-də public GitHub URL yapışdır (ya da demo button-lardan birinə klik et).
- Role seç — frontend, backend, devops və ya fullstack.
- Tour açılır, ilk Project Overview tab-ı görünür: architecture map, business logic, how-it-works flow-ları, commit-evolution timeline.
- Fayl turunu addım-addım keç. Hər fayl üçün: what-it-does, why-it-exists, niyə oxumalısan, key takeaway-lər, export-lar, və wiring panel (imports + importers).
- Sağ aşağıda chat-ı aç, layihə və ya açıq fayl haqqında istənilən sualı ver. Export report düyməsi tam briefing-i Markdown faylı kimi endirir.