ComposeKit gives you production-ready components — charts, forms, cards, and more — that you can drop into any React app and style to match your brand. Use the AI Playground to generate widgets or end-to-end prototypes from a prompt, screenshot, or JSON data — then share instantly with a preview or code link. The Server SDK generates UI layout schemas from LLM or AI output — the Client SDK renders them Just-In-Time, making ComposeKit ideal for AI agent responses and dynamic LLM-driven interfaces.
# install the SDK
npm install @brainpiper/composekit
# peer dependencies
npm install react react-domBuilt on Radix UI primitives and shadcn/ui, styled with Tailwind CSS. Input, Select, Button, Chart, Card, Tabs, Stepper, Accordion, and more — accessible, composable, and theme-aware out of the box.
Point ComposeKitRenderer at a widget ID and it fetches, loads, and renders the widget at runtime. Publish in Studio and changes go live instantly.
Import individual component plugins and assemble layouts in code. Tree-shakeable, typed, and Webpack / Vite compatible.
Use the AI Playground to generate React widgets or end-to-end UI prototypes from a prompt, screenshot, or JSON data — no signup required. Share instantly with a preview link or a code link. For single widgets, BrainPiper Studio lets you refine with drag-and-drop and publish to CDN.
The Server SDK generates UI layout schemas from LLM or AI output. The Client SDK renders them using design system components — enabling dynamic, Just-In-Time UI for AI agent responses and LLM-driven interfaces.
Pass a data object and receive granular onUpdate callbacks. Every field change is reported with a dot-path — no global form state needed.
Override any design token — colours, radius, shadows — with a single theme object or by setting CSS custom properties globally.
Pick the mode that fits your workflow — or mix them in the same app.
Import any component directly — no renderer, no schema. Use ComposeKit as a styled component library inside your own layouts.
import { ComposeKitChart } from '@brainpiper/composekit/chart';
<ComposeKitChart
type="bar"
series={salesData}
seriesKeys={['revenue']}
xAxisKey="month"
/>Plugins load from BrainPiper's CDN at runtime. Pass a widgetId (Studio-built) or a layout JSON (static or from ComposeKitServer) — widgetId takes priority if both are provided.
import { ComposeKitClient, ComposeKitRenderer } from '@brainpiper/composekit';
ComposeKitClient.init({
clientId: 'YOUR_CLIENT_ID'
});
<ComposeKitRenderer
widgetId="4c6e51bc-59c1-4d54-afff-20bb54311dab"
data={{ userId: 'u_001' }}
onUpdate={(path, val) => console.log(path, val)}
/>All plugins bundled into your app. Pass a widgetId (Studio-built) or a layout JSON (static or from ComposeKitServer) — widgetId takes priority if both are provided.
import { ComposeKitClient, ComposeKitRenderer } from '@brainpiper/composekit';
ComposeKitClient.init({
clientId: 'YOUR_CLIENT_ID',
disableCdn: true
});
<ComposeKitRenderer
widgetId="YOUR_WIDGET_ID"
data={{ revenue: 42000 }}
onUpdate={(path, val) => console.log(path, val)}
/>All components are fully typed, accessible, and theme-aware.
ComposeKit is published to the public npm registry under the @brainpiper scope. It supports React 18+ and ships with full TypeScript types.
# npm
npm install @brainpiper/composekit
# yarn
yarn add @brainpiper/composekit
# pnpm
pnpm add @brainpiper/composekitConnect the BrainPiper MCP server to Claude Code, Cursor, Codex, Windsurf, or any MCP-compatible editor. Add one config file and your AI gets live access to your component library — correct component names, real prop signatures, and working code examples on every generation.
// .mcp.json (project root)
{
"mcpServers": {
"brainpiper-mcp": {
"type": "http",
"url": "https://studio.brainpiper.com/portal/be/nodejs/apis/mcps/page-builder",
"headers": {
"client-id": "your-client-id",
"api-key": "your-api-key"
}
}
}
}Use the AI Playground to generate widgets or end-to-end prototypes from a prompt, then share with a preview or code link — or open BrainPiper Studio to design visually and embed with one line of JSX.