{"slug": "i-built-an-ai-system-design-coach-clone-it-try-it-break-it", "title": "I Built an AI System Design Coach — Clone It, Try It, Break It", "summary": "A developer built Arcwise, an open-source AI-powered system design coach that provides structured feedback on design exercises. The tool uses LiteLLM to support multiple AI models including Claude, GPT-4o, Gemini, and local Ollama, and features real-time diagram generation with Mermaid.js. Arcwise is available on GitHub and can be run locally with Docker Compose.", "body_md": "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?\"\n\nReal interviews have a human who prods you with the right questions. Solo practice doesn't. I built **Arcwise** to fix that.\n\nArcwise 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.\n\nHere's the flow:\n\n```\nDescribe ──▶ Clarify ──▶ Design ──▶ Refine ──▶ Review\n```\n\n| Score Dimension | What it measures |\n|---|---|\n`functional_coverage` |\nAre all core requirements addressed? |\n`nfr_handling` |\nScale, latency, availability |\n`component_justification` |\nAre tech choices explained and appropriate? |\n`tradeoff_awareness` |\nDoes the design reason about tradeoffs? |\n`overall` |\nHolistic design quality |\n\nNo hand-wavy \"looks good!\" — actual structured feedback on what you missed.\n\nI wanted this to be a real production-quality project, not a toy demo:\n\n| Layer | Tech |\n|---|---|\nAI |\nLiteLLM — swap between Claude, GPT-4o, Gemini, Groq, or local Ollama from Settings |\nBackend |\nFastAPI · Pydantic v2 · SSE streaming · PostgreSQL (async SQLAlchemy) |\nFrontend |\nNext.js 16 App Router · React 19 · TypeScript · Zustand |\nDiagrams |\nMermaid.js (live DSL rendering — edit the diagram directly or via chat) |\nAuth |\nJWT · bcrypt · GitHub OAuth · Google OAuth · SMTP password reset |\nInfra |\nDocker Compose · optional Redis session store |\n\nOne thing I'm especially happy with: **LiteLLM as the AI abstraction layer**. You set your key in `.env`\n\nand the whole thing works — switch from Claude to GPT-4o to a local Llama3 model without touching a line of code.\n\n```\ngit clone https://github.com/nithiin7/arcwise.git\ncd arcwise\necho \"ANTHROPIC_API_KEY=sk-ant-...\" > backend/.env\ndocker compose up\n```\n\nOpen `http://localhost:3000`\n\n. Done. No account required to start — auth is optional and off by default.\n\nPrefer a different model? Set\n\n`OPENAI_API_KEY`\n\n,`GEMINI_API_KEY`\n\n, or`GROQ_API_KEY`\n\ninstead (or all of them) and switch from the Settings page.\n\n**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.\n\n**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.\n\n**Multi-model by default was the right call.** I started hardcoded to Claude, then added a `ModelSelect`\n\ncomponent 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.\n\nI have ideas, but I want to build what's actually useful:\n\n**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.\n\nIf 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.", "url": "https://wpnews.pro/news/i-built-an-ai-system-design-coach-clone-it-try-it-break-it", "canonical_source": "https://dev.to/nithiin7/i-built-an-ai-system-design-coach-clone-it-try-it-break-it-1j4b", "published_at": "2026-06-14 10:22:52+00:00", "updated_at": "2026-06-14 10:40:32.524447+00:00", "lang": "en", "topics": ["artificial-intelligence", "developer-tools", "large-language-models", "ai-products"], "entities": ["Arcwise", "LiteLLM", "Claude", "GPT-4o", "Gemini", "Groq", "Ollama", "Mermaid.js"], "alternates": {"html": "https://wpnews.pro/news/i-built-an-ai-system-design-coach-clone-it-try-it-break-it", "markdown": "https://wpnews.pro/news/i-built-an-ai-system-design-coach-clone-it-try-it-break-it.md", "text": "https://wpnews.pro/news/i-built-an-ai-system-design-coach-clone-it-try-it-break-it.txt", "jsonld": "https://wpnews.pro/news/i-built-an-ai-system-design-coach-clone-it-try-it-break-it.jsonld"}}