跪拜 Guibai
← Back to the summary

DOMagic Binds AI Code Edits Directly to DOM Nodes in the Browser

Authors: Xiaofeifei, Lanyu | Haoqianyi Frontend Tech Team

In frontend development, some problems aren't complex but are very time-consuming. For example, after seeing a DOM node on a page, it's hard to quickly reverse-lookup the corresponding source code; when changing styles, you need to constantly switch between the page and the editor; after introducing AI into the development workflow, you often encounter the problem of "AI knows what to change, but doesn't know precisely where to change it."

The DOMagic plugin focuses precisely on these development-state problems: allowing developers to directly select a target node in the browser page, initiate "AI modify styles" or "AI modify business logic," and write the modifications back to the source code file.

1. Why DOMagic is Needed

DOMagic solves a typical but chronically inefficient problem in frontend development: the lack of a sufficiently precise connection between the page, source code, and AI modifications.

Specifically, there are three core pain points:

These problems are not big individually, but when they stack up in daily development, they make a seemingly simple style adjustment or business logic change feel fragmented. Developers need to first locate the page node, then find the source code location, and then describe it to the AI or manually modify it themselves.

2. What is DOMagic

DOMagic is a development-state plugin.

Its usage is very direct: in the browser page, initiate "AI modify styles" or "AI modify business logic" on a target node, and then write the modifications back to the source code file.

The following image shows a demonstration of DOMagic's usage process:

After execution, the required change for this task is written into the source code. We don't need to open the editor during the entire process.

The image above shows the execution result; the right-side panel also displays the changes made this time.

In other words, DOMagic aims to connect the specific node on the page, the AI modification intent, and the source code file, so that modifications are no longer stuck in vague descriptions but can land on specific code.

3. DOMagic Technical Implementation Principles

🏗️ Overall Architecture

L2. Implementation Mechanisms for Different Frameworks in the Source Code Location Layer

L3. Core Capabilities of the Page Runtime Layer

L35. Communication Implementation Between Page Runtime Layer and Background Agent: Dev Server Middleware

L4. Edit Engine Layer

Main Process

Building the Source Code Context Protocol = The Input Package for AI

What it means: When you select a DOM node on the page and say "help me change this," DOMagic will reverse-lookup this node to the source code, and then organize it into a context package to send to the AI.

{
  "file": "Which file to modify",
  "line": "Approximate line number",
  "prompt": "How the user wants to modify it",
  "framework": "react/vue etc.",
  "styleSystem": "tailwind/css module etc.",
  "fullSource": "Complete source code of the current file",
  "snippet": "Code snippet near the target element",
  "target": "DOM information selected on the page",
  "importedFiles": "Content of related referenced files"
}

// Example
{
  "file": "src/pages/customer-list/index.tsx",
  "line": 128,
  "prompt": "Swap the positions of the customer name and customer ID columns",
  "editMode": "business",
  "framework": "react",
  "styleSystem": "tailwind",
  "projectRoot": "/Users/project/crm",
  "fullSource": "Complete source code of the current file",
  "snippet": {
    "startLine": 120,
    "endLine": 140,
    "code": "Source code snippet near the target element"
  },
  "target": {
    "tagName": "button",
    "preferredStyleTargets": ["self", "className", "style"]
  },
  "importedFiles": [ 
    {
      "file": "src/pages/customer-list/columns.tsx",
      "source": "./columns",
      "code": "Content of the associated referenced file"
    }
  ]
}
Output Protocol EditPlan = The Modification Plan Returned by AI

EditPlan means the AI cannot just output a paragraph of explanation; it must return a structure that a machine can execute:

{
  "summary": "What was changed this time",
  "edits": [
    {
      "file": "src/pages/customer-list/index.tsx",
      "startLine": 12,
      "endLine": 12,
      "newCode": "Replacement code"
    }
  ]
}

// Example
{
  "summary": "Changed the button background color to yellow",
  "edits": [
    {
      "file": "src/pages/customer-list/index.tsx",
      "startLine": 12,
      "endLine": 12,
      "newCode": "  return <button style={{ backgroundColor: 'yellow' }}>Search</button>"
    }
  ]
}
Hit Process

Supported Capabilities (Basically all style properties are supported)

CLI Agent Layer
Input Protocol

It can be understood as: the standard input parameter format passed to the local AI programming tool when DOMagic calls it.

{
  file,
  line,
  framework,
  userPrompt,
  snippet
}

// Example
{
  "file": "src/pages/customer-list/index.tsx",
  "line": 128,
  "prompt": "Swap the positions of the customer name and customer ID columns",
  "editMode": "business",
  "framework": "react",
  "styleSystem": "tailwind",
  "projectRoot": "/Users/project/crm",
  "fullSource": "Complete source code of the current file",
  "snippet": {
    "startLine": 120,
    "endLine": 140,
    "code": "Source code snippet near the target element"
  },
  "target": {
    "tagName": "button",
    "preferredStyleTargets": ["self", "className", "style"]
  },
  "importedFiles": [
    {
      "file": "src/pages/customer-list/columns.tsx",
      "source": "./columns",
      "code": "Content of the associated referenced file"
    }
  ]
}
Agent Execution Process

Provider Priority
codex -> claude-code -> gemini -> generic-cli

Source Code Verification:

// A React/TSX syntax verification scenario
const nextSource = applyEditPlan(context.fullSource, plan)

parse(nextSource, {
  sourceType: 'module',
  plugins: ['jsx', 'typescript'],
})

4. Quick Experience

Installation guides for frontend projects using different bundlers:

5. Summary