AionClaw可自动识别运行中前端项目结构并注入符合其技术栈规范的新接口。它实时读取Vite/webpack-dev-server内存模块、HMR通道及proxy规则，扫描请求封装文件生成适配代码，三步完成插入、调用绑定与热重载验证。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
你想在已有前端项目里加一个新接口，但又不想破坏当前技术栈风格、不改构建配置、不手动配代理或写 mock，只让AionClaw自动识别项目结构并注入符合规范的请求能力——这正是它“按项目现有框架新增接口”的核心价值。
确认项目已接入并运行
打开AionClaw客户端 → 左侧导航点击【自动化 (RPA)】→ 搜索并运行【一键启动已有前端项目】技能。该技能必须成功执行并显示“项目已就绪”，否则后续所有接口注入将无法获取真实运行时上下文。
【必须确保项目处于 dev server 运行状态，不能只停留在文件夹层面】。AionClaw不是靠静态分析 package.json 来猜接口写法，而是实时读取 Vite/webpack-dev-server 的内存模块表、HMR 热更新通道和已注册的 proxy 规则。
让AionClaw自动识别并生成适配接口
项目运行后，回到主界面 → 点击左侧【数字专家】→ 选择「前端架构师」角色 → 在对话框输入：“为当前项目新增一个用户头像上传接口，要求使用项目现有的 request 工具函数封装，路径为 /api/v1/avatar/upload，支持 FormData 提交，带 loading 和错误 toast”。
AionClaw会立刻扫描 src/utils/request.ts（或 src/lib/api.ts、src/services/http.ts 等常见请求封装位置），提取 axios/fetch 实例配置、拦截器逻辑、baseURL、token 注入方式；再根据项目是否启用 TypeScript，自动生成带类型定义的 hook 或 service 方法。
若项目未定义统一 request 封装，它会退而求其次，直接复用当前路由中最近一次 fetch/axios 调用的配置模板——比如从 login 接口的调用代码里抄 headers 和 timeout 设置。
三步完成接口注入与验证
第一步：等待AionClaw生成代码片段，点击「插入到项目」按钮 → 自动定位到 src/services/user.ts（或同类目录），在文件末尾追加 uploadAvatar 函数，并保留原有导出结构。
第二步：AionClaw同步修改 src/pages/profile/EditProfile.tsx，在对应上传按钮 click 事件中插入 useUploadAvatar() hook 调用，并绑定 onUploadSuccess 回调 → 所有类型推导、loading 状态管理、错误提示文案均与项目现有 UI 组件库（如 Ant Design/Vant/Naive UI）风格一致。
第三步：不重启 dev server，AionClaw触发热重载 → 打开浏览器控制台 Network 面板，点击上传按钮，观察请求是否携带 X-Auth-Token、是否走 proxy 到后端 /api/v1/avatar/upload、响应体是否被自动解包为 data 字段。若看到 200 且返回结构匹配你描述的“上传成功，avatarUrl: string”，说明注入完成。
