Dyad Review: 21k‑Star Open‑Source AI Builder for Local Full‑Stack Development
Dyad is a locally run Electron app that lets developers describe an application to an AI, which generates standard React/TypeScript or Next.js code, offers instant preview, supports multiple AI models, integrates Supabase, provides security scanning, Git versioning, and one‑click deployment, all without registration.
Installation (Five Minutes)
Download the installer and run it – no email or registration required.
macOS Apple Silicon:
curl -L -o dyad.dmg "https://dyad.sh/download/mac-arm"Windows:
curl -L -o dyad-setup.exe "https://dyad.sh/download/win"The latest release is also available on the GitHub Releases page.
Model Configuration
In Settings → AI you can select from many models, including OpenAI (GPT‑4o, GPT‑4.1), Anthropic (Claude Sonnet, Opus), Google (Gemini 2.5 Pro, Flash), as well as local models via Ollama, LM Studio, or any OpenAI‑compatible endpoint. Model switching occurs in seconds without restarting Dyad.
Creating a Project
Click “New App”, choose a framework (Next.js, Vite + React, Vue, Svelte), and give the project a name (e.g., code-demo). Dyad generates a standard npm project with a typical Next.js layout:
code-demo/
├── app/
│ ├── page.tsx
│ ├── layout.tsx
│ └── api/
├── components/
├── lib/
├── package.json
└── next.config.jsThe preview pane automatically opens http://localhost:3000 and starts the dev server – you never need to run npm run dev manually.
Real‑time Iteration Example
Prompt: “Make a Todo app that can add, delete, and mark tasks as complete, using Tailwind CSS, dark theme, cards with rounded corners and shadows.” The AI generated a set of files and a bare Todo page appeared in the preview.
Further prompts – “switch to dark theme”, “add rounded corners”, “add priority tags (high, medium, low) with colors” – each resulted in immediate code changes and refreshed UI, demonstrating a fast edit‑preview loop.
Supabase Integration Walk‑through
Enter Supabase Project URL and Service Role Key in the Integrations panel. Dyad then generated auth/sign‑up and auth/sign‑in pages, client initialization code, CRUD API routes for a todos table, and Row‑Level Security policies.
After registering a test account, added Todo items persisted in Supabase’s PostgreSQL – verified both in the app preview and the Supabase dashboard.
Security Scan and Fix
Running the Security panel flagged /api/todos as lacking JWT verification. After prompting the AI to fix it, the route was updated with Supabase Auth JWT checks, and the scan cleared.
import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs';
import { cookies } from 'next/headers';
export async function GET() {
const supabase = createRouteHandlerClient({ cookies });
const { data: { user } } = await supabase.auth.getUser();
if (!user) {
return Response.json({ error: 'Unauthorized' }, { status: 401 });
}
const { data } = await supabase.from('todos').select('*').eq('user_id', user.id);
return Response.json(data);
}Git Commit History
Each AI modification automatically creates a Git commit. The author performed over twenty iterations; an accidental change was undone three times with a single click, far faster than manual git checkout.
MCP Extension Demo
Enabling Chrome DevTools MCP let the AI read a console TypeError: Cannot read property of undefined, locate the offending component, and add a null‑check, fixing the error automatically.
One‑Click Deployment
After finishing the code, clicking Publish authorizes OAuth, selects a GitHub repo, and deploys to Vercel. The app becomes available at your-app.vercel.app within thirty seconds. The author did not use this step for the prototype.
Complete Case Study: Two‑Hour Todo App with Auth
New App → Next.js → todo-auth-demo (Dyad generates skeleton and starts preview).
Prompt for a Todo page with Tailwind dark theme, rounded cards, and shadows – AI creates app/page.tsx, component files, and the preview updates.
Integrate Supabase Auth via the Integrations panel; AI generates app/auth/page.tsx, lib/supabase.ts, middleware, and protects routes.
Prompt to store Todo data in Supabase PostgreSQL with per‑user isolation and priority field; AI creates the todos table, API route, RLS policy, and UI updates.
Run Security scan, fix missing JWT verification, and confirm the warning disappears.
Iterate, commit, and finally run the app locally – all done in under two hours.
Project Repository
https://github.com/dyad-sh/dyad
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.
