Build your first app with AI and put it live, starting from the klickops starter

01What you need (and what you don't)

You need three accounts: GitHub (free, this is where your code lives), an AI coding tool such as Claude Code or Cursor, and klickops. That is the whole list.

You do not need to know a programming language, install a database, or understand servers. The starter and the platform carry that part. If you can describe what your app should do in plain sentences, you have the main skill this guide requires.

02Start from the template

Open the starter on GitHub and click “Use this template”, then “Create a new repository”. Name it after your app. You now own a copy of the starter; the original never changes under you.

What is inside, in plain words: one small web app with a page you can see, a backend that stores data in PostgreSQL and files in object storage, and two working examples (notes and file uploads) that show how everything fits together. Next to the code sit the guardrails for your AI: a project briefing (CLAUDE.md), coding rules, and a step-by-step recipe for adding features. Tests and automatic checks run on every change you push.

The examples are deliberately disposable. They exist so the AI has a working pattern to copy, and they get deleted once your real app takes shape.

https://github.com/natrontech/klickops-starter → Use this template

03Describe the app you want

Clone your new repository to your machine (GitHub shows the exact command under the green “Code” button) and open the folder with your AI tool. Then describe what you want, the way you would brief a contractor. Concrete beats clever: say what a user sees, what gets saved, and what happens when something goes wrong.

Because the briefing and rules ship inside the repository, the AI does not guess at structure. It follows the existing patterns: where a new page goes, how data is saved, how errors are shown, and it writes tests alongside the code because the rules demand it.

One habit makes this dramatically more reliable: ask the AI to run the project's checks before it declares anything done. The starter has a single command for this, and the AI knows it.

Replace the notes demo with a simple CRM for my agency:
companies with a name, contact person, email and a status
(lead / active / lost). I want to add, edit and filter them
by status. Keep the file upload, I will attach offers later.
Run make check and make test when you are done.

04Put it live

Push your changes to GitHub (your AI tool can do this for you if you ask). Then, in klickops: create a project, choose “Deploy from repo”, and pick your repository. klickops recognizes how the starter is built, builds it for you, and deploys it. A minute later your app has its own https:// URL with a valid certificate, ready to open on your phone.

From now on this stays automatic: every push to GitHub builds and ships the new version. Change something with your AI in the morning, and it is live before your coffee is cold.

05Attach a database and file storage

Fresh out of the template, the app runs happily with no services attached; the start page shows “Database not bound” and “Storage not bound” badges instead of failing. Attaching the real thing is two short trips to the klickops UI.

Database: in your project, add a PostgreSQL database (the defaults are production-shaped; you only pick a size). klickops notices that your app expects a database connection and suggests the binding; accept it, and on the next start the app connects, creates its tables on its own, and the badge flips to “Database connected”.

File storage: add a Bucket to the project and bind its address and credentials to the app. The starter's README lists the five variable names to fill in; it is a copy-paste job, done once. After that, uploads on your page land in real object storage.

Neither of these steps involves passwords in files or configuration on a server. The platform injects the credentials, and rotating or resizing later does not touch your code.

06Keep going

The loop you now have is the whole workflow: describe a change to your AI, let it run the checks, push, and it is live. The automatic checks on GitHub re-run the tests on every push, so a broken change tells you before your users do.

Two habits keep the project healthy as it grows. First, keep asking for tests; the rules in the repository push the AI that way, and you should too, because tests are what let you change things fearlessly later. Second, when the demo notes and files have served their purpose, ask the AI to remove them; a small codebase is the one AI tools navigate best.

And when you outgrow the single app: the same project can hold more apps, scheduled jobs, and more databases. The starter is the seed, not the ceiling.