minimax agent需按五步完成react+ts前端与supabase后端集成的注册表单：①输入含技术栈关键词的精准提示词；②确认计划含supabase初始化、数据库插入及跳转逻辑；③下载工程并npm run dev启动；④配置.env中supabase url和anon key；⑤测试提交并验证users表写入。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
想让MiniMax Agent帮你生成带表单提交功能的网页，不是只写个HTML空壳，而是包含前端验证、后端接收、数据库存入、成功跳转全流程的可用代码，必须明确指定技术栈和交互细节，否则Agent会默认输出静态页面。
第一步：在Agent平台输入精准提示词
打开 https://agent.minimax.io/ ，确保已登录账号，进入默认Agent模式。直接在输入框中粘贴以下提示词（复制整段，不可删减）：
「创建一个用户注册表单网页，含姓名、邮箱、密码三字段，前端用React + TypeScript实现，带实时校验（邮箱格式、密码长度≥6）、提交按钮禁用状态控制；后端用Supabase提供Auth认证与PostgreSQL存储，提交后跳转至/success页面并显示用户名；所有代码需分离src（前端）与supabase（后端配置）目录，一次npm run dev可启动完整服务」
【必须包含“Supabase”“React + TypeScript”“跳转至/success”等关键词】 缺少任一技术约束，Agent将退回生成纯HTML+JS静态页，无法真正提交数据。
第二步：确认任务拆解流程再执行
提交后，Agent会先展示High-level Plan，包括：项目结构设计→前端表单组件开发→Supabase Auth初始化→数据库表创建→API路由绑定→跨域配置→本地运行指令。此时页面会出现「确认执行」按钮。
点击确认前，快速扫一眼Plan里是否出现“Supabase client init”“INSERT INTO users”“redirect after submit”字样——若缺失任意一项，说明理解有偏差，立即点「重试」并补全提示词，不要跳过这步直接生成。
这一步操作起来很简单，直接把文件拖进去就行。
第三步：下载工程包并安装依赖
生成完成后，点击「下载ZIP」获取完整工程。解压到本地文件夹，打开终端进入根目录：
执行：npm install → 等待所有依赖装完（含@supabase/supabase-js、react-router-dom等）→ 再执行：npm run dev
终端输出Local: http://localhost:5173/即表示服务启动成功。此时浏览器打开该地址，表单已可交互。
第四步：配置Supabase环境变量
打开解压后的supabase/.env文件，填入你在Supabase控制台项目设置里复制的URL和Anon Key：
SUPABASE_URL=https://xxx.supabase.coSUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
【SUPABASE_ANON_KEY必须是Anon Key，不是Service Role Key】 用错密钥会导致前端调用401错误，且无任何提示信息，只能重装项目。
第五步：测试提交并验证数据库写入
在本地表单填写测试数据（如姓名“张三”、邮箱“zhang@example.com”、密码“123456”）→ 点击提交 → 页面跳转至/success?name=张三 → 打开Supabase控制台 → 进入Table Editor → 切换到users表 → 确认新记录已存在，且email_confirmed_at为空（因未启用邮件验证）。
若跳转失败但控制台无报错，检查src/App.tsx中useNavigate()是否被包裹在try/catch内——Agent生成的代码默认已处理，无需手动修改。
