Vibe coding means describing what you want in plain language and letting AI write the code. You do not need programming experience. If you can describe an app, you can build one. This vibe coding beginner tutorial walks through the entire process, from install to a running app on your machine, in about five minutes.
What you need before you start
- A computer running Mac, Windows, or Linux.
- An internet connection (for downloading Dyad and connecting to an AI provider).
- An API key from at least one AI provider. Google Gemini has a generous free tier and is a good starting point. You can create a Gemini API key here.
That is it. No accounts to create on Dyad's side, no credit card, no sign-up form.
Step 1: Download and install Dyad
Go to dyad.sh and download the installer for your operating system. Dyad is a desktop app built on Electron. It runs locally, so your code and project data stay on your machine.
Run the installer. On Mac, drag Dyad to your Applications folder. On Windows, run the .exe. On Linux, use the .AppImage or .deb package.
Open Dyad. You will see the main screen with a prompt to create your first app.
Step 2: Add your API key
Before you can chat with AI, you need to connect a model provider.
- Open Settings (gear icon).
- Find the AI Providers section.
- Paste your API key for the provider you want to use (Google Gemini, OpenAI, Anthropic, or OpenRouter).
If you are using Google Gemini's free tier, paste your Gemini API key and you are ready to go at zero cost.
Dyad also supports local models if you want to run everything offline, but for this vibe coding beginner tutorial, an API key is the fastest path.
Step 3: Create a new app
Click New App. Dyad will ask you for a name. Call it whatever you want. Something like "my-first-app" works fine.
Dyad sets up a project folder on your machine with a standard code structure. You own this code. You can open it in any editor, push it to GitHub, or move it anywhere.
Step 4: Write your first prompt
This is the vibe coding part. In the chat panel, describe what you want your app to do. Be specific. The more detail you give, the better the result.
A vague prompt:
Build me a to-do app.
A better prompt:
Build a to-do app with a clean, modern design. It should have an input field at the top where I can type a task and press Enter to add it. Each task should have a checkbox to mark it complete and a delete button. Completed tasks should have a strikethrough style. Store everything in local storage so it persists on refresh.
Paste your prompt and press Enter. Dyad sends your description to the AI model, which generates the code. You can watch the files being created in real time.
Step 5: See it running
Dyad shows a live preview of your app right next to the chat. Once the AI finishes generating code, the preview updates automatically. You do not need to run any terminal commands or configure a dev server.
If the preview takes a moment on the first run, that is normal. Dyad installs npm packages in the background.
Click around. Test your app. If something looks off, type a follow-up message in the chat like:
Make the background dark gray and the text white.
The AI edits the code, and the preview updates again.
Step 6: Iterate and refine
Vibe coding is conversational. Keep chatting to add features, fix issues, or change the design. A few examples of follow-up prompts:
- "Add a filter bar with buttons for All, Active, and Completed."
- "Move the delete button to the right side of each task."
- "Add a counter at the bottom showing how many tasks are left."
Each time you send a prompt, Dyad creates a new version automatically. If the AI makes a change you do not like, open the version history and restore a previous state. You never lose progress.
What to do when something goes wrong
The AI will not get it right every time. That is expected, even for experienced vibe coders. A few tips:
- Undo fast. If a change broke something, restore the previous version instead of trying to fix it with more prompts.
- Start a new chat. If the conversation gets long and the AI starts going in circles, create a fresh chat for the same app. The code carries over, but the context resets.
- Be specific about the problem. Instead of "this is broken," say "the delete button removes the wrong item from the list." The more context you give, the better the fix.
- Try a different model. If one model struggles with your request, switch to another in Settings. Dyad supports OpenAI, Anthropic, Google Gemini, OpenRouter, and local models. No single model is the best at everything.
Where to go from here
You have a working app. Here is what you can do next:
- Connect GitHub. Dyad has built-in GitHub integration, so you can push your project to a repository and share it.
- Add a database. Dyad supports Supabase integration for apps that need a backend.
- Extend with MCP servers. You can connect external tools and APIs through MCP server support.
- Edit visually. Dyad includes a visual editing mode for making UI changes without writing prompts.
- Read the chatting guide for tips on writing prompts that get better results.
Dyad is open-source (MIT license, with FSL 1.1 for pro features) and has an active community. If you get stuck, the subreddit and GitHub issues are good places to ask for help.
This vibe coding beginner tutorial covered the basics, but there is a lot more to explore. The best way to learn is to keep building. Pick an app idea you actually want, describe it in the chat, and iterate from there.
