aiti-devtools

aiti-aiAbout 2 minproductaiti-devtoolsinject

aiti-devtools — In-Page AI Debugging Assistant (the Injection Core Package)

In one sentence: bring AI to the live scene of page development — inject aiti-devtools + Inspector floating UI + the MCP bridge, so AI and humans collaborate organically on the same page. Forms: ① active adaptation by developers (this package) → ② Chrome extension / platform built-in → ③ IDE plugins (vscode/idea). Current version 0.2.x: all 21/21 self-checks pass (verified on both native HTML and React), including a Huawei HarmonyOS real-device scaling fix.

1. Quick Start (Form ①)

<script src="aiti-devtools/inject.js"></script>
<script>
  createAitiLauncher('http://localhost:3000/todo', {
    aiUrl: 'http://localhost:30141/ai/chat?session=abc', // AI session page (optional)
    bridgeBase: 'http://localhost:8777',                   // MCP bridge (optional)
    bridgeToken: 'dev',
  });
</script>

Two buttons — 💬 AI messages / (Inspector) — appear at the bottom-right corner of the page; capabilities are plug-and-play.

2. Capability List

Three-step picking + selection fine-tuning (↑↓◀▶/#/✓) + touch mode + keyboard navigation (DFS)
Host page / nested same-origin iframe, three zones selectable (host / f0 / f1…)
HUD bubble + toolbar fully avoid the selection, 8-way navigation, compact magnification on small screens
Physical screen anchoring: getPhysViewport normalization + counter-zoom; UI stays pinned under browser zoom/scroll

Event Freezing → Allowlist Matrix

7 event categories frozen selectively, real click pass-through, polymorphic allow plans (default / all-allowed / all-frozen / custom)
⏱ Speed panel: animation slowdown, scroll/wheel interception, timer slow-motion, network simulation, forced errors, scenario presets, on-site snapshots, viewport simulation 375-1440, touch simulation

CDP-like Command Set (8 Domains, 42 Commands)

Domain	Capabilities
DOM	query/traverse/edit elements, attribute operations
CSS	style reading/overrides, computed style
Input	click/type/keyboard/wheel (incl. gesture bridge)
Page	navigate/reload/screenshot/performance
Runtime	eval (allowed by default within a session + audit)
Storage	localStorage/sessionStorage/cookie
Performance	metrics collection
Browser	clipboard/download/dialog/fullscreen/playback (executed by the host, transient-activation safe)

Framework Detection and fileLocation

React / Next / Vue / Svelte (dev-build _debugSource / __file / __svelte_meta) → unified output {framework, file, line, component} — AI errors locate straight to the source file, paired with the bridge's open_file event to open it in the editor.

MCP Bridge

node aiti-bridge --port 8777 (built-in MCP endpoint: stdio + HTTP + Streamable HTTP, plus the SSE page bridge)
MCP tools: page_exec / page_snapshot / bridge_status / user_* (user interaction tool family)

Refresh Recovery

AI window open/closed state + position/size, allow plan, viewport, and target URL are all persisted (localStorage) and automatically restored on refresh.

3. Security Boundaries

eval is allowed by default within a session (visible in the panel audit)
Dangerous commands (removeNode/reload/navigate/localStorage persistence) pop a confirmation card + confirmation queue
Browser-restricted operations go through the gesture bridge (a real user click, required every time)
The bridge authenticates with a token; right-click/middle-click allowed; cross-origin iframes skip injection

Plugin matrix: aiti-devtools plugins; usage docs: aiti-devtools.