> For the complete documentation index, see [llms.txt](https://docs.responsiveads.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.responsiveads.com/developers/npx-rad-coder.md). # npx rad-coder {% embed url="" %} 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 ```bash npx rad-coder ``` 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 ` 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 `` 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. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.responsiveads.com/developers/npx-rad-coder.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.