DEV Community

Cover image for I Built Customer Support Agent using OpenAI ChatKit!
Composio profile image Developer Harsh
Developer Harsh for Composio

Posted on • Originally published at composio.dev

I Built Customer Support Agent using OpenAI ChatKit!

#ai #openai #productivity #buildinpublic

Intro

In the last blog, we learnt how to create a YouTube Support agent with OpenAI Agent Builder and used it.

However, the workflows / product changes vastly when met with production. Multiple factors like speed, efficiency, scalability, performance, quality, observability and many more needs to be taken care.

Luckily for us, OpenAI have got us covered with their newly released Chat-Kit support, that offers one click deployment support onto any website / webpage / product.

So, this blog explores how to leverage OpenAI Agent Builder, Chat-Kit and Rube to create a customer support agent, deploy it to production and embed it for general usage.

Let’s get started!

Note: You can follow the same process for YouTube Agent also, but to keep things fresh, we will build a customer support agent!

TL; DR

  • Built a customer support agent using OpenAI Agent Builder, ChatKit, and Rube MCP.
  • Used a multi agent workflow to classify user queries into support, sales, or general categories. All with guardrails and conditioning logic.
  • Assigned each intent to a specialized agent that handles tasks automatically.
  • Published the workflow and connected it to OpenAI ChatKit’s app for quick deployment to production
  • This blog gives a ready-to-use AI support system business / developers can embed on any website in minutes.

Workflow Explanation

Before diving into builder, it's good to have a mental model first. So here is the flow we will follow:

  • User asks the query.
  • Guardrails process the query and find harmful elements.
    • If nothing found (no) → passed to Intent Classifier Agent
    • If yes, → process ends,
  • Intent classifier processes the query and detects the query intent into:
    • Customer Support: Queries related to product usage, documentation, API’s integrations, etc
    • New-Lead: Queries related to business inquires, partnership or adoption
    • General: For general queries unrelated to product.
  • The intent then passed to a decision block, that routes to respective agent with different functionality:
    • Customer Support Agent - Takes in the query, searches the vector store, independently perform web research, mergers the search result, if nothing found ask user to contact support at specified email.
    • Sales Agent -Takes in the query, systematically ask for detail, append it to the predefined spreadsheet using Rube MCP, thanks the user
    • General Agent - Hates seeing unrelated queries, tell users can't be addressed, and ends.

A sample workflow diagram to help understand the flow better:

image.png

With the mental model ready, time to dive into the OpenAI agent builder and build the flow!

Build Workflow

Note: This section will be a brief one, as the blog focuses ChatKit, but for detailed explanation of each node and workings, feel free to check out the OpenAI Agent Builder blog!

To get started, head to OpenAI Agent Builder, login and create a new workflow. For simplicity, I am going to just point out how to connect and get this up and running:

  1. Start Node: Sets the entry point, keep as it is
  2. Guardrail Node: Enable Moderation (⚙️ → all), Jailbreak (default),
    1. fail path: end node
    2. pass path: intent detector (Agent Node)
  3. Agent Node: Intent detector, add intent detection prompt, Set output format response schema with property:
    1. Name: intent
    2. Type: ENUM
    3. Description: can leave blank
    4. Value: customer-support, new-lead, general
  4. If Else Node: Set it using CEL as:
    1. if: input.output_parsed.intent == "customer-support" → for Customer Support Agent
    2. elif: input.output_parsed.intent == "new-lead", → for Sales Lead Agent
    3. else: no checks here → for General Agent
  5. Agent Node 1: Customer Support, add customer support prompt, enable chat history, select reasoning effort to high / medium & set following tools:
    1. Vector Store: Click the ➕ → File Search, upload all the necessary files, → Attach. For reference, I am using composio’s llm.txt
    2. MCP: Click + again, select MCP → + Server and fill in the following details:
      1. URL, https://rube.app/mcp
      2. Name: put rube_mcp
      3. Authentication: API Key → Get it from:
        • Going to the Rube app,
        • Selecting Install Rube
        • Navigating to Agent Builder
        • Generate Token
        • & Copy and Paste
        • Then go to Rube → Marketplace → Connect Google Sheet (oAuth) and Exa (API Token for Exa). Refer to Rube Blog (Section: Authenticating Apps in Rube) for reference.
      4. Save

  6. Agent Node 2: Sales Lead, add sales lead prompt, enable chat history, select reasoning effort to medium set and add Rube MCP, follow above to set it up. Use Auth Token from Chat Support Rube integration.

  7. Agent Node 3: General, add general prompt. No tools needed.

And we are done; here is how it all looks combined!

Rube MCP

Now let’s first test it in browser, to find flaws before hitting production. Hit preview and in chat pass different prompts to test. Here is a sample demo at work:

Amazing, this works great. All query intent shows correctly, passed to right agent and each agent reasons and process it according to logic.

With all things working as expected. Time to hit production!

Connect Workflow with OpenAI ChatKit

First of all, hit Publish to make workflow live. Then head to Code and copy the “workflow-id” and save it somewhere.

Now, head to the ChatKit’s Starter Template and clone the repo by pasting in terminal:

git clone https://github.com/openai/openai-chatkit-starter-app
Enter fullscreen mode Exit fullscreen mode

now navigate to the downloaded folder:

cd openai-chatkit-starter-app
Enter fullscreen mode Exit fullscreen mode

We will use this app for this demo, but you are free to create your own. However, in that case make sure to add <openai-chatkit> web component and session endpoints(refer app/api/create-session/route.ts) . For this one, it comes preconfigured!

Anyways, replace the env.local with .env and add the following env variables:

OPENAI_API_KEY=openai-api-key
NEXT_PUBLIC_CHATKIT_WORKFLOW_ID=workflow-id-here
Enter fullscreen mode Exit fullscreen mode

You can get your OpenAI API key from the OpenAI API Keys page.

Next head to the terminal and run:

npm install
npm run dev
Enter fullscreen mode Exit fullscreen mode

Once done, head to the URL given in the terminal output and test the workflow. Here is a sample demo at work:

Amazing this works as expected. But if you are not satisfied with your frontend / backend, you are free to modify following files based on needs:

  • App.tsx - to modify main layout and theme wrapper
  • layout.tsx - to customize document structure and global layout
  • globals.css - to add or modify global CSS styles
  • ChatKitPanel.tsx - to customize / modify the chat interface appearance, update the event handlers and integrate product analytics or storage.
  • ErrorOverlay.tsx - to change how errors are displayed
  • useColorScheme.ts - Modify theme and color scheme logic
  • tailwind.config.ts - to Customize Tailwind theme colors and design tokens

Also, for functionality modify:

  • lib/config.ts - to adjust starter prompts, greeting text, placeholder text and chatkit theme. Yes, you can create your custom theme and component as well!
  • component.tsx - to

Once happy, run
Once happy, run

npm run build
Enter fullscreen mode Exit fullscreen mode

& use the generated build folder to deploy as any live site.

In case you are facing any domain issue, make sure to put website URL in allow list of ChatKit.

image.png

With this we are done building.

With this we are done building.

You can find entire code base at the github repo.

Final Thoughts

In this article, we changed agentic workflow in OpenAI agent builder, into production ready app with a simple Next.js UI using OpenAI Chatkit.

With Agent Builder and OpenAI Chakit, transforming an idea into a working product is now effortless - even for non-coders.

The key takeaway is understanding how to break down the process into Agents, Tools, and MCP, and knowing where your own responsibilities lie.

Agent Builder is still in beta, with new updates every week. Building and integrating agents has never been easier or more essential.

So, head to agent builder & start building your own agents or if already done, customize using open ai chatkit today.

FAQ’s

Can I use this setup for other use cases besides customer support?

Yes. The same workflow can be adapted for sales, onboarding, internal documentation, or even YouTube support (as shown in the previous post). You need to adjust the agent prompts and logic.

Do I need coding skills to deploy this with ChatKit?

Not really. The ChatKit starter app uses simple environment variables and basic setup commands. If you can follow a README and copy a few keys, you’re good.

How do I connect my data or knowledge base to the agent?

Upload documents directly into the Agent Builder’s vector store or connect external tools like Google Sheets or Exa via Rube MCP. This lets your agent answer context-specific questions.

Is this solution scalable for production use?

Yes. ChatKit is designed for real-time, production-level deployment with built-in support for performance, observability, and customisation. You can embed it on any site and scale as your traffic grows.

Top comments (2)

Collapse
 
roshan_sharma_7deae5e0742 profile image
roshan sharma •

Nice work! Building a customer support agent with ChatKit is no small feat. That’s some solid integration and problem-solving right there. You basically automated one of the toughest parts of customer ops, respect for pulling that off.

Collapse
 
androaddict profile image
androaddict •

can we do that in locally ? bcz there are security constrains