1. 从 create-react-app 到能调用 AI 的脚手架create-react-app 是 React 官方维护的脚手架工具一条命令就能生成带 webpack、ESLint、Babel 配置的完整项目适合刚接触组件化和工程化的初学者。它帮你把构建配置全部藏起来你只需要关心src里的组件怎么写。但脚手架本身只解决了「页面怎么搭」当你想让项目具备调用大模型的能力时还得自己接一套 API 通道。这篇就聚焦这个衔接点用 create-react-app 初始化项目后怎么通过 TaoToken 的统一 Key 和 API 通道让本地开发环境里的 React 项目具备可调用的 AI 接口。我会给出可复制的settings.json、config.toml骨架、环境变量配置片段以及启动验证和报错排查的完整动作。适合已经跑通过npm start、想往项目里加 AI 能力的 React 初学者。TaoToken 在这里扮演的角色是统一入口你不用分别去对接多家模型的 Key 和地址而是用一套 Key、一个 API 地址就能在项目里调用不同模型。官网地址是 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content API 地址是 https://taotoken.net/api 注意 API 地址不带 UTM 参数。2. 前置准备项目初始化与统一 Key 获取2.1 用 create-react-app 建项目先确认本机 Node 版本create-react-app 对 Node 有最低要求版本太低会在安装阶段报错node -v npm -v如果 Node 版本在 14 以上基本没问题。接着全局安装脚手架并创建项目npm i -g create-react-app cd Desktop create-react-app react-ai-demo cd react-ai-demo npm start浏览器自动打开http://localhost:3000看到 React 默认页面就说明脚手架跑通了。这一步的目录结构里public/index.html是唯一的主页面必须包含root容器src/index.js是入口文件负责把App组件渲染到root里src/App.js是主组件其他子组件都挂在它下面。2.2 拿到统一 Key进入 TaoToken 控制台创建 API Key地址是 https://taotoken.net/console 。创建后复制那串 Key它就是你项目里所有 AI 调用的凭证。这里有个习惯建议不要把 Key 直接写进App.js或任何会被提交到 Git 的文件里后面我会用环境变量把它隔离出来。如果你还没决定用哪个模型可以先到模型对话页面试一下效果地址是 https://taotoken.net/models 确认模型输出符合预期再写进代码。3. 可复制配置环境变量与配置文件骨架3.1 环境变量隔离 Keycreate-react-app 内置了对.env文件的支持但有个硬性规则React 只会读取以REACT_APP_开头的变量。在项目根目录新建.env.localREACT_APP_TAOTOKEN_API_KEY你的Key REACT_APP_TAOTOKEN_BASE_URLhttps://taotoken.net/api.env.local默认会被 Git 忽略适合放本地密钥。改完环境变量必须重启npm start否则读不到新值这是新手最常踩的坑之一。3.2 settings.json 骨架如果你用 VS Code 开发可以在项目根目录建.vscode/settings.json把编辑器和 AI 辅助插件的配置统一起来。下面是一个可复制的骨架重点是让编辑器识别 JSX 语法并统一格式化{ files.associations: { *.js: javascriptreact }, editor.formatOnSave: true, editor.defaultFormatter: esbenp.prettier-vscode, emmet.includeLanguages: { javascript: javascriptreact }, terminal.integrated.env.windows: { REACT_APP_TAOTOKEN_BASE_URL: https://taotoken.net/api } }files.associations让.js文件按 JSX 高亮emmet.includeLanguages让你在 JS 里也能用div.title这类缩写快速生成标签。最后一项是给 Windows 终端注入环境变量macOS 或 Linux 用户可以把这一段删掉改用 shell 的export。3.3 config.toml 骨架有些 AI 辅助工具或 CLI 客户端用 TOML 做配置。在项目根目录建config.toml把统一通道写进去[api] provider taotoken base_url https://taotoken.net/api api_key_env REACT_APP_TAOTOKEN_API_KEY timeout_seconds 60 [model] default claude-sonnet max_tokens 2048 temperature 0.7 [project] name react-ai-demo framework create-react-app注意api_key_env写的是环境变量名而不是 Key 本身这样配置文件可以安全地提交到仓库。base_url用不带 UTM 的 API 地址避免把追踪参数带进请求。4. 在组件里发起请求并验证结果4.1 写一个调用组件在src下新建components/AiPanel/index.js用一个函数组件发起请求。React 18 之后推荐用函数组件加 Hookimport React, { useState } from react; export default function AiPanel() { const [input, setInput] useState(); const [reply, setReply] useState(); const [loading, setLoading] useState(false); const ask async () { setLoading(true); try { const res await fetch( ${process.env.REACT_APP_TAOTOKEN_BASE_URL}/v1/chat/completions, { method: POST, headers: { Content-Type: application/json, Authorization: Bearer ${process.env.REACT_APP_TAOTOKEN_API_KEY}, }, body: JSON.stringify({ model: claude-sonnet, messages: [{ role: user, content: input }], }), } ); const data await res.json(); setReply(data.choices?.[0]?.message?.content || 无返回内容); } catch (err) { setReply(请求失败${err.message}); } finally { setLoading(false); } }; return ( div input value{input} onChange{(e) setInput(e.target.value)} / button onClick{ask} disabled{loading} {loading ? 请求中 : 提问} /button p{reply}/p /div ); }然后在App.js里引入它import React from react; import AiPanel from ./components/AiPanel; export default function App() { return ( div h1React AI Demo/h1 AiPanel / /div ); }4.2 启动验证保存后浏览器会自动刷新。在输入框里打一句「用一句话解释什么是组件」点提问。如果一切正常几秒内会看到模型返回的文字。打开浏览器开发者工具的 Network 面板能看到一条发往https://taotoken.net/api/v1/chat/completions的请求状态码 200响应体里有choices数组。这一步验证通过说明你的脚手架项目已经具备可调用的 AI 接口了。如果想让项目长期跑编码任务或 Agent 流程可以了解 Coding Plan地址是 https://taotoken.net/coding-plan 它更适合持续性的开发场景。5. 本篇常见报错排查5.1 Key 读不到请求返回 401最常见的原因是环境变量没生效。检查三点变量名是否以REACT_APP_开头改完.env.local后是否重启了npm start代码里是否用process.env.REACT_APP_TAOTOKEN_API_KEY而不是别的名字。React 在构建时会把REACT_APP_开头的变量静态替换进代码所以运行时改环境变量是没用的。5.2 跨域报错 CORS如果控制台出现Access to fetch has been blocked by CORS policy先确认请求地址是https://taotoken.net/api而不是官网首页地址。API 地址和官网地址是两个不同的入口写错会导致请求打到不支持跨域的页面上。另外检查Content-Type是否写成了application/json拼写错误也会触发预检失败。5.3 模型名写错返回 400model字段必须和平台支持的名称一致。如果你不确定有哪些模型到模型对话页面看一下可选列表地址是 https://taotoken.net/models 。把claude-sonnet换成实际支持的名称即可。返回体里通常会有error.message直接读它比猜要快。5.4 请求一直 pending 或超时本地网络波动或timeout_seconds设得太短都会导致。先在config.toml里把超时调到 60 秒以上再确认base_url没有多余斜杠。如果用了公司网络确认没有拦截对 API 域名的访问。这类问题排查完建议回到接入文档核对一遍参数地址是 https://taotoken.net/doc 。5.5 组件不刷新React 的状态更新是异步的如果你在ask函数里直接读reply会发现拿到的是旧值。用useEffect监听reply变化或者直接在setReply之后做后续逻辑。另外确认AiPanel已经被App引入并渲染没引入的组件不会执行。6. 把 Key 和通道固定下来走到这里你的 create-react-app 项目已经能通过统一 Key 调用 AI 接口了。我建议把 Key 管理这件事固定成习惯本地用.env.local团队协作时把变量名写进.env.example提交真实值各自配置。这样换机器、换同事都不用改代码。后续如果要扩展可以在src下建一个services/ai.js把 fetch 逻辑抽出来组件只负责展示。这样多个组件复用同一个请求函数改地址或换模型时只动一个文件。需要新建 Key 或查看用量去控制台 https://taotoken.net/console/api-keys 接入细节有疑问就翻文档 https://taotoken.net/doc 。把这几步跑顺脚手架就不只是页面模板而是一个能持续接 AI 能力的工程底座。