CODING

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/coding.json

03 — Add it to your interface

import { CodingFramework } from '@/components/frameworks/coding';

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

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

Everything in the frontend

• Task conversations and agent states
• Editable source files and navigation preview
• Diff review, accept and revision workflow
• Command palette, themes and local persistence

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? }
};