Cursor从0到1实现react+fastapi项目AI换装工具：TaoToken统一Key接入与settings.json配置骨架

1. 为什么要在 Cursor 里搭一个 React FastAPI 的 AI 换装工具AI 换装工具的核心链路其实不复杂前端上传一张人物图和一张服装图后端把两张图送到图像生成模型模型返回换装结果前端展示。真正让人卡住的往往不是业务逻辑而是「AI 能力怎么接」——每个模型厂商一套 Key、一套鉴权、一套请求格式散落在前端、后端、脚本里改一次配置要翻好几个文件。我这次用 Cursor 从零搭 React FastAPI 的换装工具把 AI 通道统一收敛到 TaoToken 一个 Key 上后端只认一个 base_url 和一把 Key换模型、加功能都不用动业务代码。这篇就交付可复制的settings.json配置骨架和验证动作填入 TaoToken Key 后发起一次换装请求确认通道连通、返回结果正常帮你快速跑通前后端联调。适合谁看有基础 React / Python 能力、想用 Cursor 快速起一个 AI 图像类项目、又不想在多家模型 Key 之间来回折腾的开发者。全程不需要你手写大量代码重点是配置骨架和排障思路。2. TaoToken 前置统一 Key 与 API 通道怎么理解TaoToken 在这里扮演的角色可以理解成「AI 能力的统一入口」。你不需要在项目里为每个模型单独维护一套鉴权逻辑而是把请求都发到同一个 API 地址用同一把 Key 鉴权模型名在请求体里区分。对 FastAPI 后端来说这意味着只需要一个 HTTP 客户端封装就能覆盖换装、精修、对话等多种能力。接入前你需要准备两样东西一把 TaoToken API Key以及确认要调用的模型名。Key 在控制台的 API Keys 页面创建创建后只显示一次建议直接写进后端的.env不要硬编码进代码提交到仓库。相关入口我整理在下面按需取用官网了解整体能力https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content创建和管理 Keyhttps://taotoken.net/console/api-keys?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentapi-keys接入文档请求格式、模型列表https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentdoc想先在网页里试模型效果https://taotoken.net/model-chat?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentmodel-chat注意API 地址统一用https://taotoken.net/api不要带 UTM 参数避免请求签名或路由异常。3. 可复制配置Cursor 的 settings.json 与后端 .env 骨架3.1 Cursor 侧 settings.json 配置骨架Cursor 的settings.json主要用来固化编辑器行为让 AI 生成的代码风格、格式化、终端命令保持一致。打开命令面板搜索Open User Settings (JSON)把下面这段合并进去即可。重点是editor.formatOnSave和 Python / JS 的默认格式化器避免前后端代码风格打架。{ editor.formatOnSave: true, editor.tabSize: 2, files.eol: \n, python.defaultInterpreterPath: ${workspaceFolder}/server/.venv/bin/python, python.formatting.provider: black, [python]: { editor.defaultFormatter: ms-python.black-formatter, editor.tabSize: 4 }, [javascript]: { editor.defaultFormatter: esbenp.prettier-vscode }, [javascriptreact]: { editor.defaultFormatter: esbenp.prettier-vscode }, terminal.integrated.env.linux: { TAOTOKEN_BASE_URL: https://taotoken.net/api }, terminal.integrated.env.osx: { TAOTOKEN_BASE_URL: https://taotoken.net/api }, terminal.integrated.env.windows: { TAOTOKEN_BASE_URL: https://taotoken.net/api } }这里把TAOTOKEN_BASE_URL注入到集成终端环境变量好处是你在 Cursor 里跑curl或 Python 脚本调试时不用每次手敲完整地址。Key 本身不要写进settings.json它属于敏感信息放后端.env更合适。3.2 后端 FastAPI 的 .env 与配置读取在server/目录下建.env只放两行核心配置TAOTOKEN_API_KEYsk-你的TaoToken密钥 TAOTOKEN_BASE_URLhttps://taotoken.net/api然后用pydantic-settings读取避免散落的os.getenv。在server/app/config.py里写from pydantic_settings import BaseSettings class Settings(BaseSettings): taotoken_api_key: str taotoken_base_url: str https://taotoken.net/api class Config: env_file .env settings Settings()3.3 统一 AI 客户端封装在server/app/utils/ai_client.py里封装一个通用请求函数换装、精修都走它。这样以后换模型只改model字段不动调用方import httpx from app.config import settings async def call_ai(model: str, payload: dict, timeout: int 120) - dict: url f{settings.taotoken_base_url}/v1/images/generations headers { Authorization: fBearer {settings.taotoken_api_key}, Content-Type: application/json, } body {model: model, **payload} async with httpx.AsyncClient(timeouttimeout) as client: resp await client.post(url, headersheaders, jsonbody) resp.raise_for_status() return resp.json()提示具体路径和字段以接入文档为准不同模型可能是/v1/chat/completions或图像专用端点封装时把路径也做成参数更灵活。4. 验证请求发起一次换装请求确认通道连通配置写完先别急着写前端用最小请求验证通道。这一步能帮你把「Key 对不对」「地址通不通」「模型名对不对」三个问题一次性排掉。4.1 用 curl 快速验证在 Cursor 集成终端里执行$TAOTOKEN_BASE_URL已经在settings.json里注入curl -X POST $TAOTOKEN_BASE_URL/v1/images/generations \ -H Authorization: Bearer $TAOTOKEN_API_KEY \ -H Content-Type: application/json \ -d { model: 你的换装模型名, prompt: a person wearing the given garment, full body, studio light, image: https://example.com/person.png, garment_image: https://example.com/garment.png, n: 1, size: 1024x1024 }如果返回里带data数组和图片 URL说明通道连通。如果返回 401是 Key 问题404 多半是路径写错400 通常是模型名或字段不匹配。4.2 在 FastAPI 里加一个验证路由在server/app/router/task.py里加一个临时验证接口方便前端联调时直接点按钮测试from fastapi import APIRouter from app.utils.ai_client import call_ai router APIRouter(prefix/api/task, tags[task]) router.post(/ping-ai) async def ping_ai(): result await call_ai( model你的换装模型名, payload{ prompt: test connectivity, image: https://example.com/person.png, garment_image: https://example.com/garment.png, }, ) return {ok: True, raw: result}启动后端uvicorn app.main:app --reload访问/docs直接调这个接口。返回ok: true且raw里有正常结构就说明 FastAPI 到 TaoToken 的链路完全打通。4.3 前端联调时的成功结果长什么样React 侧用fetch调/api/task/ping-ai控制台打印出带图片 URL 的对象即可。此时你可以把返回的图片 URL 塞进img src直接预览。实测下来从填 Key 到看到第一张换装结果图顺利的话十分钟内能跑通。5. 本篇常见错排查5.1 401 Unauthorized最常见。先确认.env里的 Key 没有多余空格或换行再确认请求头是Bearer加 Key中间一个空格。如果 Key 是在控制台刚创建的确认没有复制到一半。可以到 API Keys 页面重新生成一把对比测试。5.2 404 Not Found多半是 base_url 拼错。正确写法是https://taotoken.net/api后面接具体路径。注意不要写成https://taotoken.net/api/带尾斜杠再拼/v1/...容易出现双斜杠。另外确认你调用的模型对应的端点路径图像模型和对话模型路径不同。5.3 400 Bad Request / 模型名错误返回信息里通常会带model not found或字段缺失提示。对照接入文档里的模型列表核对名称注意大小写和连字符。图像类请求还要确认image、garment_image这类字段名是否和文档一致不同模型字段命名有差异。5.4 请求超时图像生成类请求耗时较长默认超时可能不够。在call_ai里把timeout调到 120 秒以上。如果是异步任务模式先返回 task_id 再轮询要按文档实现轮询或回调不要用同步等待。5.5 Cursor 生成的代码跑不起来Cursor 有时会臆造不存在的库或函数签名。遇到报错直接把完整 traceback 贴回对话框让它基于真实报错修。我试过把httpx的异步用法贴给它它很快就改对了。关键是给它真实错误信息而不是描述「报错了」。6. 下一步把通道用起来通道验证通过后你就可以把call_ai接到真正的换装业务里前端上传图片到对象存储拿到 URL后端组装 payload 调call_ai把返回结果写入任务表并回传前端展示。整个过程中AI 能力始终只通过 TaoToken 一个入口Key 和地址集中在.env换模型只改一个字符串。如果你后面要做长期编码或 Agent 类功能可以了解 Coding Planhttps://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentcoding-plan接入细节和字段说明以文档为准https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentdoc需要新 Key 或管理额度https://taotoken.net/console/api-keys?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentapi-keys先把/ping-ai跑通再去写业务页面顺序别反。