
Set up an OpenAI account, API key, verify your organization, enable preview. Build a workflow that starts from a user query to generate a web page with a generator agent.
OpenAI agent kit provides three tools: agent builder, container registry, and chat kit to create, version, and embed multi-agent workflows, with a visual canvas like n8n and a central registry.
Explore how the OpenAI agent builder enables visual, drag-and-drop multi-step workflows with start nodes, guardrails against PII, if-else branching, and connections to OpenAI models.
Open a new tab, search for OpenAI Agent Builder, and click the Agent Builder link in the OpenAI API docs to open it.
Sign up or log in to OpenAI, sign up with Google, enter your name and birthday, accept terms, create an organization, and invite your team to generate API keys.
Generate your first OpenAI API key, test it with curl, and keep keys secure and private by adding them to gitignore; enable billing when ready.
Set up billing, buy openai credits with a credit card (minimum $5), learn about daily free token limits when sharing inputs and outputs, then return to the agent builder.
Navigate the agent builder home screen to create workflows with custom logic and tools, explore templates for data enrichment, planning helpers, and customer service, and monitor billing credits.
Enable free daily tokens by sharing inputs with OpenAI. Learn to configure data controls, enable project sharing, and start a chat agent workflow with custom logic and tools.
Learn to set up a Python development environment across macOS, Windows, and Ubuntu by installing Python 3.13.4, uv, VSCode, and git, then verify installations and configure the Python extension.
Install and verify python 3.13 on windows, add to path, install uv via pip or installer, then install VS Code and python extension, and finally install git and verify version.
Set up Ubuntu development environment by installing python3, python3-pip, python3-venv, curl, uv, Visual Studio Code, and git, then install the Python extension for Visual Studio Code.
Open the agent builder dashboard, create a new workflow, and rename it to an html page generator that turns a user query into a single html/css/javascript page.
Configure the start node in a chat workflow by recognizing input as text and appending user input to the conversation history for the next My Agent node.
Set up the agent node in OpenAI Agent Builder and n8n automation, choose GPT five mini, enable high reasoning and text output, then expand prompt to generate an html document.
Add an end node, drag and select it to complete the workflow, then rename the agent to one short web page generator to finalize the simple HTML page generator workflow.
Verify your organization to enable the preview workflow, then complete the ID check with a government ID and selfies on persona.com to activate the live preview button.
Preview and test your OpenAI agent builder workflow with n8n automation, refine the output format to JSON, and produce a unified HTML document for the AI education landing page.
Copy and unescape the HTML document, format it in VS Code, save as test dot HTML, and render a browser page with header, hero, form, courses, pricing, and FAQ.
Set up your OpenAI account, manage credits, and enable data sharing for free credits; then build a workflow with a start node, a one-shot web page generator, and chat testing.
Extend the OpenAI agent builder workflow by adding a file search node and a set state node between start and the one shot web page generator.
Create a vector store from uploaded documents to enable semantic or keyword retrieval by the model. Define global variables with the set state tool to reuse outputs across workflows.
Outline an automated workflow that builds a topics list, stores it as a vector store, then uses an agent to generate a complete HTML page for a random topic.
Delete the old nodes, add a file search node from the tools menu between the start and agent, and edit its properties to configure the initial flow.
Create a vector store to hold numerical representations of uploaded files and enable semantic search by concept rather than keywords. Use txt format for uploads since csv is not supported.
Configure a file search node with max results set to one, enter a simple query to fetch the list of sample queries, and route the output to the next node.
Add a set state node to store the file search output as a global workflow variable, using cell expressions to map input results to a topic list.
Add an agent by expanding the prompt and referencing state variables like topic_list to pull results from file search tool. Generate a one-shot HTML page and a JSON response schema.
Preview and test the file search workflow in the agent builder to generate a product web page for a smart water bottle, with html output and add to cart functionality.
Add a file search tool to the agent by configuring a vector store, enabling topic-based searches, and test by updating the prompt to output a unified HTML document.
Preview 2 demonstrates an OpenAI agent using the file search tool to pick a topic and generate a task flow web page with header and features.
Learn a workflow using a file search tool and set state tool to search documents, store results in a state variable, and augment the agent's knowledge to produce output.
Explore how the model context protocol enables the OpenAI agent builder to connect to external MCP servers and tools, such as Google Drive, to retrieve data and extend agent capabilities.
remove the old file search and set state nodes, replace with the MCP tool to fetch information from Google Drive, integrating an MCP server as a tool within the agent.
Select the MCP server type—OpenAI connectors, third-party, or your own server—and add Google Drive as an OpenAI-hosted MCP.
Learn to obtain a Google Drive access token using OAuth 2.0 in the playground, selecting Drive API v3 with the read-only scope and exchanging authorization codes for tokens.
Finish setting up the Google Drive MCP connection to fetch and search drive files, approve tools, and download file content to extract web page topics for the project.
Update the agent prompt to fetch topics from Google Drive, using MCP to select a topic and generate a single HTML, CSS, and JS webpage with the topic title.
Finish touches by connecting start node to one shot web page generator. Rearrange nodes and upload topic list vector dot txt to the open AI Agent Builder Google Drive folder.
Enter a query, generate a web page from topics, and approve vector-store searches as the agent reasons, plans HTML, and outputs a clean modern landing page for Task Flow.
Demonstrate viewing the output HTML page from OpenAI Agent Builder and integrating MCP data read from Google Drive to power a Task Flow app web page using n8n automation.
Explore using the MCP server as a tool in OpenAI Agent Builder to access Google Drive data, fetch topics, and build a web page from a random topic.
Guardrails monitor inputs for PII, jailbreaks, and hallucinations in OpenAI Agent Builder, deciding whether to pass or fail the workflow. On failure, an agent removes PII and rewrites the page.
From scratch, build a one-shot web page generator with an agent node and guardrails. Detect and remove personally identifiable information, then rewrite the page into a final unified HTML document.
Add a guardrail node to run moderation and PII checks, configuring input from the previous node and selecting entities like person name, email, and phone number to drive pass/fail routing.
In the guardrail fail case, create a remove PII agent to redact personally identifiable information from the HTML, using guardrails input_text and detected counts, then output a unified HTML document.
Show how a guardrail protects personal data in a one-shot web page generator by checking for PII and routing to a second agent to remove it and rewrite the page.
Preview an agent building workflow in OpenAI agent builder and n8n automation, highlighting guardrails for PII detection and removal in a generated portfolio webpage.
Learn to save HTML outputs in an OpenAI agent workflow, manage guardrail outputs by separating PII and no PII, and format and unescape HTML in VS Code.
Explore how a guardrail identifies and redacts pii in web content, compare redacted and non-redacted outputs, and use an agent to double-check sensitive data like names, emails, and phone numbers.
Recap how the OpenAI agent builder and n8n automate web page generation with a PII guardrail that redacts data and finalizes the page or ends the workflow.
Preview a quick open AI agent builder workflow using a start node, set state, and a while loop that updates the counter and latest output after each iteration.
Explore the while loop by examining a counter initialized to zero, the exit condition x < 5, and updates that print the current x value until termination.
Set initial state in a while-loop workflow by creating a counter and a current_output variable, initializing the counter to 1, and storing each iteration's HTML output for reuse.
Learn to build a while loop that iterates twice using a counter, updating state and generating a web page with an agent, then exits when the condition is false.
Configure a two-iteration setup for the agent, using a unified html page generator prompt and current output plus the initial user query to improve the page, with a json response.
Update the state by incrementing the counter and assigning the HTML page generator's latest output to current output during each iteration of the while loop.
Preview the workflow by sending a query to generate a landing page template for an online course on AI and agents, showing iterated HTML generation and state updates until completion.
Demonstrate copying and formatting outputs as JSON and HTML, viewing logs and iterations, and preparing VS Code files for an OpenAI agent builder workflow.
Preview how the agent builder output evolves from iteration one to two html, refining the hero, title area, and a dark-to-light theme toggle. Auto-scroll then highlights features, gallery, and pricing.
Explore how a while loop drives execution and repeats node execution based on a condition, demonstrated across two web pages and a counter within OpenAI agent builder and n8n automation.
Build a five-step, six-agent multi-agent web page generator - from safety checker to code writer - on a blank canvas using drag-and-drop nodes, with state and human-in-the-loop approvals.
Create a new workflow in the platform agent builder, then rename it to multi-agent web page generator to begin building the multi-agent workflow that generates a web page.
Develop the workflow design phase by referencing the previous design of steps and nodes, then build from scratch using the six agent prompts stored in the course repository.
Build the first step, a safety checker agent, to evaluate queries for safety and request user approval if unsafe. It outputs a JSON schema with is_query_save and query_safety_reason.
Transform the agent’s output with the transform node to reshape JSON into variables such as is_query_safe and query_safety_reason_var, linking input and previous node outputs.
Configure a set state node to store transform outputs as state variables, such as is_query_safe_state and query_safety_region_state, with default values and a successful save.
Configure an if else node to check query safety using a state variable, routing safe queries to a safe branch and unsafe ones to user approval.
Implement a user approval stage in an OpenAI agent workflow with n8n, pausing on unsafe queries and proceeding to research only after approval.
Execute the research phase by configuring two agents—the questions generator and questions researcher—to produce five questions, fetch answers via web search, and store results in state.
Set up step three with the requirements writer agent and a set state node. Copy GitHub prompt to generate HTML, CSS, and JS requirements based on five questions and answers.
Configure the designer agent and set state nodes to generate design guidelines for a unified HTML CSS document, including colors, fonts, and motion design, preparing for the code writer agent.
Drive the next step with the code writer agent to produce a single unified html, css, and js document for a web page, using instructions from the code writer.txt file.
Create an html viewer widget that renders html, css, and js as both code and a visual web page within the agent builder, describing, uploading, and testing iterations.
Preview the workflow in the OpenAI agent builder and n8n automation, from query safety to questions, research, and a web page HTML document on large language models and AI agents.
Explore a workflow output that defines an AI agent as a goal‑oriented system using an LLM to perceive, think, and act with tools, APIs, and memory, with safety.
Build a practical OpenAI Agent Builder and n8n automation workflow from scratch with a start node and six agents, incorporating set state, transform, effects, and user approvals to solve problems.
discover how n8n workflow automation builds a visual workflow with a trigger, AI agent, memory, and decision nodes to route actions for manager and non-manager scenarios.
Explore the drag-and-drop visual workflow editor to easily build and connect workflows without coding, arrange nodes, make changes, and automate the workflow.
Explore flexible node types, including trigger and action nodes, with conditions, branches, data transformation, and storage to support various functionalities beyond the visual editor.
Explore how to connect 500-plus apps with a visual, low-code workflow: set up integrations for Slack, Outlook, and Google Calendar, handle authentication, and run AI agents on data.
Extend your automation with code when the UI falls short by writing JavaScript or Python, adding libraries from npm or Python, and pasting curl requests.
Build multi-step agents that call custom tools with a drag-and-drop visual editor and integrate any language model. Chat with data via Slack, SMS, or voice, and trigger tasks in Asana.
Explore n8n's GitHub page and source code, learn the quick start, and install the free community edition to build AI agent workflows with your data.
Discover how Natan automates workflows using nodes, apps, and AI integration. Gain flexibility by adding code to your workflows when UI options fall short.
TL;DR: Learn to setup and build a multi-step AI agentic workflow from scratch using two of the most powerful visual platforms: the newly released OpenAI Agent Builder and the versatile n8n. This course provides a complete Open AI Agent Builder course and a quickstart for n8n for Mac, Windows, and Ubuntu users.
Most important note - You will need to purchase OpenAI API credits on the OpenAI website to use the OpenAI Agent Builder
What you'll learn (Master OpenAI Agent Builder):
Setup OpenAI account, API Key, ID Verification and add credits
Note - OpenAI API credits need to be purchased to use the Agent Builder
Build a simple workflow that generates HTML Webpages based on a user query
Integrate the OpenAI Models on the OpenAI Platform
Preview your workflow on the platform using a chat interface
What you'll learn (Quickstart on n8n Automation):
Setup free n8n Community Edition and n8n account
Build a simple workflow that generates HTML Webpages based on a user query
Setup a Google Cloud Project and Free Gemini API Key. Integrate the Gemini Chat Model in n8n
Preview your workflow on the n8n instance using a chat interface
What is OpenAI Agent Builder & n8n?
This course uniquely positions you at the forefront of the AI automation revolution by teaching you two leading visual agent-building platforms:
OpenAI Agent Builder: Part of OpenAI's new "AgentKit," this tool offers a seamless, drag-and-drop canvas to visually construct and deploy AI agents.
n8n: A powerful and flexible open-source platform for workflow automation with a strong focus on AI capabilities. With n8n, you'll can integrate hundreds of applications, write custom code when needed, and build robust, production-ready AI workflows.
Key Features of the Course
Cross-Platform Learning: The course is recorded on a MacBook, but the no-code nature of these tools ensures you can follow along seamlessly on Windows and Ubuntu.
Embracing the Evolution of AI: Given that the OpenAI Agent Builder was just launched, you will be part of a learning experience that covers the latest in no-code agent builders
Important Notes & Disclaimer
This course is designed for educational purposes. You are responsible for managing your own use of third-party services, including their terms, privacy policies, and any associated costs.
You will need to pay for OpenAI API credits to utilize the Agent Builder.
This course does not offer guarantees or warranties for external services such as Google Gemini, GCP, OpenAI, or n8n.
The tools and APIs from providers like Google and OpenAI are subject to change. This course will guide you through their application in a learning context to demonstrate practical agent development.
Let’s Build the Next Generation of Agents Together!
By the end of this course, you will have the skills to start self exploration on more detailed features of OpenAI and n8n Agent Builders. Whether your goal is to learn, explore, or innovate, this course is your gateway to the future of agentic computing.