Studio

Visual interface for your overrides: list, set, and clear them, and view live SDK snippets. Mount Studio in your app and pass the backend URL that exposes the ModelKit API (e.g. your API base + the route where the ModelKit router is mounted). Supported backends: Hono, Express.

Install and use

bash

npm install @benrobo/modelkit-studio
# or: bun add @benrobo/modelkit-studio

tsx

import { ModelKitStudio } from "@benrobo/modelkit-studio";
import "@benrobo/modelkit-studio/styles";

<ModelKitStudio apiUrl="http://localhost:3000/api/modelkit" theme="dark" />

Use your real backend URL (e.g. https://api.yourapp.com/api/modelkit).

Props

interface ModelKitStudioProps {
  apiUrl: string;
  theme?: "light" | "dark" | StudioThemeOverride;
  themeBase?: "light" | "dark";
  className?: string;
  classNames?: ClassNameOverrides;
  queryClient?: QueryClient;
}

Themes

Built-in: dark, light, choco, ocean, sunset, forest, purple, crimson, cyan, amber. Or pass a StudioThemeOverride for custom colors, fonts, spacing.

tsx

import { ModelKitStudio, type StudioThemeOverride } from "@benrobo/modelkit-studio";

const customTheme: StudioThemeOverride = {
  colors: { primary: "#ff00ff", background: "#000", text: "#fff" },
  fonts: { body: "Inter", mono: "Fira Code" },
};
<ModelKitStudio apiUrl="..." theme={customTheme} />

Styling

Import @benrobo/modelkit-studio/styles once. Studio uses the mk: Tailwind prefix so it won't clash with your app.

tsx

import "@benrobo/modelkit-studio/styles";
<ModelKitStudio classNames={{ container: "max-w-7xl", buttonPrimary: "bg-green-500" }} />