OnlyFrames

Select an element in a local page, describe the change, and send source-aware context to Codex or Claude Code.

Quick Start

From the project you want to edit:

npx only-frames@latest init
npx only-frames@latest start --agent codex

Open the printed local URL, click the OnlyFrames button, select an element, and send a request.

OnlyFrames stores its local runtime files in only-frames/ and adds that directory to .gitignore.

Agents

Codex:

npx only-frames@latest start --agent codex --codex-model gpt-5.5 --codex-effort low

Claude Code:

npx only-frames@latest start --agent claude --claude-permission-mode acceptEdits

File-only mode:

npx only-frames@latest start --agent file

Vite React Source Annotations

For more accurate JSX source locations in Vite React projects, add the Vite plugin:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { domPilot } from "only-frames/vite";

export default defineConfig({
  plugins: [react(), domPilot()]
});

The plugin adds data-dom-pilot-source attributes to intrinsic JSX DOM elements during development.

Requirements

• Node.js 20 or newer.
• For Codex agent mode: installed and logged-in codex CLI.
• For Claude agent mode: installed and logged-in claude CLI.

Publish

Maintainers can publish with:

npm login
npm publish

Use npm run pack:dry-run before publishing to inspect the tarball contents.