☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
comate可自动生成带状态管理、事件处理和响应式逻辑的react组件代码。需在.tsx/.jsx文件空白处写//开头的中文注释描述功能、交互与数据结构，或用@comate指令在组件内精准扩展现有逻辑，支持跨组件通信与副作用集成，依赖项目上下文自动适配react版本、typescript及ui库。
用自然语言描述react组件需求，让comate自动生成带状态管理、事件处理和响应式逻辑的可运行代码，避免手动拼接jsx、usestate和useeffect的重复劳动。
生成带状态的React函数组件
在VS Code或JetBrains IDE中打开一个React项目（确保已安装Comate插件并登录），光标定位到.tsx或.jsx文件的空白处。
输入以//开头的中文注释，明确描述组件功能、交互行为和数据结构。例如：//生成一个用户登录表单，包含邮箱输入框、密码输入框、记住我复选框和提交按钮，提交时校验邮箱格式并显示错误提示。
按下Ctrl+Enter（Windows/Linux）或Cmd+Enter（macOS）触发Comate生成——它会自动识别上下文中的React版本、TypeScript启用状态及项目中已有的UI库（如Ant Design或MUI），输出完整组件代码。
【必须写清楚初始状态和交互反馈】如果注释里没提“初始值为空”“提交后清空表单”或“错误提示要实时出现”，Comate可能生成无状态渲染或缺少副作用逻辑的代码，导致运行时报错或交互失灵。
用@Comate指令精准控制生成逻辑
方法一：在已有组件内部调用
将光标放在组件函数体内部（比如return语句上方），输入@Comate加具体要求，例如：@Comate为这个登录表单添加邮箱格式正则校验，并在失去焦点时触发验证。
Comate会直接在当前组件内插入useEffect或自定义Hook调用，不新建文件，也不破坏原有结构。
方法二：跨组件状态联动生成
当需要父子组件通信时，在父组件中写注释：//子组件LoginForm通过onSubmit回调向父组件传递{email, password, remember}对象，父组件需接收并打印到控制台。
Comate会同时生成子组件的props接口定义、事件绑定逻辑，以及父组件中对应的useState声明和回调函数实现，确保类型安全且可立即运行。
注意：若项目未启用TypeScript，Comate仍会生成JSDoc类型注释，但不会强制添加interface——这点比Copilot更灵活，也更贴近真实开发节奏。
生成带副作用的复杂交互组件
第一步：描述完整用户路径
在新文件顶部写注释：//生成商品列表页，从/api/products获取数据，加载中显示骨架屏，失败时显示重试按钮，点击后重新发起请求；每项含“加入购物车”按钮，点击后更新右上角购物车徽标数字。
第二步：确认依赖注入点
Comate会自动检测项目中是否已存在axios/fetch封装、是否使用React Query或Redux Toolkit。若检测到src/lib/api.ts存在默认导出的request函数，它会优先调用该函数而非裸fetch。
第三步：生成可运行代码块
输出内容包含：useState管理loading/error/data三态、useEffect处理初始化请求、useCallback包装加入购物车逻辑、useContext或useReducer模拟购物车状态更新——所有代码均符合ESLint + Prettier默认规则，无需二次格式化。
【关键前提：当前文件必须有合法的React组件结构】如果光标落在纯JavaScript工具函数里，Comate不会强行生成JSX，而是返回“请在React组件文件中使用此功能”的提示。
