You just joined a new project. The codebase is massive. The docs are outdated. Nobody has time to explain it.
ArchExplainer solves that.
Drop your project folder, and within seconds you get a visual architecture map, a team of 5 AI experts tailored to your exact stack, and a RAG-powered chat that cites your actual source files.
No setup. No database. No configuration. Just answers.
Understanding a software project shouldn't require a technical degree — or a developer's time.
- Non-technical stakeholders (PMs, designers, founders) can't read code to understand what a project does
- Developers have to stop their work to explain the architecture to the rest of the team
- Architecture docs are either missing, wrong, or impossible to follow without context
- Generic AI tools don't know your specific codebase
Teams constantly depend on their tech leads to translate code into plain language. That creates bottlenecks, miscommunication, and wasted time.
ArchExplainer lets anyone — dev or not — understand a software project without reading a single line of code.
Drop your project folder and get:
- A visual architecture map — every major component, service, and module, with connections between them
- A team of 5 AI experts — tailored personas generated from your exact stack, not generic assistants
- Real answers from your code — a RAG engine indexes your source files so experts cite actual excerpts
- A conversation, not documentation — the personas are designed to feel like talking to a real team, not querying a chatbot
Click a component, ask a question, get a clear explanation. No setup. No reading the code yourself.
Everything runs in your browser session. No data leaves your machine beyond the AI API call.
Drop your project and get an instant interactive map of every major component — services, modules, APIs, configs — with connections drawn between them.
Drag nodes, zoom in, and rearrange freely. The graph is yours.
ArchExplainer doesn't use a generic AI. It reads your stack and generates 5 specialists made for your project.
Got a Next.js app with a Rust backend and a Postgres DB? You'll get a Frontend Engineer, a Backend Architect, a Database Expert, a DevOps Specialist, and a Security Reviewer — all aware of your actual codebase.
| Expert Chat | Project Chat | Debate Mode |
| Click any node to open a focused chat with the expert for that component. Every answer cites your actual source files. | Not sure which expert to ask? Use the global chat and switch between all 5 experts mid-conversation. | Pick a topic and set two experts against each other — one for, one against, streamed in real time. |
 |
 |
 |
Every response is backed by a real-time index of your source files.
The RAG engine chunks your code into 35-line segments and matches them by keyword relevance. When an expert answers, a Sources panel shows exactly which files were used.
No hallucinations about your project. No generic advice. Real answers, real citations.
| Layer | Technology |
|---|---|
| Framework | Next.js 16 (App Router) + React 19 |
| AI Model | mistralai/mistral-nemotron via NVIDIA API |
| AI SDK | Vercel AI SDK 4.x (ai, @ai-sdk/openai, @ai-sdk/react) |
| Agents | LangChain + Zod |
| RAG | In-memory keyword store (Node.js global Map) |
| Styling | Inline styles — warm beige design system |
- Node.js ≥ 18
- A free NVIDIA API key — get one at build.nvidia.com
# 1. Clone the repository
git clone https://github.com/Chocolatine75/arch-explainer-code.git
cd arch-explainer-code
# 2. Install dependencies
npm install
# 3. Set up your environment
cp .env.example .env.localOpen .env.local and add your key:
NVIDIA_API_KEY=your_key_here# 4. Start the dev server
npm run devThen open http://localhost:3000 and drop a project folder.
| Variable | Required | Description |
|---|---|---|
NVIDIA_API_KEY |
✅ | API key from build.nvidia.com |
# Install the Vercel CLI
npm i -g vercel
# Deploy
vercel
# Add your API key
vercel env add NVIDIA_API_KEYOr set it directly in your Vercel dashboard under Settings → Environment Variables.
How RAG works on Vercel: The RAG index lives in memory and is rebuilt per session. Because Vercel uses serverless functions, the index is sent with each request from the client — so everything works correctly without a persistent backend.
1. User drops a project folder
↓
2. /api/analyze-project → LangChain extracts components, connections, stack
↓
3. /api/init-team → 5 expert personas generated from the analysis
↓
4. Source files indexed → RAG store (keyword overlap, 35-line chunks)
↓
5. User interacts:
• Click node → ExpertPanel → /api/chat (expert mode + RAG)
• Project Chat → GlobalPanel → /api/chat (any persona + RAG)
• Debate Mode → DebatePanel → /api/debate (streamed for/against)
archexplainer/
├── app/
│ ├── page.tsx # Main UI — WelcomeScreen, ArchGraph, panels
│ └── api/
│ ├── analyze-project/ # Analyzes file structure → ProjectAnalysis
│ ├── init-team/ # Generates 5 expert personas
│ ├── chat/ # Streaming chat endpoint (expert + global)
│ ├── debate/ # Debate streaming endpoint
│ └── rag/
│ └── index/ # Builds in-memory RAG index from uploaded files
├── lib/
│ ├── agents/
│ │ ├── analyzer.ts # LangChain + Zod project analysis
│ │ ├── team-creator.ts # Generates expert personas
│ │ ├── router.ts # Routes questions to the best persona
│ │ └── debate.ts # Debate orchestration (streamed)
│ └── rag/
│ └── store.ts # In-memory keyword RAG store
├── .env.example
└── package.json
- Any project type works — drop a folder with
package.json,Cargo.toml,go.mod,requirements.txt, or similar - The green RAG badge in the chat header confirms your files are indexed and experts can cite them
- Click any node in the graph to open its dedicated expert panel
- Drag and rearrange the graph to your liking
- Files over 30 KB or in
node_modules,.git,dist,.nextare automatically excluded
MIT