Most AI app builders give you a chat box and hand back a wall of code. You can't see how the app is structured until you dig through it.
So I built Devgri AI — you describe an app in plain language and get three panes that stay in sync:
| Pane | What it does |
|---|---|
| Chat | Describe what you want, in plain language |
| Architecture tree | The app's structure as an editable node graph — drag, rename, reconnect |
| Live preview | The generated site renders beside the tree as it changes |
👉 Live demo: https://devgri-ai-olive.vercel.app
👉 Repo: https://github.com/Sumontsc51/Devgri-ai
Bring your own key
Devgri is BYOK — your Anthropic, OpenAI or Google key stays in browser memory. PII and token masking runs client-side before anything leaves the tab, and keys are stripped from every payload before a workspace is saved.
Tech stack
- Next.js 14 (App Router) + TypeScript
- Tailwind CSS
- React Flow for the architecture canvas
- Supabase (Auth + Postgres + Row Level Security)
- Vercel
One thing I like: rules like the trial window and user cap are enforced in RLS policies, not just the UI, so the API can't be talked around.
Where I need help
It's an early MVP. It works end to end, but it's rough in places — which is exactly why it's public and MIT licensed. Contributions I'd love:
- UX polish on the architecture tree (layout, node editing)
- Better sync between the tree and the live preview
- Support for more model providers
- Tests, docs and bug reports
The repo has a CONTRIBUTING.md, and getting it running locally takes a few minutes:
git clone https://github.com/Sumontsc51/Devgri-ai.git
cd Devgri-ai
npm install
cp .env.local.example .env.local # fill in your Supabase values
npm run dev
If you try it, I'd really like to hear what breaks and whether the architecture-tree idea is useful to you. Issues, PRs and ⭐s all welcome!
