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.

Java Companion
Java Companion
Java Companion
Dyad Review: 21k‑Star Open‑Source AI Builder for Local Full‑Stack Development

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.js

The 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

Original Source

Signed-in readers can open the original source through BestHub's protected redirect.

Sign in to view source
Republication Notice

This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactadmin@besthub.devand we will review it promptly.

AI code generationNext.jsFull‑stack developmentLocal developmentSupabaseDyad
Java Companion
Written by

Java Companion

A highly professional Java public account

0 followers
Reader feedback

How this landed with the community

Sign in to like

Rate this article

Was this worth your time?

Sign in to rate
Discussion

0 Comments

Thoughtful readers leave field notes, pushback, and hard-won operational detail here.