Skip to content
Extensions

Built-in extensions

Calculator, theme switcher, page tools, AI actions, keyboard shortcuts and bring-your-own-key settings.

import { calculator, themeSwitcher, page, aiActions, shortcuts } from '@qikbar/qikbar/extensions'
import { byok } from '@qikbar/qikbar'

createQikbar({ extensions: [calculator(), themeSwitcher(), page(), aiActions(), shortcuts(), byok.settings()] })

Each one is a short, readable file. They’re a good place to learn the API before you build your own.

Calculator

Type math straight into the bar and press ↵ to copy the result.

Input Result
12 * (3 + 4) 84
2^10 1,024
15% of 80 12
200 + 10% 220
sqrt(2) * pi 4.4428829382
5 km in mi 3.1068559612 mi
100 f to c 37.7777777778 °C
1.5 gb in mb 1,536 MB

It supports + - * / ^ %, parentheses, implicit multiplication (2pi), sqrt cbrt abs round floor ceil sin cos tan log ln exp min max, and units for length, mass, data, time, volume and temperature. It uses a safe parser, never eval.

Theme switcher

themeSwitcher(options?) adds Toggle Dark Mode (⌘⇧L), plus Use Light/Dark/System Theme. By default it toggles the dark class and color-scheme on <html> and saves the choice in localStorage.theme. Pass set(mode) to use your own theme logic:

themeSwitcher({ set: (mode) => setTheme(mode), shortcut: false })

Page

page({ headings? }) adds browser actions (Go Back, Go Forward, Reload, Copy Page URL, Scroll to Top/Bottom, Print, Share) and an On This Page source that searches headings with an id. That makes it handy for docs and long pages.

page({ headings: 'article h2[id], article h3[id]' })

AI actions

Requires ai. aiActions() adds:

  • Summarize This Page: streams a summary into a detail view
  • Explain Selected Text: appears only when text is selected
  • Translate: asks for a language with an argument, then translates the selection or the page

Shortcuts

shortcuts() adds a searchable Keyboard Shortcuts list of every command that has a shortcut, plus the bar’s built-in keys.

AI settings (bring your own key)

byok.settings() adds AI Settings, a form where users choose a provider and paste their key, and Remove AI API Key. Use it with ai: byok(). See providers.

Edit this page on GitHub