agent-devtools

Agent DevTools 是一款开源的 Vite 插件，专为 Claude Code 打造，旨在彻底改变开发者与 AI 编程助手的交互方式。传统上，向 AI 描述前端问题需要截图、手动复制代码或长篇大论地解释页面状态，过程繁琐且容易遗漏关键信息。Agent DevTools 打破了这一局限：你只需在运行中的应用界面上点击任意 UI 元素，插件便会自动捕获该元素的 DOM 信息、页面状态以及相关的源代码片段，并将这些运行时上下文直接发送给 Claude Code。

核心功能

• 一键捕获上下文：点击 UI 元素即可获取其完整的 DOM 树、CSS 样式、事件绑定等运行时数据。
• 智能关联源码：自动定位并提取与所选元素对应的源代码片段，无需手动搜索。
• 无缝集成 Claude Code：捕获的上下文直接注入到 Claude Code 的对话中，让 AI 理解你正在操作的真实页面。

主要特性

• 零配置集成：作为 Vite 插件，只需一行代码即可接入现有项目。
• 实时同步：捕获的上下文与当前应用状态完全一致，避免截图带来的信息滞后。
• 开源免费：完全开源，支持社区贡献和自定义扩展。
• 未来兼容：当前支持 Claude Code，未来计划支持更多 ACP 兼容的 AI Agent。

适用场景

• 前端调试：快速向 Claude Code 描述 UI 问题，获得精准的修复建议。
• 代码生成：基于现有界面元素，让 AI 生成或修改对应的组件代码。
• 自动化测试：将页面状态共享给 AI，辅助编写更准确的测试用例。

Agent DevTools 将“看”与“做”的距离缩短为零，让 AI 编程助手真正理解你的应用。