The Vite React starter is a single-page app for your project's content: the help center with search, the changelog, the blog, your pages, a read-only roadmap and the site widget. It reads Kookee from the visitor's browser on every visit, so a change shows on the next page load, and it builds to plain files for any static host that can send every address to index.html. The code is on GitHub at kookee-dot-dev/starter-vite-react, under the MIT license. To see it first, open the live demo, which shows the content of a made-up invoicing app.
Search engines see an empty page until the JavaScript runs. Use this starter for a help center or a changelog that sits next to your product. For pages that should rank in search, start from the Next.js, TanStack Start or Astro starter instead.
Deploy it
In your project, open API keys under Connect and click Create Key. Copy the key.
On the starter's GitHub page, click Deploy with Vercel, and paste the key when Vercel asks for
KOOKEE_API_KEY.Once Vercel shows the app's address, or you add your own domain, open Settings → Project in Kookee and add it to the Allowed Origins card. The key ships inside the app's JavaScript. While the list is empty, any site can use it from a browser; once it has an entry, every site that uses this project from a browser has to be on it, including a widget on your product's own site. Only owners and admins can change the list.
The app now shows your project's name in the header and your published content on every page. Without a key it shows a short setup guide instead.
On your own machine, clone the repository, run npm install, put the key in .env.local, add http://localhost to Allowed Origins (the field takes no port, and this covers 5173), and run npm run dev. The key, KOOKEE_ROADMAP and KOOKEE_STATUS are read when the app is built, so changing any of them takes a rebuild.
On another host, deploy the dist folder that npm run build writes, and send every address to index.html: on Netlify with a public/_redirects file holding /* /index.html 200, on Cloudflare with not_found_handling = "single-page-application" in the assets block of your Wrangler configuration.
What the app shows
Address | What it shows |
|---|---|
| The newest posts and changelog entries, and your help categories |
| Categories and search as you type; a category's articles; an article with its table of contents and the "Was this article helpful?" vote |
| Changelog entries, 12 at a time with "Load more"; an entry with reactions |
| Posts, 12 at a time with "Load more"; a post with its table of contents and reactions |
| Up to 100 open feedback posts, most voted first, by column, read-only |
| Your status page, once you turn it on: incidents, maintenance and each component's uptime over 90 days; an incident with its updates, with times in the visitor's zone |
| Your pages, such as |
The header has a "What's new" badge for your latest changelog entries, and a link to your hosted portal when it is on. Under the header, a pill shows the title of the newest announcement the visitor hasn't dismissed, however old. It opens a dialog that lists the ten newest, without the ones the visitor dismissed; a click on one shows it in full. Dismissals stay in the visitor's browser; to take an announcement down for everyone, unpublish it.
The site widget appears on the next page load after you save its settings under Site widget → Customize. Set KOOKEE_ROADMAP to false to hide the roadmap. To show your status page at /status, with a "Status" link in the header, set KOOKEE_STATUS to true and rebuild, once you have set the page up as Set up a status page describes.
The app uses your project's default language only. A help article without a category has no address in the app and is left out, and so is a page whose slug is blog, changelog, help, roadmap or status. A page with the slug status is left out even while the status page is off.
What it costs
Nothing is cached, so every page a visitor opens reads Kookee with your key. Opening the app reads the project, the latest changelog entries and announcements, and your pages for the header and footer; after that, each page reads what it shows. An announcement opened in the dialog, help search, the widget's Help tab and article reader, reactions and helpful votes are requests too. All of them count toward the monthly API requests of the project owner's account, which all its projects share, and toward the project's limit per minute, shared by every visitor; Rate limits, plans and error handling lists each plan's allowance. The status page reads the status again every minute while its tab is visible, and those reads count toward neither the monthly requests nor the project's limit per minute: they have a rate limit of their own, ten times that limit. The widget's settings and its AI chat are not API requests, but each chat answer uses one of the account's monthly AI answers.
Every time a blog post, page or help article loads, it counts a view. Help article views decide the popular articles in the widget and on your portal. Changelog entries count no views.
The key in the app
Anyone can copy the key from the app's code and spend your requests and AI answers with it. It reads what is published, adds reactions and votes, searches help, asks the assistant and sends widget feedback, and cannot touch drafts or change content. Allowed origins stop other sites' browsers, not scripts; API keys and security explains how to replace a key.
Continue reading
Build a help center with the React components: the components the starter's help pages use.
Reading Kookee content with React hooks: the hooks behind every page of the app.
Using the React components with Next.js, TanStack Start or Vite: links, routing and the other framework details.