DESIGN

Installation and usage

The installer adds the complete framework and its UI dependencies to your React project.

01 — Set up your project

Initialize shadcn once.

pnpm dlx shadcn@latest init

02 — Install the framework

pnpm dlx shadcn@latest add https://podie.dev/framework-registry/design.json

03 — Add it to your interface

import { DesignFramework } from '@/components/frameworks/design';

export default function App() {
  return <DesignFramework initialView="workspace" />;
}

Starting a new project? Download the ZIP, extract it, run npm install and npm run dev.

Everything in the frontend

• Infinite pan, pointer anchored zoom and touch pinch
• Editable artboards, images, layers and properties
• Undo, redo, duplicate and project import
• PNG, SVG and editable project export

Responsive layouts, light and dark themes, keyboard shortcuts and browser saved projects are included. The assistant uses local demo replies. Connect your own server through the typed adapter prop for real model generation; API keys stay on your server.

Connect your agent

const adapter = async ({ prompt, kind, messages, model, signal }) => {
  const response = await fetch('/api/agent', {
    method: 'POST', signal,
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ prompt, kind, messages, model }),
  });
  if (!response.ok) throw new Error('Agent unavailable');
  return response.json(); // { message, files? } or { message, boards? }
};