npx rad-coder

A CLI framework for AI-powered creative coding. rad-coder scaffolds a project, opens a local editor with a live preview, and gives you two ways to drive an AI agent

Quick start

bash

npx rad-coder <creative-id>

Running this:

• Downloads the latest framework assets and a fresh custom.js

• Scaffolds a project directory tied to your creative ID

• Opens a local editor on custom.js

• Starts a console process that serves a preview page and watches for file saves

You'll typically arrange three windows: the editor (where you edit custom.js), the preview page (your creative running in the browser, with dev tools available), and the console running npx rad-coder. Saving in the editor auto-refreshes the preview.

What gets generated

File	Purpose
custom.js	The file you and the agent edit. Pre-populated with boilerplate.
rad-coder.json	Project configuration, including the flowline and use settings tied to the creative ID.
agent.md	Instructions and setup notes that shape how the agent behaves inside this project.
Boilerplate code	Minimal starting structure the agent extends.

Two ways to use the agent

1. Autonomous mode (MCP + Playwright)

Run an MCP server in a separate terminal that exposes a Playwright-driven browser to the agent. The agent can then navigate to a URL, take screenshots, and inspect the live DOM — verifying its own output instead of guessing. This is the mode for building a full creative from a reference with minimal supervision.

You also supply reference materials (JS, CSS from an existing creative). The agent reads those alongside the live DOM, so it has both the target behavior and the target structure to work from.

2. In-editor Agent command

Inside the editor, invoke Agent directly with a focused instruction — for example:

Agent, I have this CSS. I want to load this into the head as a style.

The agent writes the code for that specific task into custom.js This is the mode for incremental edits while you're already in the code: small additions, refactors, or quick utilities. Because saves auto-refresh the preview, you see the result immediately.

The dev loop

A typical session looks like this:

1. Bootstrap: npx rad-coder <creative-id> opens the editor and preview.

2. Write or generate code in custom.js, either yourself or via the Agent command.

3. Save. The preview auto-refreshes. Watch the dev tools console for errors.

4. Iterate. Use breakpoints in dev tools, inspect the DOM, and either edit directly or call Agent for the next change.

5. Save code in the editor. When you are happy with the code copy it to editor custom JS dialog.

Example prompts

Prompting tips

The agent does noticeably better when you give it the same things a contractor would need:

• Point at reference files explicitly. "Use reference-creative.js and reference.css" beats "match the old one."

• Give it a test URL. Without one, autonomous mode can't use Playwright to verify itself.

• Name the DOM landmarks. Class names, IDs, and parent elements ("tabs are inside the <a3> element") cut down on guessing.

• Specify the output file. Tell it to write into custom.js so it doesn't scatter code.

• State style preferences up front. "Use simple code," "put CSS at the top of the JS file," "prefer IDs over nth-child selectors," "use template literal strings for multi-line CSS" — anything you'd otherwise correct in review.

Notes and caveats

• The framework is under active development; behavior and generated files may change.