SDK & Integration

Start a site from the TanStack Start starter

Updated 12 views

The TanStack Start starter is a finished site for your project's content: the blog, the changelog, the help center with search, your pages, a read-only roadmap and the site widget. It renders on Cloudflare Workers, and Workers Cache keeps each page at the edge for six hours. The code is on GitHub at kookee-dot-dev/starter-tanstack-start, under the MIT license. To see it first, open the live demo, which shows the content of a made-up invoicing app.

Deploy it

  1. In your project, open API keys under Connect and click Create Key. Copy the key.

  2. On the starter's GitHub page, click Deploy to Cloudflare. Cloudflare copies the repository to your GitHub account, asks for KOOKEE_API_KEY, and from then on deploys every push to the copy's main branch.

  3. Once the Worker is live, open Settings → Project in Kookee and add its address to the Allowed Origins card: your own domain, and the workers.dev address if you use it. While the list is empty any site can use the key; once it holds an address, browsers on other sites are refused. Only owners and admins can change it.

The site now shows your project's name in the header and your published content on every page. Without a key, every page shows a short setup guide instead.

On your own machine, clone the repository, run npm install, copy .dev.vars.example to .dev.vars with the key in it, add http://localhost to Allowed Origins (it covers every port), and run npm run dev.

What the site shows

Address

What it shows

/

The newest posts and changelog entries, and your help categories

/blog, /blog/{slug}

Posts, 12 per page; a post with its table of contents and reactions

/changelog, /changelog/{slug}

Changelog entries; an entry with reactions

/help, /help/{category}, /help/{category}/{slug}

Categories and search as you type; a category's articles; an article with its table of contents and the "Was this article helpful?" vote

/roadmap

Up to 100 open feedback posts, most voted first, by column, read-only

/status, /status/incidents/{id}

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

/{slug}

Your pages, such as /about

It also serves sitemap.xml, robots.txt, llms.txt and an RSS feed for the blog and one for the changelog. Each post, changelog entry, article and page takes its title, description, canonical address, Open Graph tags and JSON-LD from the entry and its SEO fields. When the site answers on more than one address, add a SITE_URL variable under the Worker's Settings → Variables and Secrets, so canonical addresses use the one you want.

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. The Worker reads them with the header and footer, so publishing or unpublishing one shows once the cached pages refresh. Dismissals stay in the visitor's browser; to take an announcement down for everyone, unpublish it.

The site widget appears once you have saved its settings under Site widget → Customize and the cached pages have refreshed, or right after a deploy; from then on it loads its tabs and texts in the browser, so later changes to them show within about a minute. 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" in the copy's wrangler.jsonc and push it, once you have set the page up as Set up a status page describes.

The site uses your project's default language only. A help article without a category has no address on this site 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.

How fresh the pages are

Every page's reads from Kookee run on the Worker, also when a visitor moves between pages. Workers Cache keeps each answer for KOOKEE_REVALIDATE_SECONDS, six hours by default, then serves the old copy for up to a day while it fetches a new one. Publishing does not clear the cache: a change shows once a visit after that window has refreshed the page, or right after a deploy, because each new version of the Worker starts with an empty cache. A missing page is cached for five minutes, and an error is never cached.

The status page is the exception: the page is cached like the others, but the status on it is read in the visitor's browser when it opens and again every minute while its tab is visible.

What it costs

When a cached page expires, the Worker reads from Kookee with your key: the project, the latest changelog entries, the ten newest announcements (one request for the list and one for each), the pages for the footer, and what the page shows. In your visitors' browsers, 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; Rate limits, plans and error handling lists each plan's monthly requests. Status page reads in the browser do not count toward them: they have a rate limit of their own, ten times the project's limit per minute.

With Workers Cache on, Cloudflare bills requests for the site's static files at the standard Workers request rate. The widget's AI chat is not an API request: each answer uses one of your account's monthly AI answers.

Reading a blog post, page or help article also counts one view. On this site a page counts its view when Workers Cache refreshes it, not once per reader, so view counts run low. A help article opened in the widget's reader counts a view each time, and help article views decide the popular articles in the widget and on your portal. Changelog entries count none.

Anyone can copy the key from your pages 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

Was this article helpful?