跳到正文
DEV Community· Kaezee·· 3 小時前AI 評分51

Kaezee 開發 Augur,為 React 應用加入單題用戶回饋

I built a one-question feedback tool because research tools cost more than my app makes

AI 導讀

Kaezee 開發 Augur,為 React 應用加入單題用戶回饋,能在指定操作後提問,並提供分類回報及指定按鈕的連按記錄。回應可存入開發者自選的存放方案,模組不讀取用戶在應用內輸入或建立的內容。Augur 支援 React 18+,可複製資料夾或使用 shadcn CLI 加入專案,採 MIT 授權。

正文

There's a bird that rides around on rhinos, the oxpecker. It eats the ticks, which is the textbook version. But it also likes to keep a wound open and drink from it, so biologists still argue about whether it's a helper or a small parasite. The rhino keeps it around anyway, because the bird calls out when something's coming. In Swahili its name literally means the rhino's guard.

I ended up building one of these birds for my app, and I tried quite hard to make it the good kind.

The problem

I have been building a writing tool on my own, and somewhere along the way I needed to know if the things in it were actually working the way I intended. Did the import land the way people expected? Was it easy to come back after three weeks away? Did the save button actually feel like it saved?

Liking an app and sticking with it are two different things. One small bad experience is enough to make someone leave, and usually they don't tell you what it was.

There are tools that do this already, the ones that ask real users what they thought, and they're good. But they're mostly priced for teams that have a research budget, and for a solo builder that's a lot more than pocket change.

What Augur does

Demo of Augur

It's a small module that lives inside your React app. It just sits there quietly, and a couple of seconds after someone does something that matters, it asks them one question. All they need to tap is yes, not really or not sure, and if they want to say more they can add a line. Then it goes quiet.

It also works as the feedback button tucked in the corner, with a small panel for something broke, something's confusing or something's missing. Already have your own help button? Keep it and call augur.open() from it. When someone uses it, it sends you only what you need to fix the issue: the page, the browser and the last few errors. Never anything people typed or made inside the app.

You can also hook it onto specific buttons, and it'll count when people start pressing the same one over and over. You know, the rage taps when you're in a lift and the door refuses to close. From my experience that's kinda the moment someone stops believing the app is doing anything.

You just label the buttons you care about. Three presses within a second gets recorded quietly: the label, the page and the count. Nothing else, and unlabelled buttons are never watched.

<button data-augur="save-entity" onClick={save}>Save</button>

It came out of a writing tool, but honestly it doesn't care what your app does.

Setup in three steps

It's not an npm package. You copy the folder into your project, so the code is yours to read and change. It works with React 18+, including Vite, Next.js and Remix, and has zero dependencies.

1. Copy the augur/ folder into your src/, or use the shadcn CLI:

npx shadcn@latest add https://kaezee.github.io/Augur/r/augur.json

2. Pick a store. This is the one seam between Augur and your database:

  • LocalStore uses localStorage, for demos and dev on one device
  • SupabaseStore(client) uses Supabase. Run sql/schema.sql once
  • HttpStore({ endpoint }) talks to your own API, and you implement the routes
  • or implement the AugurStore interface in augur/store.ts

3. Configure a trigger, mount once, and emit.

import { Augur, augur, SupabaseStore } from "./augur";

const store = new SupabaseStore(supabase); // or LocalStore / HttpStore
"checkout.done": { enabled: true, version: 1, delayMs: 3000,
  maxAsks: 1, dismissKill: 2, question: "Did that go through as expected?" }
<Augur userId={session.user.id} store={store} config={MY_TRIGGERS} />
await placeOrder(cart);
augur.emit("checkout.done");

emit() is fire-and-forget. Augur's caps decide whether a prompt actually shows. If you emit something that isn't configured, it gets logged and shown in the admin, not silently dropped.

Or, if you don't want to do any of that, paste this into Claude Code or Cursor, whichever one you use. It'll go through your app, suggest a few moments worth asking about, check the plan with you, and set the whole thing up:

Add Augur (in-app feedback) to this app: https://github.com/kaezee/Augur
Read AGENTS.md in that repo first and follow it exactly. Audit this app and propose
where Augur should ask, and check the plan with me before you write any code.
If you can't open the link, stop and tell me.

Why it's built this way

One question, at most. The caps are strict on purpose: one prompt per session, one per user every few days, a quiet period after any answer, and limits per trigger on how often it asks and how many dismissals it takes before it stops. If people learn that a popup shows up every time they do something, they stop reading it.

Three answers, fixed. Yes, not really, not sure. No star ratings, no NPS, no matrix questions. I don't want a score. I want to know whether one specific thing worked.

It never reads what people type. No external assets, no fonts, no network calls of its own. Caps are enforced locally on the device. That's the wound I didn't want it drinking from.

Your answers go into your own database. Nothing goes anywhere else.

The admin view

Admin View

There's an optional admin section you mount behind your own route:

<AugurAdminSection store={store} hostConfig={MY_TRIGGERS} />

The Results tab gives you a short summary and a table per trigger, plus the notes people left. Honestly, the notes are most of the value. A summary tells you what most people felt, but when you read them yourself you catch the one person who explains exactly why.

The Settings tab lets you reword questions, tune the caps and timing, send yourself a preview, or switch everything off, all without a deploy. Skip the admin import entirely and collection still works, with a smaller bundle.

What it can't do yet

  • It only works with React for now.
  • It's only running in a couple of places so far, mine being one of them, so I don't know how it would hold up with a hundred thousand people.
  • Adding a new trigger needs a code change, because it needs an emit() in your source.
  • It's MIT licensed, so use it however you like. Each prompt has a small "by Augur" credit, which you can switch off with byline={false}. If you do, a mention or a star is what keeps it free.

Try it

If you're building something on your own and want to know if it works, I'd really like you to try it, and tell me where it pecks too hard.

GitHub logo kaezee / Augur

In-app feedback for React: one well-timed question, a category panel, and quiet friction signals. Copy the folder, pick a store, and your coding agent proposes where it asks.

Augur

In-app feedback for React apps. One well-timed question, three answers, an optional line. Your coding agent picks where it asks.

CI License: MIT Zero dependencies

Try the live demo →

Stable and maintained. Issues get an answer within two weeks.

Augur asking one question in an order-management app, a few seconds after a shipping label printed

Augur is in-app user feedback for React and TypeScript. It asks one question at a real moment in your product ("Was it easy to export that report?"), takes one of three answers and an optional line, then gets out of the way. It is not a form builder, not an NPS widget, not a survey tool It exists to catch honest reactions at the moment they happen, without ceremony.

Already have a help or bug button? Augur can be it. Its feedback button opens a small panel: "What's on your mind?" with Something broke / confusing / missing then a line. Use the built-in button, or keep your own and call augur.open()…

Or click around the live demo first.

Oh, and it's called Augur because I liked the idea of something that could tell how things were going. I only found out recently that the Roman augurs did exactly that, by watching birds.


What's the one moment in your product you wish you could ask people about? Tell me in the comments, I'd genuinely like to know.


The longer story behind it is on my Substack:

The bird on the rhino - KaeZee

Some helpers feed on what they fix. I tried to build one that doesn’t.

favicon krishnachandranramachandran.substack.com

來源:DEV Community · dev.to