# I Built an AI System Design Coach — Clone It, Try It, Break It

> Source: <https://dev.to/nithiin7/i-built-an-ai-system-design-coach-clone-it-try-it-break-it-1j4b>
> Published: 2026-06-14 10:22:52+00:00

Every time I practiced system design, I'd hit the same wall: I'd sketch out a rough idea for "design WhatsApp" or "build a URL shortener," and then... nothing. No feedback. No indication if my choice of Kafka over RabbitMQ was justified or just cargo-culting. No one to ask "hey, what's your latency requirement?"

Real interviews have a human who prods you with the right questions. Solo practice doesn't. I built **Arcwise** to fix that.

Arcwise is an open-source, AI-powered system design coach. Drop in any problem, and it walks you through the full design process — just like a real interview session.

Here's the flow:

```
Describe ──▶ Clarify ──▶ Design ──▶ Refine ──▶ Review
```

| Score Dimension | What it measures |
|---|---|
`functional_coverage` |
Are all core requirements addressed? |
`nfr_handling` |
Scale, latency, availability |
`component_justification` |
Are tech choices explained and appropriate? |
`tradeoff_awareness` |
Does the design reason about tradeoffs? |
`overall` |
Holistic design quality |

No hand-wavy "looks good!" — actual structured feedback on what you missed.

I wanted this to be a real production-quality project, not a toy demo:

| Layer | Tech |
|---|---|
AI |
LiteLLM — swap between Claude, GPT-4o, Gemini, Groq, or local Ollama from Settings |
Backend |
FastAPI · Pydantic v2 · SSE streaming · PostgreSQL (async SQLAlchemy) |
Frontend |
Next.js 16 App Router · React 19 · TypeScript · Zustand |
Diagrams |
Mermaid.js (live DSL rendering — edit the diagram directly or via chat) |
Auth |
JWT · bcrypt · GitHub OAuth · Google OAuth · SMTP password reset |
Infra |
Docker Compose · optional Redis session store |

One thing I'm especially happy with: **LiteLLM as the AI abstraction layer**. You set your key in `.env`

and the whole thing works — switch from Claude to GPT-4o to a local Llama3 model without touching a line of code.

```
git clone https://github.com/nithiin7/arcwise.git
cd arcwise
echo "ANTHROPIC_API_KEY=sk-ant-..." > backend/.env
docker compose up
```

Open `http://localhost:3000`

. Done. No account required to start — auth is optional and off by default.

Prefer a different model? Set

`OPENAI_API_KEY`

,`GEMINI_API_KEY`

, or`GROQ_API_KEY`

instead (or all of them) and switch from the Settings page.

**Streaming UX matters more than I expected.** When the diagram generates token by token and you see it appear in real time, it feels alive. Buffering the whole response and dumping it at once felt dead in comparison. SSE streaming from FastAPI to Next.js was worth the extra plumbing.

**Mermaid.js is underrated.** Everyone reaches for D3 or a graph library when they need diagrams. Mermaid gives you a clean DSL that an LLM can generate directly — no coordinate math, no node positioning. The diagram is just a string. That means the AI can edit it through chat without any special graph manipulation logic.

**Multi-model by default was the right call.** I started hardcoded to Claude, then added a `ModelSelect`

component and LiteLLM routing. The moment local Ollama worked — fully offline, free, no API key — it changed the feel of the whole project. It's not just a Claude wrapper anymore.

I have ideas, but I want to build what's actually useful:

**If any of these resonate with you — or you have a completely different idea — open an issue or drop a comment below.** I read everything.

If you clone it, hit me up — I'd love to know what you think. If something's broken, broken is a great excuse to open a PR.