Claude Code调用第三方API
1 背景
让 Claude Code 走出简单的单机环境，与更广阔的外部世界——API 接口、第三方服务、自动化协作以及云端数据库——进行深度连接。
本节主要讲的是 API 对接与云端发布：通过制作“儿童识字小报生成器”，学习如何对接 Nano Banana Pro 生图模型 API，并将你的应用部署到 GitHub Pages，让全世界都能访问你的作品。
我们做一个小的产品“儿童识字小报生成器”，把整个生图的流程包装一下，然后接入Nano Banana Pro 生图模型 API。就可以生成这样的样例图片
2 需求确定
经过上面的需求背景的讨论，我们可以确定这个海报生成器的功能非常简单。首先需要确定海报的主题（图书馆、厨房），然后给海报设置一个标题，接着接入大模型的 API key。在生成海报时，还需要提供海报上的文字及其对应的拼音。最后，我们只需要一个按钮来生成识字小报。
这里的关键点其实就是两个点：
- 生图的提示词， 这个已经提前准备好了。放在了下面
- 找一个可以生成图片的模型的 API 接口：
- https://kie.ai 目前找的是这个 API 的地址， 可以生成 Nano banana pro 的图片， 一次大概是 8 毛钱
生图的提示词如下：
# Role: 儿童识字小报提示词生成专家
## 任务目标
根据用户提供的「主题/场景」和「标题」，生成一份详细的、符合 Markdown 格式的 AI 绘图提示词。
**核心要求**：你必须根据主题，自动推理出该场景下最常见的 15-20 个具体名词（包含汉字与拼音），并将其填充进最终的提示词中。
## 一、对话流程（必须严格遵守）
### 第一步：获取信息
向用户依次提出以下两个问题（可以在同一条消息中连续提问）：
1. 请问这期儿童识字小报的主题/场景是什么？（如：超市、医院、公园）
2. 请问小报的大标题是什么？（如：《走进超市》《快乐医院》）
### 第二步：等待并分析
等待用户回答。在用户回答前，不输出任何 Prompt。
### 第三步：词汇联想与生成（关键步骤）
收到用户回答后，你需要根据 {{主题/场景}}，在大脑中检索适合 5-9 岁儿童认知的、该场景下最典型的 15-20 个名词。
这些词必须涵盖：人物、物品、设施、环境。
### 第四步：输出最终提示词
将用户的回答填充入 {{主题/场景}} 和 {{标题}}，并将你联想到的 **具体词汇列表** 填充入模板的对应位置。
最后，将完整内容封装在一个 Markdown 代码块中输出。
---
## 【最终提示词模板】
（请根据用户输入和你的联想，替换模板中 {{...}} 的部分，并用 Markdown 代码块输出）
```markdown
请生成一张儿童识字小报《{{主题/场景}}》，竖版 A4，学习小报版式，适合 5–9 岁孩子 认字与看图识物。
# 一、小报标题区（顶部）
**顶部居中大标题**：《{{标题}}》
* **风格**：十字小报 / 儿童学习报感
* **文本要求**：大字、醒目、卡通手写体、彩色描边
* **装饰**：周围添加与 {{主题/场景}} 相关的贴纸风装饰，颜色鲜艳
# 二、小报主体（中间主画面）
画面中心是一幅 **卡通插画风的「{{主题/场景}}」场景**：
* **整体气氛**：明亮、温暖、积极
* **构图**：物体边界清晰，方便对应文字，不要过于拥挤。
**场景分区与核心内容**
1. **核心区域 A（主要对象）**：表现 {{主题/场景}} 的核心活动。
2. **核心区域 B（配套设施）**：展示相关的工具或物品。
3. **核心区域 C（环境背景）**：体现环境特征（如墙面、指示牌等）。
**主题人物**
* **角色**：1 位可爱卡通人物（职业/身份：与 {{主题/场景}} 匹配）。
* **动作**：正在进行与场景相关的自然互动。
# 三、必画物体与识字清单（Generated Content）
**请务必在画面中清晰绘制以下物体，并为其预留贴标签的位置：**
**1. 核心角色与设施：**
{{这里请列出你联想到的3-5个核心大词，如：shōu yín yuán 收银员, huò jià 货架...}}
**2. 常见物品/工具：**
{{这里请列出你联想到的5-8个常用物品词，如：píng guǒ 苹果, niú nǎi 牛奶, tuī chē 推车...}}
**3. 环境与装饰：**
{{这里请列出你联想到的3-5个环境词，如：chū kǒu 出口, dēng 灯, qiáng 墙...}}
*(注意：画面中的物体数量不限于此，但以上列表必须作为重点描绘对象)*
# 四、识字标注规则
对上述清单中的物体，贴上中文识字标签：
* **格式**：两行制（第一行拼音带声调，第二行简体汉字）。
* **样式**：彩色小贴纸风格，白底黑字或深色字，清晰可读。
* **排版**：标签靠近对应的物体，不遮挡主体。
# 五、画风参数
* **风格**：儿童绘本风 + 识字小报风
* **色彩**：高饱和、明快、温暖 (High Saturation, Warm Tone)
* **质量**：8k resolution, high detail, vector illustration style, clean lines.
3 准备工作
准备工作其实就是注册 API 网站，并且默认新用户会赠送 80 积分，我们做测试完全够用。如果后面大家不够用的话，它还可以支持微信充值。api 使用地址：https://kie.ai
点击 API 密钥，然后点击右上角的 ” 生成 API 密钥 ” 就可以设置一个新的 API 密钥， 为后面接口文档里面使用 ，记得保存这个 API 。
3.1 Nano Banana Pro 生图
我们点击左侧菜单的 Models Market，现在这个 Nano Banana Pro 生图模型特别火，我们可以看到屏幕的 Nano Banana Pro 就有这个生图模型。还可在下面的模型列表里看到这个模型。我们从这两个地方进入都可以。
进入到这个页面以后，我们可以点击 Playground 来测试自己的生图提示词，也可以点击 API 查看接口文档。
3.2 Claude Code 开发
由于我们需要使用 API 接口，因此需要将接口文档保存到项目的 Markdown 文件中。这个也是我们开发这种有接口的形式的开发规范，你可以理解成这也是一种 spec 的最佳实践。
3.2.1 在 VS Code 中打开一个新的项目文件夹
然后在项目目录下 新建一个 ai-docs 的目录，这个目录主要用于存放与 AI 相关的文档，例如我们对接 Nano Banana Pro 的 API 文档，以及生成图像的提示词，都会放在这个目录中。这个目录下的文档主要是 Markdown 文件，也就是以 .md 为后缀的文件。
然后在这个 ai-docs 目录下面新建我们的 API 文档。文件名称用英文的就可以，比如我这里的 api-nano-bana-pro.md
现在就是要去拷贝 API 文档， 我们打开 API 接口的地址
然后点击下拉三角， 在弹开的菜单中点击 ” Copy Page “
然后回到 VS Code， 我们将复制的内容粘贴到刚刚新建的 api-nano-bana-pro.md 文件里面
新建 prompt.md
把提示词的具体内容直接拷贝放到 prompt. md 文件里面就可以，保存完成后的提示词的文件样例如下
3.2.2 在 VS code 中启动 claude code
在 VS code 的终端里输入 claude，然后回车即可启动成功
# yolo模式
claude --dangerously-skip-permissions
3.3.3 让 Claude code 帮你开发
直接就在 Claude Code 里面切换成 Plan 的模式， 然后输入如下的提示词
怎么切换：mac 系统使用 shift + tab 切换使用模式（windows使用 alt + m），左下角显示 “plan mode on” 的时候，就进入 Plan 模式了
开始输入：
@ai-docs\prompt.md 这个文件是儿童识字小报生成的提示词。 @ai-docs\api-nano-bana-pro.md 这个是接口文档，帮我看下方案如何弄最好？
过了一会儿，有可能会显示让你做选择。我这里的选择界面是下面的样子。
你的 Claude Code 给出的提示可能跟我的不一样，所以需要大家根据 Claude Code 的给出的提示来应对 ，如果不知道怎么回复，可以去问 AI
我这里显示的是如下：
等待 Claude Code 执行之后，就帮我们生成了计划文档。我们可以按住键盘的 Ctrl 键，鼠标单击就可以点开这个计划文件，查看详细的内容。
这里有可能不会显示 MD 文件列表，也可能直接在中单屏幕上展示相关内容，这都是可以的。
然后我们查看生成的 md 文件内容。如果他给的plan方案不符合我的要求，还可以继续输入内容，把你要的效果发给他，让他整合进文档
如果确认这个文件内容没有问题，那么我们就选择 1. Yes, and bypass permissions
最后等待 Claude Code 任务完成，我们就可以在浏览器里面打开 index.html。看最终效果
3.3.4 成品展示
打开后的整个儿童识字小报生成器如下
我们打开 API 接口文档的 API 密钥，如果没有生成 API 密钥，可以选择右上角的“生成 API 密钥”来创建一个。如果已经有密钥，可以直接点击密钥下方的复制按钮进行复制。
将上面复制的 API 密钥发给 Claude Code，让他给我们设置好，当然如果你想要更灵活点，也可以让 Claude Code 做一个填写API 密钥的设置项，这样就可以在网页端手动填写API密钥
生成的页面效果如下：
点击界面上的生成 识 字小报， 等待生成图片就可以
如果界面长时间没有生成图片， 一直在生成中， 可以去访问这个地址：https://kie.ai/logs， 看一下是否真的是在生成中。比如下面的图片显示的就是在 running 中， 那我们就还需要等待， 因为有时候这个平台的资源可能有限制， 出图会比较慢。
如果是已经生成完成， 而界面没有显示实际的图片， 那么有可能就是程序有错误， 我们就需要让 Claude Code 给我们排查错误 当然，如果在点击生成 识字小报 时界面出现红色提示，或者生成图片耗时超过几分钟，就可能存在错误。这时就需要进行问题排查。
还可以下载图片， 把图片下载完成以后可以单独打开。
把项目代码发布到 GitHub Pages ,这里我就省略了，因为主要是专注于 Claude Code 的学习，这一步我就没实操。