Vibe coding: build a small app yourself

With vibe coding, you describe in plain words what you want to make. The assistant writes the code, shows you the result and adjusts it based on your feedback. You don't need to know how to program. For example, you can make a quiz for a training session, a small game or a handy tool for your colleagues.

All you need is the desktop application. You don't have to install Node.js or git: the app comes with both.

1. Choose a working folder

Create an empty folder on your computer, for example TrainingQuiz, and choose it as your chat's working folder. How this works is explained in Local file access. The assistant only works in this folder.

2. Describe what you want

Be as specific as possible about what you want to make. For example:

Make a quiz for a workshop on information security as a single HTML page. Ten multiple-choice questions, with large buttons, a score at the end and a button to start again.

The assistant shows a simple page like this with the app's built-in web server. The result appears in the built-in browser: the Browser button (the globe icon) on the right of the top bar. Read more in Local servers and the built-in browser.

Not happy with it? Just say what should change:

Make the buttons green, and when an answer is wrong, show the correct answer.

Your own photos, and letting the assistant look

Attach a photo to your message and ask:

Put this photo on the web page.

The assistant saves the photo in your project folder, for example in img/, and places it on the page. This also works with an image the assistant has just made for you.

Is something wrong with the page in the built-in browser? Ask:

Look at what is wrong with the page.

The assistant then looks at the text, a screenshot and the error messages of the page. See Letting the assistant look.

When the assistant opens a page in the built-in browser itself, it waits until the page has loaded and gets to see its error messages, such as a script error or a file that does not load. It fixes them before saying that it works. Then it tries the page out like a user: it clicks buttons, fills in fields and presses keys, and fixes the errors that appear. Whether everything works the way you intend, you check yourself.

3. Larger apps

If you want something bigger, such as an app with several screens, the assistant can create a project with, for example, Vite and React:

In this folder, create a React app with Vite that lets colleagues book a meeting room. Install everything, start the app and show the result.

You approve starting such a project (for example with npm create vite@latest) on the command card. After that, the assistant installs packages. You approve that too, or you turn on Allow package installs without asking. See Installing packages. Don’t want a card for every command? Choose Trust this project on the first card.

4. Save versions

A version is a snapshot of your project. If you don't like a change, you can go back to an earlier version. At a good moment, ask the assistant:

Save a version.

The first time, the assistant starts a version history for the folder. Files that look like secrets, such as passwords or keys (including Google API keys), never end up in a version. The assistant tells you when it skips something.

5. Put your project on GitHub

GitHub lets you store your project online. That gives you a backup, and you can continue working on it from another computer.

Connect GitHub

Everyone connects their own GitHub account. No account yet? First create a free one at github.com/signup.

1. Go to Settings and find the GitHub panel under Desktop status.
2. Click Connect GitHub. The app shows a code and opens github.com/login/device in your browser.
3. Enter the code on GitHub (Copy code copies it for you) and grant access. If the page didn't open, click Open GitHub.
4. The panel now shows Connected as @your-name.

What GitHub asks. GitHub shows the app AI-School Desktop by HandiHow-B-V and asks for access to your repositories (repo): read and write, including private repositories. This access is needed to create and update your project. Only grant it if the page is on github.com.

Code expired? The code is valid for about 15 minutes. If it has expired, click Connect GitHub again.

Repositories of an organisation:

• If the organisation restricts third-party apps, click Request next to the organisation on the consent screen. You can also do this later at github.com/settings/applications > AI-School Desktop.
• An owner of the organisation approves it under the organisation's Settings > Third-party access > OAuth application policy.
• Without that approval your own repositories work, but the organisation's do not.

Using another account? Click Disconnect and sign out of github.com in your browser (or use a private window) before you connect again. Otherwise GitHub uses the account you are already signed in with.

note

Older versions of the app show "GitHub sign-in is not available in this version of the app yet." Then update the app.

Put online and update

Then ask, for example:

Put this project on GitHub.

The assistant shows a card with the exact address and the labels Built into the app and Network on. Click Run to continue or Deny to stop. A new repository is private unless you ask for a public one. If the address is not github.com or the repository becomes public, the card warns you. When putting a project online, you see which files will be sent.

Later you can say, for example:

• "Put the new version online." The assistant sends your new versions to GitHub.
• "Get the latest version." The assistant fetches changes from GitHub.
• "Download the project https://github.com/naam/project to this folder." The assistant downloads an existing project.

You can also download a public project without connecting GitHub. To put a project online or create a new repository, you need the connection.

6. Safety tips

• New repositories are private. Only make one public if everyone may see the code.
• Never put passwords, keys or other secrets in your app.
• Using a Google API key (it starts with AIza, like the web key of a Firebase app)? Put it in a file the assistant keeps out of versions, such as .env. If the key stays in your code, that file is not put online.
• Always check the address on the card before you click Run.
• The connection is stored encrypted with your user account on this computer. The assistant never sees your GitHub key. If you work on a shared computer, click Disconnect when you are done.
• Disconnect only removes the connection from this computer. To revoke access completely, do so on GitHub under Settings > Applications.