@kepoai/ui

Viewer-side React hooks and UI helpers for Kepo widgets.

Kepo is an AI desktop dashboard for building, installing, and running widget plugins. Use this package inside a Kepo widget viewer to read plugin storage, access configuration, detect widget size, call provider actions, open popup layers, embed browser panes, and call Kepo AI from React components.

Website: kepo.ai
Plugin store: kepo.ai/store

What This Package Provides

@kepoai/ui is the viewer-side SDK for React-based Kepo widgets. It is designed for developers building desktop dashboard widgets, AI widgets, browser-backed widgets, and plugin UI for Kepo.

Common use cases:

• Read and update widget-local data with useStorage.
• Read user configuration with useConfig.
• Render responsive layouts with useSizeType and useCn.
• Call provider actions with useAction.
• Detect dark mode with useDarkMode.
• Open browser or custom popup layers with usePopupLayer.
• Embed a controlled browser pane with BrowserPane.
• Call Kepo AI from viewer code with useAI.

Installation

pnpm add @kepoai/ui @kepoai/types

Import

import { useConfig, useSizeType, useStorage } from '@kepoai/ui/hooks'

Example

import { useConfig, useSizeType, useStorage } from '@kepoai/ui/hooks'

export default function ExampleWidget() {
  const name = useConfig<string>('Name', 'Kepo')
  const size = useSizeType()
  const [count, setCount] = useStorage('count', 0)

  return (
    <button onClick={() => setCount(count + 1)}>
      {name} widget is running in {size} mode: {count}
    </button>
  )
}

Popup Layers

Use usePopupLayer when a widget needs to open a browser view or a custom popup surface managed by Kepo.

import { usePopupLayer } from '@kepoai/ui/hooks'

export function OpenDocsButton() {
  const { openPopupLayer } = usePopupLayer()

  return (
    <button
      onClick={() => openPopupLayer('browser', { url: 'https://kepo.ai' })}
    >
      Open Kepo
    </button>
  )
}

Browser Pane

Use BrowserPane and useBrowserPaneController when a widget needs an embedded browser experience.

import { BrowserPane, useBrowserPaneController } from '@kepoai/ui/hooks'

export function SitePreview() {
  const controller = useBrowserPaneController()

  return <BrowserPane controller={controller} initialUrl="https://kepo.ai" />
}

AI

Use useAI when a widget needs Kepo AI from viewer code.

import { useAI } from '@kepoai/ui/hooks'

export function SummarizeButton() {
  const ai = useAI()

  async function summarize() {
    const result = await ai.complete({
      prompt: 'Summarize this widget state for a dashboard user.',
    })
    console.log(result.text)
  }

  return <button onClick={summarize}>Summarize</button>
}

Related Packages

• @kepoai/provider: provider-side storage, configuration, browser, network, scheduling, and AI APIs.
• @kepoai/types: shared plugin, widget, size, and configuration types.

Keywords

Kepo UI SDK, Kepo React hooks, AI dashboard widgets, desktop dashboard widgets, React widget SDK, plugin viewer SDK, browser widget UI, TypeScript dashboard components.