CodeGeeX可通过四种方式辅助生成React组件：一、VS Code插件本地生成；二、官网Web界面快速验证；三、CLI命令行批量生成；四、结合JSDoc提升类型安全性。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
如果您需要根据一段功能描述快速生成符合 React 规范的组件代码，CodeGeeX 可以作为辅助工具提供初步实现。以下是几种可行的操作路径：
一、使用 CodeGeeX 插件在 VS Code 中直接生成
该方法依赖本地 IDE 环境与插件协同，适用于已有项目结构且希望保持上下文连贯性的开发场景。
1、在 VS Code 扩展市场中搜索并安装 CodeGeeX 插件。
2、打开一个 React 项目中的 .tsx 或 .jsx 文件，在光标处输入注释形式的功能描述，例如：// 一个带搜索框和结果列表的用户查找组件，支持实时过滤。
3、按下快捷键 Ctrl+Enter（Windows/Linux）或 Cmd+Enter（macOS） 触发代码生成。
4、检查生成的 JSX 结构、状态定义及事件绑定是否符合预期，特别注意 useState 和 useEffect 的使用位置。
二、通过 CodeGeeX 官方 Web 界面提交描述生成
该方式无需配置开发环境，适合快速验证逻辑结构或获取初始模板，但需手动复制粘贴至项目中。
1、访问 https://codegeex.cn 并登录账号。
2、选择模型版本为 CodeGeeX2-6B，语言设置为 TypeScript 或 JavaScript。
3、在输入框中明确写出功能需求，例如：创建一个 React 函数组件，接收 users 数组 props，渲染可折叠的用户卡片列表，点击标题展开详情，支持按姓名模糊搜索。
4、点击生成后，从输出结果中提取完整的组件代码块，确认包含 import React from 'react' 和默认导出语句。
CodeGeeX 2.21.0是智谱AI推出的AI编程助手版本，对Inline Chat功能进行了重大优化，包括UI设计升级、支持流式输出以提升响应速度，并新增“查看思路”按钮以便理解代码原理。同时，该版本在编辑器中新增CodeLens控件，支持一键“解释”代码或“添加注释”。目前该工具对个人开发者免费开放。
三、在命令行中调用 CodeGeeX CLI 工具生成
该方式适用于集成到脚手架流程或批量生成多个组件原型，要求系统已安装 Node.js 与对应 CLI 工具。
1、全局安装 CLI：npm install -g codegeex-cli。
2、在项目根目录下执行命令：codegeex generate --lang tsx --prompt "实现一个带分页的订单表格组件，每页显示10条，支持按状态筛选"。
3、CLI 将在当前目录生成 OrderTable.tsx 文件，检查其中是否包含正确的 TypeScript 接口定义（如 Order 类型）。
4、运行 npx eslint --fix OrderTable.tsx 自动修复基础格式问题。
四、结合 JSDoc 注释引导 CodeGeeX 精准生成
该方法提升生成代码的类型安全性和可维护性，适用于团队协作中需统一接口规范的场景。
1、新建文件 UserProfileCard.tsx，顶部添加完整 JSDoc 注释，明确 props 类型、默认值及组件用途。
2、在注释中写明：@param {string} avatarUrl - 用户头像地址，为空时显示默认图标。
3、在文件末尾保留空函数体：const UserProfileCard: React.FC
4、将光标置于 return null 行，调用 CodeGeeX 插件补全实现，确保返回 JSX 中正确使用 avatarUrl 和其他 props。
