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!
Top comments (4)
Open architecture tree plus BYOK is a clear angle for an AI app builder. When generated apps ship a signup form, I'd still check the email domain has MX on the server action, because the preview looking right does not mean a confirmation will land.
Good point, adding an MX check to the generated server actions. Thanks!"
That sounds like a sensible guard for generated actions. Keeping it server side should make the behaviour consistent.
The architecture tree is interesting because generated code usually hides the structure until you open the repo. I'd be careful about treating the tree as the source of truth though. If the generated code drifts from the visual graph, the graph becomes another thing the agent has to keep in sync.