BrainPiper Studio

Creating Widgets in Studio

Before you can render a widget with ComposeKitRenderer, you need to build and publish it in BrainPiper Studio. Studio gives you two ways to create widgets — an AI chat interface and a visual drag-and-drop editor.

Open BrainPiper Studio

Option 1 — Chat (AI-generated)

Open the Chat tab and describe what you want in plain language. The AI generates a complete widget layout from your prompt. You can refine it with follow-up messages or switch to the Editor tab to adjust individual components.

Example prompts

"Create a user registration form with name, email, and password fields"
"Build a dashboard card showing total revenue, orders, and active users"
"Make a product listing with image, title, price, and an Add to Cart button"

Option 2 — Editor (drag-and-drop)

Open the Editor tab to build your widget visually. Drag components from the left panel onto the canvas, click any component to configure its props and data bindings in the right panel, and arrange them into rows and columns.

Publishing and using your widget

Click Publish in the top-right corner of Studio once your widget is ready.

Copy the widget ID from the browser URL — it is the UUID at the end of the address, for example:
https://studio.brainpiper.com/portal/builder/#/chat/4c6e51bc-59c1-4d54-afff-20bb54311dab

Pass the ID to ComposeKitRenderer as the widgetId prop:

MyPage.tsx

import { ComposeKitRenderer } from '@brainpiper/composekit';

<ComposeKitRenderer
    widgetId="YOUR_WIDGET_ID"
    data={{ userId: 'u_001', name: 'Jane' }}
    onUpdate={(dataPath, value) => {
        console.log('Field updated:', dataPath, value);
    }}
/>

Auto-updates
Every time you publish an updated version of the widget in Studio, ComposeKitRenderer picks up the changes automatically on the next page load — no code change or redeploy required. This only applies when using CDN mode (disableCdn: false, the default).

Widget ID tip
The widget ID is part of your Studio URL. If you share the widget URL with a teammate, they can open the same widget in Studio directly. The same ID works across environments — you control which version is live by publishing from Studio.