OpenAI Agent Builder: The No-Code Way to Put AI on Your Website

Most people think building an AI chatbot for your website requires a development team, a bunch of API calls, and weeks of testing. That was true six months ago. Then OpenAI launched Agent Builder, and suddenly you can build a working AI agent—one that reads from your knowledge base, follows your instructions, and deploys to your website—with minimal code in about 15 minutes.

What is OpenAI Agent Builder?

Agent Builder is OpenAI's visual tool for creating AI agents—basically custom ChatGPTs that can actually do things instead of just suggesting them.

Think of it like this:

• Regular ChatGPT: You ask a question, it gives you an answer based on training data
• Custom GPTs: You add instructions and documents, it remembers your context
• Agent Builder: You connect tools and build workflows, it can take actions on your behalf

Here's the killer feature: Agent Builder gives you a GUI for connecting your agent to external services like Notion, Slack, Google Drive, or your own APIs. You're not writing integration code—you're just clicking checkboxes and configuring fields.

It's like Zapier met ChatGPT and had a very capable child.

The visual workflow you see in Agent Builder isn't just for show—it's actually how you design your agent's behavior. Want your agent to check a database, process the results, then send a formatted message? Just drag those nodes onto the canvas and connect them.

Why This Matters (And Why I'm Writing About It)

I've spent the last few months building AI automation workflows using ChatGPT custom actions, Claude MCP, and various API integrations. They all work, but they all have friction.

Agent Builder removes most of that friction.

You don't need to:

• Write authentication code
• Handle API responses
• Parse JSON
• Deal with rate limits
• Deploy infrastructure
• Manage secrets (well, mostly)

You just connect things through a visual interface and OpenAI handles the plumbing.

That's transformative for small businesses and solo developers who want AI capabilities but don't want to become integration specialists.

What We're Building Today

To show you how Agent Builder actually works in practice, we're going to build a customer support chatbot for a fictional adventure travel company called TrekWise.

Why this example? Because it demonstrates the three core capabilities of Agent Builder:

1. Data retrieval: Reading from external sources (we'll use Notion)
2. Intelligent processing: Understanding questions and finding relevant answers (RAG pattern)
3. User interface: Deploying as a chat widget that anyone can interact with

The company is fictional, but the demo is real and fully functional. You can see the working TrekWise chatbot at trekwise-adventure-blueprint.pages.dev and even clone the repository from github.com/FourixAI/trekwise-adventure-blueprint to see how it all works under the hood.

By the end, you'll have a working agent that:

• Reads from a Notion page containing FAQs and product info
• Answers customer questions intelligently
• Lives on your website as a clickable chat widget
• Updates automatically when you edit your Notion page

All built through Agent Builder's visual interface. Minimal code until the very last step (deploying to your site).

The Architecture: How Agent Builder Thinks

Before we start clicking buttons, let's understand what Agent Builder is actually doing under the hood. This will make the GUI make more sense.

An agent in Agent Builder has three core components:

1. Instructions (The Brain)
This is where you tell your agent what its job is and how to behave. Think of it as writing a job description for an employee who's very literal and incredibly fast.

2. Tools (The Hands)
These are the actions your agent can take. Read from Notion? That's a tool. Send a Slack message? Tool. Create a calendar event? Tool. Agent Builder connects to external services through MCP (Model Context Protocol) servers like Zapier's, which is OpenAI's standardized way for AI agents to securely interact with external applications and APIs.

3. Workflow (The Process)
This is the visual flowchart you build. It defines how your agent uses its tools. Do you want it to check one source, or multiple? Should it clean up its output before showing the user? Do you need approval gates? You design this in the GUI by connecting nodes.

The beautiful thing is you're never writing code to make these components work together. You're just configuring them through forms and dropdowns.

Step 1: Create Your Knowledge Base (Notion Setup)

First, we need something for our agent to read from. I'm using Notion because it's easy to update and integrates cleanly with Agent Builder through Zapier.

Head to Notion and create a new page. Call it whatever makes sense—I named mine "TrekWise Knowledge Base."

Now structure your content clearly. Use headers, bullet points, and distinct sections. Agent Builder will read this entire page, so organization matters.

Here's the structure I used:

# TrekWise Adventure Travel Knowledge Base

## About TrekWise
We offer eco-conscious adventure travel expeditions to remote wilderness areas.

## Expeditions

### Patagonia Expedition
- Duration: 12 days
- Difficulty: Moderate to challenging
- Group size: 8-12 people
- What's included: All meals, camping gear, expert guides, permits
- Price: $3,200 per person
- Best time to visit: November to March

### Nepal Trekking Experience
[Similar structure]

### Tasmania Wilderness Journey
[Similar structure]

## Frequently Asked Questions

**What's included in the expedition price?**
All our expeditions include meals, camping equipment, expert guides, permits, and group gear. You'll need to bring personal items and clothing.

**Do I need previous hiking experience?**
Our Patagonia and Nepal treks require good fitness and some hiking experience. Tasmania is suitable for beginners with moderate fitness.

[More FAQs...]

Pro tip: Write answers in full sentences as if you're speaking to a customer. This gives your agent better source material to work with than bullet points alone.

Once your page is ready, keep it open—you'll need to connect it to Zapier in a moment.

Step 2: Connect Zapier to Your Apps

Agent Builder can connect to external tools through MCP servers, and Zapier provides one of the most comprehensive MCP servers available. Think of Zapier as the universal translator between your agent and your apps, using OpenAI's MCP architecture to enable secure, standardized communication.

Go to zapier.com → App Connections → Add Connection

Connect Notion: When the permission screen appears, click Select pages (not "allow all") and choose only your TrekWise knowledge base page. This scopes the permission tightly—your agent can only read this one page, nothing else in your Notion workspace.

That's it for connections. Simple, right? Now Zapier knows which accounts your agent will use when it needs to read from Notion.

Step 3: Open Agent Builder and Create Your Agent

This is where the magic happens. Head to platform.openai.com and look for Agent Builder in the sidebar.

If you don't see it, you might need to enable it in your account settings—OpenAI has been rolling this out gradually over the past few months.

Click Create Agent and you'll land on a blank canvas. This is your workspace.

Name Your First Agent: The RAG Agent

Click to add your first node and name it something descriptive. I called mine "RAG Agent" because its job is to retrieve information from our knowledge base (that's the "R" in RAG—Retrieval-Augmented Generation).

Don't worry about what RAG means technically yet—just know this agent's job is to read from Notion and find answers to questions.

Step 4: Connect the Zapier MCP Server (Give Your Agent Tools)

Now we're going to give this agent the ability to actually do something. In Agent Builder, that means connecting tools.

Click on your RAG Agent node → Tools → + Add Tool → MCP Server → Zapier

You'll see a prompt asking for your Zapier API key. Click "Get API key" and it'll redirect you to mcp.zapier.com.

Copy that key and paste it back into Agent Builder. Hit Connect.

Now Agent Builder can talk to Zapier, which means it can talk to any app you connected in Step 2.

Configure the Notion Tool in Zapier

This is the specific capability we're adding: the ability to read your Notion page.

Go back to the Zapier MCP dashboard where you got your API key. This is where you'll configure the Notion integration:

Select Notion → Get Page and Children and configure it:

• PageId: Click "Set a specific value" → Select your TrekWise knowledge base page from the dropdown
• Leave everything else as default
• Hit Save

Important: Find the toggle that says "Require approval for this tool" and turn it OFF. You want your agent to automatically read from Notion when needed, not ask permission every time.

Now go back to Agent Builder and make sure only the notion_get_page_and_children tool is selected for your agent.

What just happened? You gave your agent a superpower: whenever it needs information, it can now pull up your entire Notion page and search through it. No code. Just configuration.

Step 5: Write Your Agent's Instructions (The Critical Part)

This is where you teach your agent how to think. The instructions you write here determine how your agent behaves, how it uses its tools, and how it responds to users.

Click on the Instructions field in your RAG Agent and paste something like this:

You are the TrekWise knowledge assistant.

Your job: Answer customer questions about TrekWise expeditions using information from the TrekWise knowledge base.

How to work:
1. When a user asks a question, use the tool `notion_get_page_and_children` to read the TrekWise knowledge base (page ID already configured)
2. Treat the returned text as your complete source of truth
3. If the information is in that page, summarize it clearly and naturally
4. If the answer is NOT in the page, say politely: "I don't have that information in our guide yet, but I'd be happy to help with something else!"
5. Never mention Notion, tools, or internal processes—speak like a TrekWise team member
6. Keep answers short and confident
7. Use bullet points for lists

Example:
User asks: "Tell me about the Patagonia Expedition"
→ You read the knowledge base, find the Patagonia section, and respond with the key details (duration, difficulty, price, what's included, etc.)

These instructions are doing a lot of heavy lifting:

• They tell the agent which tool to use (the Notion reader)
• They define how to use it (treat it as source of truth)
• They set tone (speak like a team member, not a robot)
• They handle edge cases (what to say when you don't know)
• They give examples (so the agent understands the pattern)

This is the brain of your operation. The better your instructions, the better your agent performs.

Configure Display Settings

Two quick toggles at the bottom of your agent configuration:

• Display response in chat: Turn this OFF
• Show search sources: Turn this OFF

These are debugging features. During testing they're useful, but customers don't need to see "Tool called: notion_get_page_and_children" when they ask about pricing. They just want the answer.

Step 6: Add a Display Agent (Polish the Output)

Here's a technique I picked up from building these agents: the raw output from your RAG agent sometimes includes technical debris—tool traces, JSON snippets, metadata tags.

So add a second agent whose only job is to clean that up.

Click + Add Agent in your workflow canvas and name it "Display Agent"

Connect it to your RAG Agent—this agent receives the RAG agent's output and processes it.

In the Display Agent's instructions:

You are the Display Agent. Your job is to take the RAG Agent's output and present it cleanly to the user.

What to do:
1. Receive the previous agent's raw output
2. Remove any internal debug info, tool names, JSON wrappers, or technical metadata
3. Add natural conversational framing like:
   - "Here's what I found about that..."
   - "Based on our TrekWise guide..."
4. If the RAG agent says "not found", convert it to: "I don't have that info in our guide yet. Can I help with something else?"
5. NEVER call any tools yourself—just clean up and return the text
6. Output exactly what you want the customer to see

Your output is what the customer reads. Make it clean, friendly, and natural.

Set this agent as your End Node—the final step before output reaches the user.

Now your workflow is: User question → RAG Agent (reads Notion) → Display Agent (cleans output) → User sees polished answer.

This two-agent pattern is optional but makes a huge difference in output quality. The RAG agent focuses on accuracy, the Display agent focuses on presentation.

Step 7: Test Your Agent in Preview Mode

Before deploying this to your website, let's make sure it actually works.

Click Preview in the top-right corner of Agent Builder.

A chat interface appears. Try some questions:

"Tell me about the Patagonia Expedition"
"What's included in the price?"
"Do I need hiking experience for Nepal?"
"How much does Tasmania cost?"

Watch what happens:

1. Your agent receives the question
2. It calls the Notion tool to read your knowledge base
3. It finds the relevant section
4. It formats a clean answer
5. The Display Agent polishes it
6. You see the final response

If something feels off—maybe the tone is too formal, or it's not finding answers correctly—go back and tweak your instructions. Agent Builder makes iteration fast: edit → save → test → repeat.

This is where you'll spend most of your time: testing edge cases and refining behavior. The good news is you can do this all in the GUI without touching code.

Step 8: Publish Your Workflow

Once you're happy with how your agent responds, it's time to make it real.

Click Publish in the top-right corner.

Give your workflow a memorable name—I called mine "TrekWise Chatbot"—and hit Publish to confirm.

OpenAI will deploy your agent and generate the necessary credentials for embedding it on your website.

Your agent is now live and ready to be added to a web page. This is the moment Agent Builder shines: you just built a working AI system without writing a single line of integration code.

Step 9: Deploy ChatKit to Your Website

Now comes the payoff: putting your agent on your actual website as a chat widget.

OpenAI calls this embedding system ChatKit. It's a pre-built chat interface (that little bubble in the corner of websites) that connects directly to your published agent.

Configure Your Domain

In Agent Builder, click ChatKit → Add domain

Enter your website's domain. In my case, I deployed TrekWise to GitHub Pages, so it's fourixai.github.io. If you have a custom domain, use that.

Hit Generate key and copy the key that appears. It'll look like domain_pk_68ec696807xxxxxxxxxxxxxxxxxxxxxxxxxxx5c73520cd16.

This key is how ChatKit knows your website is authorized to use your agent. Keep it handy.

Add the ChatKit Script to Your HTML

Open your website's main HTML file (usually index.html) and add this single script tag inside the <head> section:

<script
  src="https://cdn.platform.openai.com/deployments/chatkit/chatkit.js"
  async
></script>

That's the core integration - just the script tag. ChatKit is now loaded on your site and will automatically look for your published agent using the domain key you generated.

Save and deploy your site. The ChatKit script will automatically render a chat bubble on your page, or you can customize how and where the chat appears.

If You're Using React or Another Framework

Agent Builder also provides framework-specific packages. For React:

npm install @openai/chatkit-react

Then import and add the component to your page wherever you want it to appear:

import { ChatKit } from '@openai/chatkit-react';

function MyPage() {
  return (
    <div>
      <h1>Welcome to TrekWise</h1>
      <p>Your adventure travel content here...</p>
      <ChatKit
        domainKey="your-domain-key-here"
        workflowId="your-workflow-id-here"
      />
    </div>
  );
}

This gives you complete control over where and how the chat widget appears on your page. Full docs at platform.openai.com/docs/guides/chatkit.

The GUI setup is identical—you're still building your agent in Agent Builder. The only difference is how you embed the chat widget on your page.

Step 10: Handle Authentication (Cloudflare Pages Example)

If you're hosting on a static platform like Cloudflare Pages, GitHub Pages, or Netlify, there's one more piece: session management.

ChatKit needs to create a secure session for each visitor without exposing your OpenAI API key to the public internet. Different platforms handle this differently, but the pattern is the same: a serverless function that acts as a secure middleman.

Here's the Cloudflare Pages version. Create a folder structure: /functions/chatkit/session.ts

Paste this code:

import type { PagesFunction } from "@cloudflare/workers-types";

interface Env {
  OPENAI_API_KEY: string;
  WORKFLOW_ID: string;
}

const corsHeaders = {
  "Access-Control-Allow-Origin": "*",
  "Access-Control-Allow-Headers": "Content-Type, Authorization",
  "Access-Control-Allow-Methods": "POST, OPTIONS",
};

export const onRequest: PagesFunction<Env> = async ({ request, env }) => {
  const method = request.method.toUpperCase();

  if (method === "OPTIONS") {
    return new Response(null, { status: 204, headers: corsHeaders });
  }

  if (method !== "POST") {
    return new Response("Method Not Allowed", {
      status: 405,
      headers: { ...corsHeaders, Allow: "POST" },
    });
  }

  if (!env.OPENAI_API_KEY || !env.WORKFLOW_ID) {
    return new Response("Server missing OpenAI configuration.", {
      status: 500,
      headers: corsHeaders,
    });
  }

  const openaiRes = await fetch("https://api.openai.com/v1/chatkit/sessions", {
    method: "POST",
    headers: {
      Authorization: `Bearer ${env.OPENAI_API_KEY}`,
      "Content-Type": "application/json",
      "OpenAI-Beta": "chatkit_beta=v1",
    },
    body: JSON.stringify({
      workflow: { id: env.WORKFLOW_ID },
      user: crypto.randomUUID(),
    }),
  });

  if (!openaiRes.ok) {
    const errorText = await openaiRes.text();
    return new Response(errorText, {
      status: openaiRes.status,
      headers: corsHeaders,
    });
  }

  const { client_secret } = await openaiRes.json<{ client_secret: string }>();

  return new Response(JSON.stringify({ client_secret }), {
    status: 200,
    headers: {
      ...corsHeaders,
      "Content-Type": "application/json",
      "Cache-Control": "no-store",
    },
  });
};

What this does: It creates a secure session for each website visitor. Think of it as a bouncer who checks credentials server-side and issues temporary passes. Visitors get access to chat with your agent, but they never see your API keys.

Set Environment Variables

Go to Cloudflare Dashboard → Workers & Pages → your project → Settings → Environment Variables

Add two variables:

1. OPENAI_API_KEY: Your OpenAI API key (mark as Secret/encrypted)
2. WORKFLOW_ID: Your workflow ID from Agent Builder

Deploy again, and your chat widget will now work properly with authenticated sessions.

The Results: What Actually Works

After going through this process, here's what surprised me:

The knowledge base updates automatically. When I change pricing in Notion, the chatbot instantly has the new information. No redeploying, no retraining—just edit and it's live.

The chat interface is intuitive. The demo shows how people prefer asking questions in natural language rather than hunting through FAQ pages. The chat widget makes finding information frictionless.

It handles unexpected questions gracefully. When someone asks about something not in the knowledge base (like "Do you offer trips to Antarctica?"), the agent politely says it doesn't have that information rather than hallucinating.

The two-agent pattern was worth it. The Display Agent consistently removes technical artifacts and makes responses feel more natural.

What This Means for Businesses

Agent Builder changes the calculation for small businesses:

Before: Custom chatbot = $5,000-20,000 development project + monthly maintenance
After: Working AI agent = 15 minutes setup + OpenAI usage fees (typically pennies per interaction)

More importantly, it puts the power back in the hands of people who actually know the business. You don't need to translate your knowledge base into JSON schemas or API specifications. You just write it like you'd explain it to a new employee, and the agent figures out the rest.

The real breakthrough isn't technical—it's that your subject matter experts can now build AI tools without becoming developers.

Limitations and Considerations

Agent Builder is still in its infancy, and it's important to understand where it shines and where it has limitations:

It's quite basic in functionality. Agent Builder doesn't offer the massive amount of features you'd find in mature automation platforms like n8n or Zapier. Currently missing features include:

• Retry mechanisms for failed tool calls
• Custom node creation
• Advanced error handling
• Advance loop constructs
• Complex data transformation
• Triggers that aren't chat-based

However, Agent Builder is actively evolving and OpenAI is regularly adding new capabilities.

But it's much closer to the LLM. What Agent Builder lacks in features, it makes up for in proximity to GPT. The integration feels more natural and the reasoning capabilities are more powerful because you're working directly with OpenAI's models rather than going through multiple layers of abstraction.

It can be deployed very quickly. While we ended up with a few lines of code including the required backend authentication function, the deployment process is still remarkably fast compared to traditional development approaches.

It's still dependent on your knowledge base quality. Garbage in, garbage out. The agent can only work with what you give it.

Complex reasoning may hit limits. If customers need multi-step comparisons or calculations that aren't explicitly in your documents, the agent might struggle.

You need to monitor conversations. Like any AI system, it can occasionally misinterpret questions or provide incomplete answers.

Usage costs add up. While typically cheap, high-traffic sites should monitor their OpenAI API usage.

The Bigger Picture

Agent Builder represents a fundamental shift in how we think about AI deployment:

From: Building custom integrations and managing infrastructure
To: Configuring workflows through visual interfaces

From: Technical teams implementing AI features
To: Business experts directly creating AI tools

From: Long development cycles and testing phases
To: Rapid prototyping and immediate deployment

This democratization of AI building is happening across the board. Tools like Agent Builder, Zapier, and others are removing the technical barriers that kept AI capabilities locked away in engineering departments.

Try it yourself! Visit the live demo at trekwise-adventure-blueprint.pages.dev to see the TrekWise chatbot in action, or clone the repository from github.com/FourixAI/trekwise-adventure-blueprint to explore the complete implementation.

What to Build Next

Once you have this basic pattern working, you can expand it:

• Multi-source knowledge bases: Connect to multiple Notion pages, Google Docs, or databases
• Handoff to human agents: Add logic to escalate complex questions to real staff
• Proactive engagement: Trigger the chat based on user behavior
• Integration with booking systems: Let customers check availability or make reservations
• Analytics and feedback: Track what questions people ask most frequently

The visual workflow interface makes it easy to experiment with these capabilities without rewriting code.

Final Thoughts

Agent Builder isn't just another AI tool—it's a glimpse at how AI deployment should work. The fact that I can build a working customer support system in 15 minutes, connect it to my existing knowledge sources, and deploy it with just a few lines of code (including the a small backend authentication function) shows how far we've come.

The low-code approach doesn't just make things faster—it makes them more accessible. Your marketing team can build a product recommendation bot. Your HR department can create an onboarding assistant. Your support team can build a triage system.

And they can do it all without waiting for the development queue.

The most powerful AI tools aren't the ones with the most features—they're the ones that turn expertise into automation. When the people who live and breathe these problems can directly build the solutions, that's when AI stops being impressive and starts being indispensable.

---

Want to dive deeper into AI automation and low-code development? I share practical experiments, implementation details, and real-world examples over at gaul.dev. Come join the conversation about building the future of AI-powered workflows.