How To Use ChatKit UI with OpenAI Agent Builder

Key Concepts

• OpenAI Agent Builder: A platform for creating AI workflows.
• Chatkit: A feature within OpenAI Agent Builder that allows integration of AI workflows into live websites or applications.
• Workflow ID: A unique identifier for a specific AI workflow created in OpenAI Agent Builder.
• API Key: A secret key used to authenticate requests to OpenAI services.
• Tech Stack: The collection of technologies and frameworks used to build an application (e.g., React).
• GitHub: A platform for version control and collaboration, used here for storing and managing code.
• Repository: A storage location for code files.
• IDE (Integrated Development Environment): Software used for writing and debugging code (e.g., Cursor).
• Cloning a Repo: Downloading a copy of a code repository to a local machine.
• SSH (Secure Shell): A protocol for secure remote login and other secure network services over an insecure network.
• Localhost: A hostname that means "this computer."
• Deployment: The process of making an application or website live and accessible on the internet.
• Vercel: A cloud platform for frontend developers, used here for fast and easy deployment.
• Environment Variables: Variables that store configuration settings and sensitive information (like API keys) separately from the main code.
• Domain: A unique name that identifies a website on the internet (e.g., example.com).
• Allowed Domains: A security feature in OpenAI that specifies which websites are permitted to use an AI workflow.
• Console Logs: Messages printed by the code to help developers debug issues.
• UI (User Interface): The visual elements of an application that a user interacts with.

Integrating OpenAI Workflows with Chatkit for Live Websites

This guide details the process of taking an OpenAI agent workflow and integrating it into a live website using the Chatkit feature. The tutorial assumes a basic understanding of OpenAI agent builder and aims to provide a step-by-step approach for users with minimal or no prior development experience.

1. Understanding the Core Components

To successfully integrate an OpenAI workflow with Chatkit, several key components need to be interconnected:

• OpenAI Agent Workflow: The AI logic and functionality built within the OpenAI Agent Builder. This is the "value" that will be leveraged.
• Application/Website: The platform where the Chatkit integration will occur. This can be any type of web application, regardless of its tech stack (e.g., React, or any other framework).
• GitHub: Used for version control and to integrate with other necessary software. The tutorial mentions that the repository used will be open-sourced for free use.
• Product/Deployment Platform: A service like Vercel, Firebase, or AWS that hosts the live website or application. A valid website link is crucial for the OpenAI agents to function.

The tutorial emphasizes that this process can be a "major unlock" for those who have built apps locally but struggled with deployment or integration.

2. Setting Up the Development Environment

The process begins by leveraging the Chatkit OpenAI documentation, which provides a starter app.

• Accessing the Starter App: The documentation link will be provided in the video description. Users can either use OpenAI's official starter app or a specialized version provided by the tutorial creator.
• Repository: The starter app is essentially a code repository. A repository is described as a place where all code is stored in folders.
• Cloning the Repository:
  • Users need an IDE (Integrated Development Environment). The tutorial uses Cursor but notes that any IDE will work.
  • The provided repository link (using SSH or HTTPS) is used to clone the repo.
  • A new folder (e.g., "agent kit") is created to store the cloned code.
  • The tutorial creator recommends downloading their specialized starter app to have a working reference product before attempting integration into an existing project. This is to avoid the frustration of integrating Chatkit directly into a complex, existing application.

3. Configuring the Starter App

Once the starter app is cloned, specific configuration steps are required:

• Environment Variables:
  • OpenAI API Key: This is obtained from the OpenAI developer portal. Users navigate to "API keys," create a new secret key, name it (e.g., "burner"), and copy the generated key. This key is then pasted into the example.env file (which will be renamed to .env.local).
  • Workflow ID: This is found within the specific OpenAI workflow that needs to be integrated. The workflow must be deployed and have a published version to access the "code" section. The workflow ID is a unique identifier for the workflow's actions.
• Allowed Domains:
  • This is a critical security feature. A valid website link is required to allow OpenAI servers to identify the source of the request.
  • Challenge with Localhost: Localhost URLs cannot be added directly, leading to errors. The tutorial promises a workaround for this.
  • Adding Additional Domains: Once an initial URL is added, the option to add more might disappear. The tutorial shows how to access this setting via the workflow's "Settings" > "Security" section.
  • The purpose of adding domains is to prevent unauthorized use of API keys and workflows.

4. Deployment and Integration

The next phase involves deploying the application and connecting it to the live environment.

• Deployment Platform (Vercel):
  • Vercel is chosen for its speed and ease of deployment, providing a fast and accessible domain link.
  • The process involves setting up the project to deploy to Vercel, which includes creating a connection between the local computer and Vercel, and also to GitHub.
  • This effectively moves the local code to the cloud.
• GitHub Integration:
  • A new GitHub repository is created (e.g., "OpenAI chatkit starter app").
  • The local code is connected to this GitHub repository. This is described as a "fancy way of me essentially saying that this local code found on our computer is going to be now in the cloud."
  • The tutorial emphasizes the importance of understanding GitHub for software development and provides a link to a relevant series.
• Environment Variables in Vercel:
  • After deployment to Vercel, the environment variables (OpenAI API Key and Workflow ID) need to be added in the Vercel project's settings under "Environment Variables."
  • The naming of these variables is crucial and must match exactly how they are referenced in the code (e.g., OPENAI_API_KEY).
  • Security Note: It's strongly advised not to hardcode API keys directly into code files, as this makes them public when deployed. Environment variables provide a secure way to manage these sensitive credentials.
• Redeployment: After updating environment variables, the project needs to be re-deployed on Vercel for the changes to take effect.
• Obtaining the Live Website Link: The deployed application will have a live URL (e.g., openai-chatkit-starter-app-vercel.app). This link is essential for the next step.

5. Finalizing Chatkit Integration

The final steps involve connecting the deployed website back to the OpenAI workflow.

• Adding the Domain to OpenAI:
  • Go back to the OpenAI Agent Builder workflow.
  • Navigate to "Settings" > "Security" > "Add Domain."
  • Paste the live website URL obtained from Vercel.
  • Generate a domain key and copy it.
• Prompting the Workflow:
  • In the Chatkit UI on the live website, a prompt is entered that includes the domain key and the live website link. This signals to the OpenAI workflow that the request is coming from an authorized source.
• Testing the Integration:
  • The tutorial demonstrates the integration by using a previously built YouTube bot workflow.
  • A YouTube link is provided to the bot.
  • The expected output is a custom response from the bot, including a thumbnail, title, and duration of the video, along with specific information extracted from the video (e.g., the "best part").
  • The example successfully shows the bot identifying a specific moment in a video about developing an app on a motorcycle in Bali, including a timestamp.

6. Debugging and Further Resources

• Console Logs: For frontend debugging, users are instructed to right-click, "inspect," and then go to the "console" tab in their browser. This area displays relevant error messages. The tutorial highlights that modern AI can often fix these issues by simply pasting the error message into a chatbot.
• Community and Additional Series:
  • A free community forum is recommended for users who encounter errors or have questions.
  • A series on building a website is suggested for learning about security, UI, and best practices.
  • A software playlist is also recommended for deeper understanding of development concepts.
• Future Content: The creator plans to release more videos on Agent Builder, covering topics like file search, PDF analysis, image analysis, and automations. They are also live-streaming the creation of Minecraft from scratch.

Conclusion

This tutorial provides a comprehensive, step-by-step guide to integrating OpenAI agent workflows into live websites using the Chatkit feature. It breaks down the process into manageable steps, from setting up the development environment and configuring the starter app to deploying the application and finalizing the integration. Key aspects include understanding the role of environment variables, the importance of allowed domains for security, and leveraging platforms like Vercel for deployment. The tutorial emphasizes practical application and provides resources for further learning and troubleshooting.