Bubble零代码接入天工AI全栈实战教程

想要在Bubble中集成天工AI，实现智能问答、内容生成或图像理解，完全不需要编写代码。直接通过Bubble的API插件调用天工AI的RESTful接口即可，无需部署中间服务，也无需手动处理密钥轮换或请求签名机制。

核心操作仅三个步骤：在天工开放平台获取凭证，在Bubble的API Connector中配置接口，最后通过按钮触发调用并处理返回数据。

天工AI的智能对话、问答助手、语义搜索以及多模态理解能力，能够高效辅助从零到一的内容创作，整个过程几乎不涉及任何代码编写。

确认天工AI API可用性与凭证获取

操作非常直接：登录天工AI开放平台，进入「我的应用」，点击「创建新应用」，选择「大模型API」类型。接着填写应用名称，例如“Bubble客服助手”，提交后系统会自动生成API Key和Secret Key。

【务必复制并安全保存Secret Key，页面关闭后将无法再次查看】

随后打开「接口文档」，定位到/v3/chat/completions路径，确认该接口支持POST请求、接收application/json格式，并且需要Authorization: Bearer {API_KEY}头部认证。这些参数在后续配置API Connector时都会用到。

在Bubble中配置天工AI API连接

切换到Bubble编辑器，进入Plugins，找到API Connector，点击Add a new API。

填写基础信息时，API Name可任意命名，例如“Tiangong-Chat”，Base URL填写https://api.tiangong.cn/v3，Authentication Type选择Header，Key填写Authorization，Value填写Bearer {{API_KEY}}——注意这里先不填入真实密钥，后续通过动态值传入。

点击Add endpoint，Endpoint Name填写“Send Message”，Method选择POST，Path填写/chat/completions，Request Body type选择JSON。

在Request Body区域粘贴以下结构，务必严格遵循天工文档的格式：

{
"model": "skywork-13B",
"messages": [
{"role": "user", "content": "{{input_text}}"}
],
"temperature": 0.7,
"max_tokens": 512
}

勾选「Use dynamic values」，为{{API_KEY}}和{{input_text}}分别绑定Bubble中的数据源字段——前者映射到Data → API Keys → tiangong_api_key（需提前在Data中新建文本字段并填入真实API Key），后者映射到页面上的Input Element或Workflow变量。

构建调用工作流并触发响应

在目标页面（例如客服对话页）添加一个Button，点击事件选择Make an API call，然后选中Tiangong-Chat → Send Message。

在Configure parameters中，将API Key字段映射到Data → API Keys → tiangong_api_key，将input_text字段映射到用户输入框的value属性。

设置On success动作：将返回体中的choices[0].message.content赋值给页面上的Text Element的text属性。On error动作则显示一个提示弹窗，内容使用response.error.message。

这一配置步骤并不复杂，核心在于确保参数映射正确无误。

测试与验证响应结果

点击Bubble右上角的Preview启动测试环境，在输入框中输入“你好，请介绍下天工AI”，然后点击发送按钮。

如果返回的是正常中文内容，且不包含error字段，说明API调用链路已成功建立。如果返回401 Unauthorized，请检查tiangong_api_key字段是否为空或包含多余空格；如果返回400 Bad Request，重点检查JSON Body中的messages数组结构——必须是对象数组，不能是字符串。

确认成功后，该Button可以嵌入任意工作流。例如，用户提交表单后自动调用天工AI生成摘要，或者上传图片后调用多模态接口进行图像理解，灵活度很高。