Next project
Boto Sonar: AI agents that find customers and suggest what to post
Boto · 2026
View the project
UX/UI case studies
About the author
Erick NobreSenior Product Designer and UX Engineer. Piracicaba, Brazil.
I came up with ClippCut for people who work by appointment and still keep their schedule in a notebook and on WhatsApp. I built the whole product, from the brand to the database, plus an assistant that tells the owner, in Portuguese, how much the business has made.
The product
Small barbershops, salons, clinics and studios book appointments by message, in the middle of serving a customer.
The barber stops a haircut to answer “any openings?”, writes down who confirmed in a notebook and only finds out how much they made when closing the month’s books. Whoever cancelled gets crossed out on a page nobody looks at again.
ClippCut gives each business a booking page: a link with services, prices and open slots, made for an Instagram bio. Customers book on their own and get the confirmation on WhatsApp. The owner sees the team’s schedule, products and reports in a dashboard that installs on the phone like an app.
I started with the data model. Every business is a company, including people who work alone, and permissions depend on each person’s role in the company (owner, admin or staff). For each login, the database returns only the rows that belong to that company.
Services, prices and open slots in one link. Duration protects the schedule: a 1h30 service only shows up where 1h30 fits.
Every booking goes into a queue in the database. Every two minutes, a dispatcher sends the messages through a gateway of our own, retrying when a send fails.
One schedule per professional, and the customer chooses who they want to see. Staff see their own numbers; the owner sees everyone’s.
Forecast (what is confirmed in the schedule) and realized (what was actually served), side by side, so nobody confuses a promise with cash in hand.
Where AI comes in
The answer always shows the same number as the reports screen.
In the dashboard, the owner asks in plain Portuguese: “how much did I make last month?” or “how many people came in on the 22nd?”. ClippCut already had those answers. They come from the same database functions that build the reports, with the rules for time zones and for forecast and realized revenue.
That is why the project’s rule was that the AI never calculates. If the model added things up on its own, it would become a third source of truth, able to contradict the number the person has just seen on the screen next to it. A single mismatch would be enough for nobody to trust the feature again.
I ruled out letting the model write SQL: appointment notes are free text written by customers, and any query that forgot a status filter would come back with revenue different from the report.
The model receives the question, today’s date in the business’s time zone and a closed catalog of queries. It returns only a JSON: which query and which period.
An Edge Function turns the period into dates and calls the Postgres function with the login of whoever asked. Access rules apply just as on any other screen.
The model receives the values already formatted in reais and only writes the sentence. Alongside it goes a card with the data and a “See in report” shortcut.
// “how much did I make last month?” { "ferramenta": "metricas_periodo", "periodo": { "tipo": "mes_passado" } }
Three calls instead of function calling. The free models on OpenRouter have uneven support for tools, and the list changes. Strict JSON, with validation and one repair attempt, works with any text model.
Numbers ready for step 3. Language models get arithmetic wrong. If the model received 4320.00 to format, one day it would write R$ 43,20. It receives “R$ 4.320,00”, already in the Brazilian format, with the instruction to copy the value.
Failing without an error. If the writing step fails because of a timeout or a usage limit, the answer comes from a sentence template written in code, with the same numbers. The feature gets terser, but it keeps answering.
Screens
ClippCut is made for the Brazilian market, so the screens are in Portuguese.
How I built it
Design and code in the same pair of hands, with AI as a pair programmer.
Name, logo and the marketing website in HTML, SCSS and Vite, with a page for each segment and one for each feature.
Supabase with Postgres: per-company access rules (RLS), functions for the reports and 179 tests that run on a disposable Postgres.
Vue 3 with Pinia and Bootstrap, packaged as a PWA so it installs on the phone without going through an app store.
A message queue in the database, dispatched by pg_cron, and a self-hosted instance of the Evolution API.
The assistant uses OpenRouter models in an Edge Function. During development, I pair-program with Claude Code, with the project’s rules written in the repository itself.
clippcut.com.br for people getting to know the product, app.clippcut.com.br for people using it.
Free for a single professional, no credit card required.
Answers questions about revenue, appointments and customers, with a question quota per plan.
Idea, brand, design, code and operations, including selling it to barbershops in Piracicaba.
Contact
Tell me about the project’s context and timeline. I reply within 48 hours.