Skip to content
KinBot Docs

Mini-Apps Overview

Mini-apps are small web applications that Kins create and manage. They appear in the KinBot sidebar and can be opened as side panels or full pages, giving Kins the ability to build interactive UIs on the fly.

What Are Mini-Apps?

Section titled “What Are Mini-Apps?”

A mini-app is a self-contained web application (HTML + JSX + CSS) stored in KinBot’s database and served through its built-in web server. Kins create them using AI tools, no manual coding required.

Key features:

  • React-based with server-side JSX transpilation (no build step)
  • Component library with 50+ themed components
  • Persistent storage via key-value API
  • Backend support with server-side JavaScript (_server.js)
  • Real-time events via SSE between backend and frontend
  • Theme-aware with automatic light/dark mode support
  • Snapshots for versioning and rollback

How It Works

Section titled “How It Works”
User asks Kin → Kin calls create_mini_app → App appears in sidebar
                Kin writes files          → App auto-reloads
                Kin updates storage       → App reflects changes

Kins have full control over mini-apps through built-in tools:

ToolDescription
create_mini_appCreate a new app (HTML or template)
update_mini_appUpdate metadata (name, icon, description)
delete_mini_appRemove an app permanently
list_mini_appsList all apps for the current Kin
write_mini_app_fileWrite or update any file in an app
read_mini_app_fileRead a file’s content
delete_mini_app_fileRemove a file
list_mini_app_filesList all files with sizes
get/set/delete/list/clear_mini_app_storageManage key-value storage
create/list_mini_app_snapshotCreate versioned backups
rollback_mini_appRestore a previous version

Architecture

Section titled “Architecture”
┌─────────────────────────────────┐
│  KinBot UI (sidebar / panel)    │
│  ┌───────────────────────────┐  │
│  │  Mini-App (iframe)        │  │
│  │  • React + JSX            │  │
│  │  • @kinbot/react hooks    │  │
│  │  • @kinbot/components     │  │
│  └───────┬───────────────────┘  │
│          │ postMessage SDK      │
├──────────┼──────────────────────┤
│  KinBot Server                  │
│  • JSX transpiler               │
│  • Static file server           │
│  • Storage API                  │
│  • Backend runtime (Hono)       │
│  • SSE events                   │
└─────────────────────────────────┘

Mini-apps run in an iframe and communicate with KinBot through a postMessage-based SDK. The SDK provides hooks for React, a component library, storage, theming, and more.

Quick Example

Section titled “Quick Example”

A Kin can create a simple counter app:

// Created via create_mini_app tool
<div id="root"></div>
<script type="text/jsx">
import { useState } from "react";
import { createRoot } from "react-dom/client";
import { useKinBot } from "@kinbot/react";
import { Card, Button, Stack } from "@kinbot/components";


function App() {
  const { ready } = useKinBot();
  if (!ready) return <div>Loading...</div>;
  return <Counter />;
}


function Counter() {
  const [count, setCount] = useState(0);
  return (
    <Card>
      <Card.Header>
        <Card.Title>Counter</Card.Title>
      </Card.Header>
      <Card.Content>
        <Stack direction="row" gap="8px" align="center">
          <Button onClick={() => setCount(c => c - 1)}>-</Button>
          <span style={{ fontSize: '2rem' }}>{count}</span>
          <Button onClick={() => setCount(c => c + 1)}>+</Button>
        </Stack>
      </Card.Content>
    </Card>
  );
}


createRoot(document.getElementById("root")).render(<App />);
</script>

Next Steps

Section titled “Next Steps”