Introduction
Personalayout is a visual AI component builder. You describe what you want, the agent builds a production-ready React + Tailwind component, and you download it directly into your codebase — wired for AI-driven personalization from day one.
What is Personalayout? #what-is
Personalayout lets you build UI sections visually, mark which props the AI agent is allowed to change, and download a production component already wired for personalization. The @personalayout/sdk is the client-side runtime: it reads the user's profile, calls the Personalayout backend, and re-renders the component with personalized props before the first paint — with no personalization logic in your codebase.
Build your component #build
Open Personalayout and describe the section you need in the chat. The agent writes the component — complete with typed props, Framer Motion animations, and Tailwind classes — while the live preview updates on the right.
The agent writes button.tsx, badge.tsx, and index.tsx in real time while the preview renders at 1280 × 720. Predicted CTR and CVR are shown at the bottom. When you're happy, click Download Adaptive (top-right).
The preview panel shows exactly what your users will see — real pixels at your chosen viewport. Predicted CTR and CVR scores update as the component changes. When you're happy with the result, click Download Adaptive.
Key concepts #concepts
| Concept | What it is |
|---|---|
| Component | A UI section (hero, pricing, checkout) authored in the builder. Has a stable componentId used by the SDK to fetch personalization. |
| Editable elements | The props the agent is allowed to change at runtime. You choose these in the Download modal. Everything else is frozen — the agent will never touch it. |
| Skill | Personalization rules in plain language: "Adapt the CTA tone to the user's urgency level", "Rewrite the headline for the user's industry". Baked into the downloaded file. |
| userData | The live user profile you pass from your app: { plan, industry, country }. The richer the profile, the more precise the personalization. |
| Variant | A resolved snapshot — the specific prop overrides the agent returned for a given user profile. Variants are tracked separately so you can compare performance across segments. |