Skip to content

01-getting-started.md

Latest commit

 

History

History
159 lines (114 loc) · 4.16 KB

01-getting-started.md

File metadata and controls

159 lines (114 loc) · 4.16 KB
layout default
title Chapter 1: Getting Started with Dyad
parent Dyad Tutorial
nav_order 1

Chapter 1: Getting Started with Dyad

Welcome to Dyad! If you've ever dreamed of building applications using just natural language, you're in the right place. Dyad opens up the exciting world of AI-powered app development, where you can describe what you want to build and watch the code come to life.

What Makes Dyad Special?

Dyad revolutionizes app development by:

  • Natural Language Development - Describe your app in plain English
  • AI-Powered Code Generation - Let AI handle the complex coding
  • Local First - Run everything on your machine for privacy
  • Open Source - Free and customizable for everyone
  • Rapid Prototyping - Go from idea to working app in minutes
  • Learning Tool - Understand development concepts through AI guidance

Installing Dyad

Prerequisites

Before getting started, ensure you have:

  • Node.js 18 or later
  • At least 4GB of RAM
  • A modern web browser

Installation Steps

# Clone the Dyad repository
git clone https://github.com/dyad-sh/dyad.git
cd dyad

# Install dependencies
npm install

# Start the development server
npm run dev

First Time Setup

  1. Open your browser to http://localhost:3000
  2. You'll see the Dyad welcome screen
  3. Click "Create New Project"
  4. Choose a project name and template

Your First AI-Generated App

Let's create a simple to-do list app:

  1. Describe Your App: Type in the prompt box:

    Create a to-do list app where users can add, edit, and delete tasks

  2. Generate: Click the "Generate" button

  3. Review: Dyad will show you the generated code and preview

  4. Customize: Modify the prompt to add features:

    Add categories for tasks and a due date picker

Understanding the Interface

Main Components

  • Prompt Input: Where you describe your app requirements
  • Code Editor: Shows the generated code
  • Preview Panel: Live preview of your app
  • Component Library: Pre-built components you can use
  • Settings: Configure AI models and preferences

Workflow

  1. Plan: Think about what your app should do
  2. Describe: Write a clear, detailed prompt
  3. Generate: Let Dyad create the initial code
  4. Refine: Make adjustments and add features
  5. Test: Try out your app in the preview
  6. Deploy: Share or export your finished app

Tips for Better Prompts

Be Specific

Instead of: "Make a blog" Try: "Create a blog with user authentication, post creation, comments, and categories"

Include Features

  • User interface elements
  • Data structures
  • Functionality requirements
  • Styling preferences

Example Prompts

Simple App:

Build a weather app that shows current conditions and 5-day forecast

Complex App:

Create an e-commerce store with product catalog, shopping cart, user accounts, and payment integration

Troubleshooting

Common Issues

App Won't Generate

  • Check your internet connection
  • Ensure you have enough RAM available
  • Try simplifying your prompt

Preview Not Loading

  • Refresh the page
  • Check browser console for errors
  • Clear browser cache

Code Errors

  • Review the generated code for syntax issues
  • Use the "Fix Errors" button in Dyad
  • Manually edit the code in the editor

Next Steps

Congratulations on creating your first AI-generated app! In the next chapter, we'll explore more advanced prompting techniques to build sophisticated applications.

Ready for more? Continue to Chapter 2: Natural Language App Building

Generated by AI Codebase Knowledge Builder

Depth Expansion Playbook

How These Components Connect

flowchart TD
    A[Install Dyad: download .dmg or .exe] --> B[Launch Dyad desktop app]
    B --> C[Configure LLM provider API key]
    C --> D[Open or create project]
    D --> E[Enter natural language prompt]
    E --> F[Dyad generates code changes]
    F --> G[Review diff in editor]
    G --> H{Accept?}
    H -->|Yes| I[Changes applied to files]
    H -->|No| J[Reject / modify prompt]
Loading