@cloudparse/up-backoffice-sdk

Build plugins for the Up backoffice.

npm install @cloudparse/up-backoffice-sdk react react-dom
npm install -D vite @vitejs/plugin-react @tailwindcss/vite tailwindcss

vite.config.ts:

import tailwindcss from "@tailwindcss/vite";
import react from "@vitejs/plugin-react";
import { backofficePlugin } from "@cloudparse/up-backoffice-sdk/vite";
import { defineConfig } from "vite";

export default defineConfig({ plugins: [react(), tailwindcss(), backofficePlugin()] });

src/styles.css:

@import "@cloudparse/up-backoffice-sdk/plugin.css";

src/index.tsx:

import { definePlugin, miniappApi } from "@cloudparse/up-backoffice-sdk";
import { Compass } from "lucide-react";
import styles from "./styles.css?inline";

function AdminPage() {
  // miniappApi targets the mini-app backend with an admin scoped token.
  return <div className="p-8 text-sm text-muted-foreground">Hello</div>;
}

export default definePlugin({
  id: "my-app",
  name: "My app",
  icon: Compass,
  pages: [{ path: "", title: "Admin", component: AdminPage }],
  styles,
});

vite build produces dist/plugin.js, the artifact to publish to the Up backend. See AGENTS.md for the full flow.

UI kit

Admin pages are built from the SDK components: PageHeader, SectionHeader, Card, StatTile, Table*, IconButton/RowActions, Modal/ModalActions, ConfirmModal, DangerZone + useDangerZoneDelete, ImageUpload, Switch/SettingRow, Input, Textarea, Select, SearchInput, Tabs, LoadMoreButton, LoadingState, Banner, Badge, EmptyState, GraphQLPlayground... Full list with props: claude-plugin/skills/up-backoffice-plugin-builder/references/sdk-api.md.

Storybook

npm run storybook (http://localhost:6007) shows every component with the backoffice theme; npm run build-storybook builds the static site (also built in CI).

Claude Code

claude-plugin/ is a Claude Code plugin: /new-backoffice-plugin <id> scaffolds a plugin, and the up-backoffice-plugin-builder skill carries the API reference, recipes and rules. See claude-plugin/README.md.