当前位置：首页 > 资讯 > 系统环境

在网站中部署一个OpenAI Agent Builder Chatbot

时间：2025-11-11 19:23 作者：来源：阅读：0
扫一扫，手机访问

摘要：OpenAI 最近的开发者日活动主要介绍了其新的主动式工作流产品 Agent Builder。它允许您通过一个简单易用的图形用户界面来打造主动式流程。它完全当之无愧地吸引了大部分关注，但他们工作流程的另一方面 — 部署 — 却受到了较少关注。我们只能匆匆一瞥屏幕和代码，却没有真正的解释如何将使用Agent Builder构建的代理集成到您自己或您的企业的网站或应用程序中。这就是 OpenAI 的另

OpenAI 最近的开发者日活动主要介绍了其新的主动式工作流产品 Agent Builder。它允许您通过一个简单易用的图形用户界面来打造主动式流程。它完全当之无愧地吸引了大部分关注，但他们工作流程的另一方面 — 部署 — 却受到了较少关注。

我们只能匆匆一瞥屏幕和代码，却没有真正的解释如何将使用Agent Builder构建的代理集成到您自己或您的企业的网站或应用程序中。

这就是 OpenAI 的另一个代理构建工具 Chatkit 应该发挥作用的地方。它与他们的 Agent 构建工具一样重大，甚至可以说更重大。

为什么？由于 ChatKit 用于将使用 Agent 构建器创建的任何代理过程部署到真实世界的 Web 应用程序和页面中。

别担心，你可能会想，我会去阅读OpenAI关于ChatKit的文档。祝你好运。除了写得很差之外，它需要相当多的编程知识和对GitHub以及其他各种技术流程的理解。

在本文的其余部分，我将逐步概述使用OpenAI的Agent Builder构建代理并部署到一个可以公开访问的网站的确切过程。

我们将要做什么

本文将成为您在Agent Builder部署方面的“缺失手册”。我们将第一创建两个简单的网站，一个使用Lovable，另一个使用HuggingFace（HF）空间，并将它们部署到全球网络。

之后，我们将使用OpenAI的Agent Builder开发一个聊天机器人代理。然后，我们将使用Agent Builder ChatKit 将其部署到我们的新Lovable和HF网站上。

你需要的东西

有几个先决条件，但其中大多数是免费设置的。

1. 一个OpenAI账户和API密钥（付费计划）

2. 一个 Vercel 账户（免费）

3. 一个 HuggingFace 账户（免费）

4. 一个测试网站（免费和/或付费）

ChatKit部署

我们需要采取几个步骤，但没有一个是复杂的。花点时间，按部就班地跟着步骤走，你会没问题的。

步骤1 - 创建我们的测试网站。

如果您已经有一个网站并且可以编辑/更改其后台代码，请随意使用这个。

否则，您可以使用类似lovable.dev的工具，它不仅可以为您创建网站，还可以将其部署到网络上，使用其自己的域或您提供的自定义域。

请注意上面可爱的链接是一个会员链接，这意味着如果您使用它注册付费计划，我会获得一小笔佣金。

这是我给Lovable的提示，

我想要一个简单的“Hello world”类型的javascript、css、html react页面

我想要一个简单的“Hello world”类型的 JavaScript、CSS、HTML React 页面。

Lovable花了大约15秒钟制作一个网站，我使用了Lovable自己的一个示例域名进行部署。这是它生成的内容。我会在文章末尾放上网站链接。

在网站中部署一个OpenAI Agent Builder Chatbot

作者提供的图片

对于预算有限的人来说，创建网页的免费选择是使用HuggingFace（HF）Spaces。以下是如何操作的步骤。

· 创建一个HF账户并登录。

· 点击主页顶部的“空间”链接，然后点击页面右上方的“新建空间”按钮。

· 填写空间名称，选择许可证类型，并选择 SDK 的“静态”模式，“模板”的“空白”模式，“硬件” 的“CPU 基础”模式，并选择“公共”范围。

· 当您准备好时，请点击屏幕底部的“创建空间”按钮。您应该会看到一个类似这样的屏幕出现，

在网站中部署一个OpenAI Agent Builder Chatbot

作者提供的图片

您的HF网站的URL链接将类似于：

https://huggingface.co/spaces/{你的HF用户名}/{你的HF空间名称}

此时，您应该至少有一个可以修改以集成代理生成器代理的公开可用网站。但第一，我们需要一个代理。

步骤2 - 创建一个OpenAI Agent Builder聊天机器人代理程序

我不会在这一步花费太多时间，由于网上有许多关于如何做的教程和演示。此外，OpenAI团队在他们的开发者日活动上很好地涵盖了这一部分。

不过，我的代理构建器超级简单。它将是一个简单的聊天机器人，只包含两个节点：一个起始节点和一个代理节点。实际上，这是您在代理构建器主页上点击“创建”按钮时得到的默认设置。我对代理节点做的唯一其他更改是选择GPT5-nano作为我的代理LLM，并将代理说明更新为：

你是一个乐于助人的助手。告知用户有关所提议主题的一个有趣实际，然后讲一个关于这个主题的“老爸笑话”。

你是一个有协助的助手。告知用户关于所提议的主题一个有趣的实际，然后讲一个关于这个主题的“幽默冷笑话”。

这是一个聊天的示例。

告知我一个关于狗的有趣实际

有趣实际：狗可以“立体嗅觉”。它们会将不同的气味信息吸入每个鼻孔，协助它们在三维空间中确定气味的方向。由于拥有多达约3亿个嗅觉受体（人类只有约600万个），一些狗可以探测到以万亿分之一为单位的物质，就像在两个奥林匹克大小的游泳池中找到一茶匙糖一样。

笑话：为什么狗会坐在阴凉处？由于它不想成为热狗！

告知我关于狗的一个有趣实际

有趣实际：狗可以“立体嗅觉”。它们将不同的气味信息吸入每个鼻孔，协助它们在三维空间中确定气味的方向。拥有约3亿个嗅觉受体（人类只有约600万个），一些狗可以探测到百万分之一的物质，大致相当于在两个奥林匹克规模的游泳池中找到一茶匙糖。

笑话：为什么狗会坐在阴凉处？由于它不想成为热狗！

要创建自己的代理，请前往
https://platform.openai.com/agent-builder。取决于您选择用于代理的LLM模型，您可能还需要通过身份验证检查，然后才能运行任何代理，请记住这一点。

注意：在创建您的代理时使用的项目名称。它位于Agent Builder主屏幕的左上方附近。在创建我们的OpenAI API密钥时，我们将需要这个项目名称，由于API密钥所属的项目必须与您的代理构建所在的项目相匹配。我在“默认”项目下完成了所有任务。

注意：在创建您的代理时使用的项目名称。它位于Agent Builder主屏幕的左上方附近。在创建我们的OpenAI API密钥时，我们将需要这个信息，由于API密钥所属的项目必须与您的代理构建的项目相匹配。我在Default项目下完成了所有任务。

点击页面右上角的“预览”按钮，确保您的代理程序正常工作。当您满意时，点击页面右上方附近的“发布”按钮。填写您的代理名称，然后再次点击“发布”按钮。这样做时，将会弹出一个窗口，内容如下：

在网站中部署一个OpenAI Agent Builder Chatbot

来自OpenAI网站的图片

您稍后会需要工作流ID，请目前记下它。另外，请注意弹出窗口底部附近的“克隆示例应用链接”。我们将在下一步中使用它。

步骤3 - 将OpenAI的示例ChatKit应用程序分叉到您自己的GitHub存储库

为了协助使用ChatKit部署代理，OpenAI在GitHub存储库中提供了一些示例入门套件代码。我们需要将该应用程序分叉（即复制）到我们自己的GitHub存储库并部署到网络上。

对于部署阶段，我们将使用 Vercel。Vercel 是一个用于部署和托管 Web 应用程序的云平台。

要复制OpenAI应用程序，请使用Step 2中弹出窗口中的克隆示例应用链接。这将带您转到适当的OpenAI GitHub页面。目前，点击存储库上的Fork按钮。它就在绿色Code按钮的正上方和右侧。

在网站中部署一个OpenAI Agent Builder Chatbot

来自OpenAI GitHub仓库的图片

如果需要的话，您将被提示输入一个新存储库的名称，或者您可以将其保留为默认设置。

步骤4 - 将您对OpenAI示例ChatKit应用程序的分支部署到Vercel。

对于这一步，如果你还没有Vercel账户，你需要一个。我们将在这里展示的示例中免费设置和使用。立即前往https://vercel.com创建您的账户。

登录后，转到仪表板，点击“添加新项目”按钮开始一个新项目。您可以在页面左上角极端顶部找到仪表板链接，位于您的用户个人资料图标下方。

在网站中部署一个OpenAI Agent Builder Chatbot

来自 Vercel 网站的图片

第一次操作时，您需要授权 Vercel 访问您的 GitHub 账户权限，因此请点击“使用 GitHub 继续”按钮。然后将要求您授权 Vercel。选择允许 Vercel 访问所有您的存储库或只是一个单独的存储库。完成后，您将能够将您的 GitHub 存储库导入到 Vercel 中。导入完成后，最后一个阶段是部署。但在继续之前，您需要添加一些环境变量。执行此操作的链接就在部署按钮上方。

在网站中部署一个OpenAI Agent Builder Chatbot

来自 Vercel 网站的图片

您需要添加的环境变量是：

OPENAI_API_KEY - 这必须是在与您的Agent Builder一样项目中创建的API密钥。要获取您的API密钥，请前往

OPENAI_API_KEY

https://platform.openai.com/api-keys

创建或重复使用一个API密钥，确保项目名称与代理生成器中的名称匹配。

NEXT_PUBLIC_CHATKIT_WORKFLOW_ID - 这是您在Agent Builder中创建的工作流程的ID，以wf_开头。

NEXT_PUBLIC_CHATKIT_WORKFLOW_ID

之后，您可以在Vercel上点击“部署”按钮。这将需要一两分钟的时间，但一旦完成，我们就可以测试我们的聊天机器人了。部署完成后，返回到您的Vercel仪表板。确保您在正确的项目上，并且您应该看到一个标有“访问”的按钮，点击后将带您到您的聊天机器人。在我们点击之前，我们还有一件事要做。出于安全缘由，我们必须让OpenAI知道我们在Vercel上的聊天机器人应用的域名。

复制Vercel域名URL到您的项目中，并返回到您的OpenAI代理构建项目。

接下来，点击屏幕右上角附近的“Code”按钮，以显示Chatkit详细信息弹出窗口。点击“添加域”按钮。在弹出的迷你屏幕上，输入Vercel域名URL到字段中，然后点击“生成密钥”按钮。

在网站中部署一个OpenAI Agent Builder Chatbot

来自OpenAI网站的图片

目前，回到 Vercel，在“访问”按钮上点击以测试你的聊天应用。这是我的聊天应用的样子。

在网站中部署一个OpenAI Agent Builder Chatbot

作者提供的图片

第五步 - 修改我们原来可爱和拥抱脸网站，以整合新的聊天机器人。

这是我们的最后一步，涉及生成嵌入代码，我们可以将其插入到我们自己的网页中。我们通过修改我们的网络应用程序的index.html文件来实现这一点。我让ChatGPT创建我们需要注入的代码。

您可以从Vercel仪表板获取您的聊天机器人的域名URL。

这是我的ChatGPT对话。用你自己的域名URL替换我的。

这是我的聊天机器人的域名URL：
openai-chatkit-starter-app-blue.vercel.app
我想要一些部署代码放在我的网站的index.html页面的HEAD部分，以便我能在我的网站上运行聊天机器人

GPT的回应是这样的。

完美-由于您的聊天机器人托管在
https://openai-chatkit-starter-app-blue.vercel.app，将其嵌入到您的网站中最干净的方法是使用<iframe>，并在<head>中注入嵌入脚本，以便在页面加载时自动加载小部件。

以下是一个简单的复制粘贴片段，您可以将其放在index.html文件的<head>中。它在右下角创建一个浮动聊天气泡，打开一个包含聊天机器人的iframe面板：

将此内容添加到index.html的<head>中：


<style>
.chat-fab {
position: fixed;
right: 20px;
bottom: 20px;
width: 56px;
height: 56px;
border-radius: 50%;
border: none;
cursor: pointer;
background: #111;
color: #fff;
font-size: 24px;
box-shadow: 0 6px 15px rgba(0,0,0,0.25);
z-index: 10000;
}

.chat-panel {
position: fixed;
right: 20px;
bottom: 90px;
width: 400px;
height: 600px;
max-width: calc(100% - 40px);
transform: translateY(20px);
opacity: 0;
pointer-events: none;
transition: opacity .2s ease, transform .2s ease;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 12px 30px rgba(0,0,0,.25);
background: #fff;
z-index: 10000;
}

.chat-panel.open {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}

.chat-header {
height: 44px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 12px;
background: #111;
color: #fff;
font: 14px/1.2 system-ui, sans-serif;
}

.chat-iframe {
border: 0;
width: 100%;
height: calc(100% - 44px);
display: block;
}

.chat-close {
background: none;
border: 0;
color: #fff;
font-size: 18px;
cursor: pointer;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function () {
const fab = document.createElement('button');
fab.className = 'chat-fab';
fab.textContent = '';
fab.setAttribute('aria-label', '打开聊天');

const panel = document.createElement('div');
panel.className = 'chat-panel';
panel.setAttribute('aria-hidden', 'true');

const header = document.createElement('div');
header.className = 'chat-header';
header.innerHTML = `<span>聊天机器人</span>`;

const closeBtn = document.createElement('button');
closeBtn.className = 'chat-close';
closeBtn.textContent = '✕';
closeBtn.setAttribute('aria-label', '关闭聊天');

closeBtn.addEventListener('click', () => {
panel.classList.remove('open');
panel.setAttribute('aria-hidden', 'true');
});

const iframe = document.createElement('iframe');
iframe.className = 'chat-iframe';
iframe.src = '
https://openai-chatkit-starter-app-blue.vercel.app';
iframe.allow = 'clipboard-write; microphone; camera';
iframe.referrerPolicy = '
strict-origin-when-cross-origin';

header.appendChild(closeBtn);
panel.appendChild(header);
panel.appendChild(iframe);
document.body.appendChild(fab);
document.body.appendChild(panel);

fab.addEventListener('click', () => {
panel.classList.add('open');
panel.setAttribute('aria-hidden', 'false');
});
});
</script>

完美-由于您的聊天机器人托管在
https://openai-chatkit-starter-app-blue.vercel.app，最干净的方式将其嵌入到您的网站中是使用<iframe>，并在<head>中注入嵌入脚本，这样小部件在页面加载时会自动加载。

以下是一个简单的复制粘贴片段，您可以将其放在index.html文件的<head>中。它会在右下角创建一个浮动的聊天气泡，打开一个包含聊天机器人的iframe面板：

将以下内容添加到您的index.html的<head>中：


<style>
.chat-fab {
position: fixed;
right: 20px;
bottom: 20px;
width: 56px;
height: 56px;
border-radius: 50%;
border: none;
cursor: pointer;
background: #111;
color: #fff;
font-size: 24px;
box-shadow: 0 6px 15px rgba(0,0,0,0.25);
z-index: 10000;
}

.chat-panel {
position: fixed;
right: 20px;
bottom: 90px;
width: 400px;
height: 600px;
max-width: calc(100% - 40px);
transform: translateY(20px);
opacity: 0;
pointer-events: none;
transition: opacity .2s ease, transform .2s ease;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 12px 30px rgba(0,0,0,.25);
background: #fff;
z-index: 10000;
}

.chat-panel.open {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}

.chat-header {
height: 44px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 12px;
background: #111;
color: #fff;
font: 14px/1.2 system-ui, sans-serif;
}

.chat-iframe {
border: 0;
width: 100%;
height: calc(100% - 44px);
display: block;
}

.chat-close {
background: none;
border: 0;
color: #fff;
font-size: 18px;
cursor: pointer;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function () {
const fab = document.createElement('button');
fab.className = 'chat-fab';
fab.textContent = '';
fab.setAttribute('aria-label', '打开聊天');

const panel = document.createElement('div');
panel.className = 'chat-panel';
panel.setAttribute('aria-hidden', 'true');

const header = document.createElement('div');
header.className = 'chat-header';
header.innerHTML = `<span>聊天机器人</span>`;

const closeBtn = document.createElement('button');
closeBtn.className = 'chat-close';
closeBtn.textContent = '✕';
closeBtn.setAttribute('aria-label', '关闭聊天');

closeBtn.addEventListener('click', () => {
panel.classList.remove('open');
panel.setAttribute('aria-hidden', 'true');
});

const iframe = document.createElement('iframe');
iframe.className = 'chat-iframe';
iframe.src = '
https://openai-chatkit-starter-app-blue.vercel.app';
iframe.allow = 'clipboard-write; microphone; camera';
iframe.referrerPolicy = '
strict-origin-when-cross-origin';

header.appendChild(closeBtn);
panel.appendChild(header);
panel.appendChild(iframe);
document.body.appendChild(fab);
document.body.appendChild(panel);

fab.addEventListener('click', () => {
panel.classList.add('open');
panel.setAttribute('aria-hidden', 'false');
});
});
</script>

我拿到了上面的代码，并手动编辑了由Lovable创建的存储库中的index.html文件，该存储库在生成我的原始网页时创建。我将上面的嵌入代码插入到index.html文件的<head>部分中，并保存了文件内容。之后，我重新部署了存储库到我的可爱域名，您可以在下面看到结果。正如预期的那样，在页面的右下角创建了一个小的对话气泡图标，当我点击它时，聊天机器人对话框出现了，我可以与之交互。

<head>

可爱的（
https://little-react-wave.lovable.app/）

在网站中部署一个OpenAI Agent Builder Chatbot