需先初始化AionClaw客户端并配置正确endpoint，再创建带会话锁监听与工具调用能力的组件，通过Context透传实例，动态注册并渲染；须配置工具权限，否则组件无响应。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
在React项目中为AionClaw智能体添加新组件，核心是让前端能动态注册、渲染并通信控制AI Agent能力模块，而非简单挂载UI元素。必须确保组件能触发工具调用、接收会话锁状态、响应OpenClaw运行时事件。
确认AionClaw SDK已集成并初始化
打开项目根目录下的src/index.js或main.tsx，检查是否已完成AionClaw客户端初始化。未初始化会导致后续所有组件无法连接Agent会话。
执行npm install @aionclaw/sdk安装官方SDK包；若使用TypeScript，还需执行npm install -D @types/aionclaw__sdk。
在入口文件顶部导入并初始化客户端：import { AionClawClient } from '@aionclaw/sdk'; const claw = new AionClawClient({ endpoint: 'http://localhost:3001' });。该endpoint必须指向已启动的AionClaw后端服务，【默认端口3001不可省略，且不能与React开发服务器端口冲突】。
创建可通信的Agent能力组件
新建src/components/EmailSender.tsx，定义一个具备工具调用能力的函数组件。
使用useEffect监听AionClaw会话状态变更：当claw.session.status === 'locked'时，禁用发送按钮并显示“AI正在执行中”提示；状态变为'unlocked'后自动恢复交互。
组件内声明sendEmail异步函数，内部调用claw.invokeTool('email.send', { to, subject, body })。注意：tool name必须与AionClaw后端注册的工具名完全一致，大小写敏感。
这一步操作起来很简单，直接把文件拖进去就行。但若跳过claw.invokeTool的try/catch包裹，错误将直接抛到全局，导致整个React应用白屏。
动态注入组件到AionClaw UI容器
第一步：在src/App.tsx中引入React.Context创建AionClawContext，将claw实例和当前会话ID作为Provider值向下透传。
第二步：在src/components/AionClawPanel.tsx中使用useContext(AionClawContext)获取实例，通过claw.registerComponent方法注册新组件：
claw.registerComponent('email-sender', EmailSender);
第三步：在面板渲染逻辑中调用claw.getComponent('email-sender')获取已注册组件的React Element，再用{component}插入JSX树。该方法返回的是已绑定上下文的组件实例，无需手动传props。
注册必须在AionClaw客户端完成初始化之后执行，否则registerComponent会静默失败且无报错提示。
配置工具权限与会话锁联动
方法一：在AionClaw后台管理界面（http://localhost:3001/admin）进入「工具权限」页，勾选当前用户角色对email.send工具的调用权限。未授权时组件点击无响应，控制台也不会报错。
方法二：在React组件内部手动校验权限——调用await claw.hasPermission('email.send')，返回false时显示权限不足Toast。
方法三：利用AionClaw的会话锁机制，在组件useEffect中监听claw.on('session:lock', handler)事件，锁定时自动清空表单输入框，防止用户重复提交。
