DEV Community

Ivan Starkov
Ivan Starkov

Posted on

Using Opencode as a Copy-Paste Backend for UI Prototyping

#ai #tooling #ui #productivity

Link to repo

Sometimes I use OpenCode (and tools like Claude Code, Codex CLI, etc.) as a copy-paste backend: I prepare context in the browser, then paste it into an AI coding tool.

At its core, most modern AI coding workflows boil down to two operations:

  1. Selecting the relevant context.
  2. Chatting about that selection.

In my setup, a tiny browser script handles the selection: it collects and shapes the context, writes a structured payload to the clipboard, and then I paste it into OpenCode, Claude Code, Codex CLI, or any other AI coding tool just to see how it behaves - without building a real AI backend.

How the selection script works

When you hit Escape in the browser, the selection script grabs:

  • your prompt (e.g. “Change color to red”)
  • the current selection (code / text)
  • some structure around it

and writes a structured payload to the clipboard, like:

<edit>
  prompt: Change color to red
  where:<selection>{context}</selection>
</edit>
...
{ADDITIONAL_PROMPT}
Enter fullscreen mode Exit fullscreen mode

You can try this in the browser here: https://istarkov.github.io/ai-cli-edit/ — press Cmd + E or Ctrl + E to enter editing mode and see the generated payload.

Making it work across different models

Slow, higher-end reasoning models can usually consume this raw structure without extra help.

Smaller or faster models often need the {ADDITIONAL_PROMPT} with more explicit instructions — for example:

  • how to interpret <selection>…</selection>
  • what to edit and what to keep identical
  • formatting rules
  • which tools to call

Keep editing instructions isolated

You could dump all of this into CLAUDE.md or AGENTS.md, but those files are usually already full of generic rules and global guidelines.

Better approach: keep editing-specific instructions in a separate, dedicated place.

In OpenCode, this is done via Primary Agents. Create a focused file like ./.opencode/agent/edit.md that defines:

  • your editing rules
  • model parameters
  • tools
  • project-specific context (jargon, naming, edge cases, etc.)

In the Claude ecosystem, the same idea appears as Skills: small, targeted capabilities that encapsulate exactly this kind of task-specific behavior.

Link to repo

Top comments (0)