ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

用Claude 4.5开发一个完整项目实战:从零搭建到部署的AI编程全流程

用Claude 4.5开发一个完整项目实战:从零搭建到部署的AI编程全流程 1. 从零搭建一个「AI 周报生成器」为什么选 Claude 4.5 做全流程实战Claude 4.5 是 Anthropic 推出的编码向大模型官方给它的定位是「世界上最好的编码模型」和「构建复杂智能体的最强模型」。它能连续专注干活超过 30 小时单次任务能敲出约 11000 行代码这个量级放在真实项目里基本等于把一个中等规模的全栈原型从需求到上线全包了。适合谁适合已经会写一点代码、但想用 AI 把「想法→可运行项目」这条路走通的人尤其是独立开发者和想提效的后端/前端同学。我这次拿一个真实小项目来跑全流程AI 周报生成器。功能很简单——输入一周的零散工作记录调用模型生成结构化周报支持导出 Markdown。技术栈选 Next.js 14App Router TypeScript Tailwind部署到 Vercel。选它是因为它足够小能在一次实战里跑完需求拆解、代码生成、调试、部署全链路又足够真实能暴露 AI 编程里最常见的坑。整个流程我会分成六段先讲清楚问题和场景再讲怎么拿到可用的模型接入能力然后给出可复制的配置文件接着做请求验证再把我踩过的报错逐条排查最后给一个语义一致的收尾。你跟着做能拿到一个能跑起来的项目骨架而不是一堆「连上后就能用」的空话。Claude 4.5 在代码生成上的强项是长上下文和结构化输出。周报生成这种任务输入是杂乱的流水账输出要求分点、有标题、语气统一正好吃它的长上下文和指令遵循能力。Cursor 这类工具适合在编辑器里做局部补全和重构但「从零搭一个完整项目」这种跨文件、跨配置的活更适合用 Claude 4.5 配合命令行和配置文件来推进。两者不是替代关系是分工关系。下面进入实操。先解决接入问题再谈写代码。2. TaoToken 前置准备拿到 Claude 4.5 的 Base URL、Key 和 Model ID要让 Claude 4.5 在你的项目里干活第一步是拿到可调用的接口能力。这里用 TaoToken 作为接入层它提供统一的 API 入口兼容 Anthropic 和 OpenAI 两种调用风格。官网地址是 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content API 根地址是 https://taotoken.net/api 这个不加 UTM。你需要准备三件套Base URL、API Key、Model ID。这三样在后面的 settings.json、Cline MCP 配置、Codex auth.json 里都会反复出现先记牢。Base URL 用https://taotoken.net/api。API Key 在控制台的 API Keys 页面创建地址是 https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi_keysutm_campaignrewrite 。创建时给它起个名字比如weekly-report-dev权限选默认的调用权限即可。创建完立刻复制页面刷新后就看不到了。Model ID 这块要注意Claude 4.5 在接口里的模型标识通常写成claude-sonnet-4-5这类形式具体以你控制台里模型列表显示的为准。不要凭记忆硬写写错了会直接返回 404 或 model not found。你可以在模型对话页面先手动发一条消息验证模型可用地址是 https://taotoken.net/chat?utm_sourcetaotoken_aicg_blog_endutm_contentmodel_chatutm_campaignrewrite 。如果你打算长期用 Claude 4.5 做编码和 Agent 任务建议直接开 Coding Plan地址是 https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding_planutm_campaignrewrite 。它比按量计费更适合高频调用场景尤其是你后面要跑多轮代码生成和调试的时候。拿到三件套后先别急着写业务代码。用 curl 做一次最小验证确认网络和鉴权都通。这一步能帮你把「接入问题」和「代码问题」分开后面排错会省很多时间。验证命令在第四节给这里先把配置骨架准备好。一个常见误区很多人把 Key 直接写进前端代码或提交到 Git。绝对不要。Key 只放在服务端环境变量或本地.env.local里.gitignore里必须包含.env*.local。这个习惯从第一天就养成后面能省掉一次事故。3. 可复制配置settings.json 骨架与项目初始化这一节给你可以直接复制的配置片段。先建项目目录再写配置文件最后装依赖。项目初始化命令npx create-next-applatest weekly-report --typescript --tailwind --app --eslint cd weekly-report npm install anthropic-ai/sdk然后在项目根目录建.env.localTAOTOKEN_API_KEYsk-你的key TAOTOKEN_BASE_URLhttps://taotoken.net/api TAOTOKEN_MODELclaude-sonnet-4-5注意.env.local不要提交。检查.gitignore里有.env*.local。接下来是 Claude Code 的settings.json骨架。如果你用 Claude Code 做命令行辅助开发配置文件放在~/.claude/settings.json全局或项目内.claude/settings.json项目级。项目级更推荐团队协作时配置跟着仓库走{ env: { ANTHROPIC_BASE_URL: https://taotoken.net/api, ANTHROPIC_API_KEY: sk-你的key, ANTHROPIC_MODEL: claude-sonnet-4-5 }, permissions: { allow: [ Read, Write, Bash(npm run *), Bash(git status), Bash(git diff *) ], deny: [ Bash(rm -rf *), Bash(curl * | sh) ] } }这个骨架里env段把三件套注入到 Claude Code 的运行环境permissions段控制它能执行哪些命令。deny里那两条是保命用的别删。如果你用 Cline 或类似的编辑器插件MCP 配置通常长这样放在插件的 MCP 设置里{ mcpServers: { taotoken: { command: npx, args: [-y, anthropic-ai/mcp-server], env: { ANTHROPIC_BASE_URL: https://taotoken.net/api, ANTHROPIC_API_KEY: sk-你的key, ANTHROPIC_MODEL: claude-sonnet-4-5 } } } }Codex 用户如果走auth.json路径一般在~/.codex/auth.json内容结构{ base_url: https://taotoken.net/api, api_key: sk-你的key, model: claude-sonnet-4-5 }三件套在三个配置里都齐了Base URL 是https://taotoken.net/apiKey 是你的sk-开头字符串Model ID 是claude-sonnet-4-5。任何一处缺了调用都会失败。项目业务代码这边先建一个 API 路由app/api/generate/route.tsimport Anthropic from anthropic-ai/sdk; const client new Anthropic({ apiKey: process.env.TAOTOKEN_API_KEY, baseURL: process.env.TAOTOKEN_BASE_URL, }); export async function POST(req: Request) { const { notes } await req.json(); const msg await client.messages.create({ model: process.env.TAOTOKEN_MODEL!, max_tokens: 2000, messages: [ { role: user, content: 把下面的工作记录整理成结构化周报分「本周完成」「进行中」「风险与阻塞」「下周计划」四段\n${notes}, }, ], }); return Response.json({ result: msg.content }); }这段代码就是 Claude 4.5 在项目里干活的核心。它把杂乱的 notes 丢给模型模型返回结构化周报。baseURL指向 TaoTokenmodel从环境变量读不硬编码。前端页面app/page.tsx用一个 textarea 收输入一个按钮触发 fetch一个区域渲染结果。这部分让 Claude 4.5 自己生成就行提示词写清楚「用 Tailwind不要引入额外 UI 库结果用 whitespace-pre-wrap 渲染」。实测下来它一次就能给出可用的页面代码不需要来回改。配置写完跑npm run dev打开localhost:3000先确认页面能渲染。页面都起不来就别急着调模型。4. 验证请求从 curl 到页面端到端跑通配置就绪后先做接口层验证再做页面层验证。分层验证的好处是出错时你能立刻定位是接入问题还是代码问题。第一步curl 验证鉴权。在终端执行curl https://taotoken.net/api/v1/messages \ -H x-api-key: sk-你的key \ -H anthropic-version: 2023-06-01 \ -H content-type: application/json \ -d { model: claude-sonnet-4-5, max_tokens: 200, messages: [{role: user, content: 只回复两个字通了}] }预期返回是一段 JSONcontent数组里有一项text字段值是「通了」或类似内容。如果返回 401说明 Key 不对或没带上返回 404多半是 Model ID 写错返回 403检查 Key 权限。这一步通了说明三件套没问题。第二步本地环境变量验证。在项目里写个临时脚本scripts/check.tsimport Anthropic from anthropic-ai/sdk; const client new Anthropic({ apiKey: process.env.TAOTOKEN_API_KEY, baseURL: process.env.TAOTOKEN_BASE_URL, }); const msg await client.messages.create({ model: process.env.TAOTOKEN_MODEL!, max_tokens: 100, messages: [{ role: user, content: 回复env ok }], }); console.log(JSON.stringify(msg.content, null, 2));用npx tsx scripts/check.ts跑。如果这里报apiKey is required说明.env.local没被加载检查文件名和位置。Next.js 只自动加载根目录的.env.local放到子目录不生效。第三步页面端到端。启动npm run dev在页面输入一段测试记录周一修了登录 bug周二写了周报接口周三和产品对了需求周四部署测试环境周五写文档点生成预期看到四段式周报标题清晰语气统一。如果页面报Failed to fetch打开浏览器控制台看 Network多半是 API 路由 500。回到终端看 Next.js 日志错误会打在那里。第四步验证流式输出可选但推荐。周报生成如果等 10 秒才出结果体验很差。把 API 路由改成流式const stream await client.messages.stream({ model: process.env.TAOTOKEN_MODEL!, max_tokens: 2000, messages: [{ role: user, content: prompt }], }); return new Response(stream.toReadableStream());前端用fetch读response.body的 reader逐块 append 到状态里。这样文字会一个字一个字往外蹦体感快很多。Claude 4.5 的流式输出很稳实测下来首 token 延迟在可接受范围。四步都过了说明「接入→代码→页面」这条链路是通的。接下来才是真正的项目开发让 Claude 4.5 帮你加功能、改样式、写测试。这时候你已经有稳定的调用能力可以放心让它多轮干活。5. 常见报错排查401、local proxy failed、reading choices、OAuth这一节把我实际遇到的报错逐条列出来对照着查。401 Unauthorized / invalid x-api-key。原因通常是 Key 没带、带错、或者带了多余空格。检查.env.local里TAOTOKEN_API_KEY后面有没有引号或空格。另外注意Anthropic 风格用x-api-key头OpenAI 风格用Authorization: Bearer两种别混。如果你用 SDKSDK 会自动处理手写 curl 时要看清。local proxy failed / connection refused。这个报错一般出现在你本地配了代理但代理没起来或端口不对。先检查环境变量HTTP_PROXY、HTTPS_PROXY有没有被设置成奇怪的值。如果有临时unset掉再试。另一个可能是 Base URL 写成了https://taotoken.net/api/带尾斜杠某些 SDK 拼接路径时会出问题去掉尾斜杠。Cannot read properties of undefined (reading choices)。这是 OpenAI 风格响应解析报错说明你用的 SDK 期望choices字段但实际返回的是 Anthropic 风格的content数组。解决办法是统一调用风格要么全用 Anthropic SDK要么全用 OpenAI SDK 并把 Base URL 指向兼容端点。别在一个项目里混用两套解析逻辑。OAuth / authentication_error。如果你在 Claude Code 里看到 OAuth 相关报错说明它没读到settings.json里的env转而走了默认的登录流程。检查配置文件路径对不对项目级是.claude/settings.json全局是~/.claude/settings.json。还要确认 JSON 格式合法多一个逗号都会导致整个文件被忽略。用cat ~/.claude/settings.json | python -m json.tool验证格式。model not found / 404。Model ID 写错。回到控制台模型列表复制准确的 ID。注意大小写和连字符claude-sonnet-4-5和claude-4.5-sonnet是两回事。rate limit exceeded。调用太频繁。如果你在跑多轮代码生成建议开 Coding Plan配额更宽裕。临时办法是在请求间加await new Promise(r setTimeout(r, 1000))。页面白屏但接口正常。多半是前端渲染问题。检查msg.content的结构它是数组不是字符串。渲染时要msg.content.map(c c.text).join()直接渲染数组会报错。排查顺序建议先 curl 验接口再脚本验环境变量再页面验端到端。每层过了再进下一层别跳。跳着查最后你分不清是 Key 问题还是代码问题。6. 部署上线与后续迭代把项目真正跑起来本地跑通后部署到 Vercel 是最省事的路径。把项目推到 GitHub在 Vercel 导入仓库然后在 Vercel 项目的 Environment Variables 里加三个变量TAOTOKEN_API_KEY、TAOTOKEN_BASE_URL、TAOTOKEN_MODEL。值跟本地.env.local一致。注意 Vercel 的环境变量分 Production / Preview / Development三个都加上否则预览环境会 401。部署命令git add . git commit -m feat: weekly report generator git push origin mainVercel 会自动构建。构建日志里如果看到Environment variable not found回设置页补上。构建成功后拿到域名打开测试一遍生成流程。线上如果报 500去 Vercel 的 Functions 日志看错误堆栈会打在那里。后续迭代可以让 Claude 4.5 继续帮你做加历史记录存 localStorage 或接数据库、加导出 PDF、加多语言。每次加功能前先把需求写成一段清晰的 spec 丢给它让它先给方案再写代码。这样比直接说「帮我加个功能」质量高很多。长期用下来我的经验是Claude 4.5 适合做「跨文件、有结构、需要理解上下文」的活比如搭骨架、写配置、重构模块。Cursor 适合在编辑器里做局部补全和快速改。两者配合一个管全局一个管局部。接入层用 TaoToken 统一管理 Key 和配额换模型时只改一个环境变量不用动业务代码。项目代码结构建议保持清晰app/api放路由lib放 SDK 封装components放 UI。SDK 封装单独抽一个lib/anthropic.ts把 client 初始化收口业务代码只 import 这个封装。这样以后换 Base URL 或加日志只改一个文件。最后一步把.env.local加进.gitignore确认git status里看不到它。然后git log看一眼提交记录确认没有 Key 泄漏。这一步做完你的 AI 编程全流程就算真正闭环了。
返回列表