Skip to main content

Fintech Support Application Powered by OpenAI

In this tutorial, we will guide you on how to create a Fintech Support Application that integrates with the Zendesk API and is powered by OpenAI's generative AI capabilities. Support agents can use the application to generate summaries and responses for customer queries quickly and accurately, utilizing OpenAI's natural language processing capabilities. By the end of this tutorial, you'll have a working Fintech support application powered by AI that can help your team reduce support time and provide exceptional support to your customers. Let's get started!

info

While this tutorial focuses on OpenAI's ChatGPT API, it can be adapted to work with other prompt-based AI models as well.

Superblocks features that are used in this tutorial:

A preview of the final application you are going to build following this tutorial.

Create a new Superblocks Application​

Click on Create New from the Superblocks homepage to create a new Superblocks Application and name it Fintech Support Application Powered by OpenAI:

Open the Superblocks homepage and create a new Application.

Build the basic UI​

Open the Components Panel from the left-hand-side sidebar and drag-and-drop the following components to the canvas to build the UI of your Application:

  1. Add a Text component, change the Text to Fintech Support Application Powered by OpenAI ⚡️, and the Text Size to Heading 1
  2. Add an Input component, change the Input Label to Zendesk Ticket ID and resize it accordingly
  3. Add two Container components and set the Background Color to #507ba0
  4. Add a Text component, change the Text to Zendesk Ticket and place it in the Container on the left
  5. Add a Text component, change the Text to ⚡️ AI Assistant and place it in the Container on the right
  6. Add two Chat components and place them side-by-side below the blue containers
  7. Add a Container component and set the Background Color to #f5f5f5
  8. Add a Button component, set the label to ⚡️ Copy AI Response, and set the Background Color to #f5f5f5
The user has built the basic UI of the Application by dragging and dropping components on the Canvas.

Build the Zendesk Ticket Chat​

  1. To display the message history from the Zendesk ticket, you'll use the Chat component located on the left side. To connect your Zendesk account to Superblocks, simply set up a new integration by following the instructions outlined in the Zendesk page, as well as the Security and Authentication page in the Zendesk documentation.
info

When using basic authentication with an API token to connect to Zendesk, it's important to remember to append "/token" to the end of your username: admin@email.com/token

  1. Next, click on Add Backend API from the top left of the API panel and select Zendesk from the list of available integrations. Rename the backend API to zendesk_getComments and set the Method to GET.

To work with a specific Zendesk ticket, your users can pass its ticket ID to the Input component. Reference this ticket ID in the API execution by setting the URL path to tickets/{{Input1.value}}/comments using bindings:

A backend API that allows the users to load the comments from a Zendesk ticket.
  1. When making a request to the Zendesk API, the response will typically include a lot of information. However, to ensure that only the relevant information is displayed in the Chat component, you can use JavaScript to filter and format the data accordingly. Add a JavaScript step to the zendesk_getComments API and copy-and-paste the following code into the editor:
const chatMessages = Step1.output.comments.map(comment => {
  
  const name = comment.via.channel === "web" ? "Support Agent" : "Customer";
  
  return {
    "name": name,
    "content": comment.body,
    "timestamp": comment.created_at
  }
}); 

return chatMessages;
A JavaScript step is used to transform the output from the Zendesk API before it is sent to the frontend.
  1. Click on the Chat component on the left to open its Properties Panel and set Message History Data to {{zendesk_getComments.response}}:
Setting the Message History Data in the properties panel of a Chat component to load the Zendesk comments.
  1. To store the ticket ID for further API usage, we use a frontend variable. To do this, open the State Panel, click on Add to add a new Temporary Frontend Variable and rename it to ticket:
A Temporary Frontend Variable used to store the ticket information returned from Zendesk.
  1. Next, make the application respond to user input. Click on the Input component to open its Properties Panel, and then add the first action type to the onSubmit event handler. The action type stores the Zendesk ticket id submitted by the user in the temporary frontend variable:
The onSubmit event handler of the input component is used to set the value of the frontend variable.
  1. Add a second action type that is a Run API type to the same event handler and make it run the zendesk_getComments backend API:
A second Action Type triggered by the same event handler is used to run the Zendesk API when the user submits the input.

Enter a Zendesk ticket ID (e.g. 24) into the input component and observe the message history appear in the frontend chat component. Well done!

The comments from the Zendesk ticket are successfully loaded into a Superblocks frontend Chat component.

Build the AI Assistant​

Now that you've successfully implemented the ability to load Zendesk ticket message histories into Superblocks, our next goal is to create an AI assistant. To be able to quickly and efficiently respond to your customers' messages, you can use the generative AI from OpenAI.

  1. Follow the steps outlined in the OpenAI Integrations page to set up the Integration.

  2. Create an additional frontend variable to store the prompt that you pass to the OpenAI model via the Chat component. Open the State Panel, click on Add, select Temporary Frontend Variable and rename the variable to prompt:

A frontend variable is used to store the prompt that is used to interact with the OpenAI API.

Click on the the new prompt variable to set the Default Value in the properties panel on the right side of the screen. Set it to:

"Please summarize the users Zendesk ticket and draft a response to the customer. Write Summary and Response in bold text by wrapping them in <b></b>."
  1. Click on Add Backend API and select your OpenAI Integration from the list of available Integrations:
  • Rename the API to openai_chat
  • Set the Action to Generate ChatGPT Response
  • Set the Prompt to {{prompt.value}}
  • Set the Message History to {{Chat2.messageHistory}}
  • Open the Advanced Tuning Parameters dropdown and set Max Tokens to 1000
  • Set the System Instruction to:
Be aware of this Zendesk ticket and respond accordingly: {{Chat2.messageHistory}}. Also know the that the customer has $40M total with $10M in Checking and $30M in Savings. Format your response nicely and use bullet points when necessary.
Add a backend API that has an OpenAI step and that references the frontend variable in the prompt input field.
  1. Click on the Chat component on the right and set Message History Data to {{openai_chat.response.messageHistory}}
The Message History Data value of the frontend Chat component is set to the chat history of the OpenAI API.
  1. Finally, click on the Input component and add a third Action to the onSubmit event handler. This time it should run the openai_chat backend API:
A third action is added to the onSubmit event handler that runs the OpenAI backend API on user submit.

Now, enter a Zendesk ticket ID (e.g. 24) into the input component. Then, sit back and watch as the message history is once again displayed in the first chat component. And this time, in the second chat component, you'll see not only the AI-generated summary, but also the generated response! Good Job!

Once the user adds a Zendesk ticket ID to the input and hits submit, AI-generated summary and response are displayed in a Chat component.
info

Note that OpenAI needs processing time for generating responses, particularly for complex tasks or large data sets, which may result in a brief delay before receiving a response.

Bonus - Chat with your AI Assistant!​

  1. Set the Chat component's onMessageSend event handler to a Run JS action type that updates the prompt variable we created earlier via prompt.set(Chat2.userMessageText);:
The onMessageSend event handler of the Chat Component is used to set the prompt frontend variable.
  1. Add a second action to the same event handler that runs the openai_chat API when a user submits a message:
A second action is added to the onMessageSend event handler that runs the OpenAI chat API.

Now, try typing Make the response shorter into the Chat component and hit enter. Watch your new AI Assistant shorten the generated response for you 🙌

The user can now send messages to AI using the Chat Component to shorten the generated response.

Submit the generated response to Zendesk​

First, add an onClick event handler to the ⚡️ Copy AI Response button that allows the support operator to copy the response generated by the AI Assistant to the clipboard:

Add a Run JS action type to the onClick event handler to allow the users to copy the generated response to clipboard.

Now we add a third backend API that takes a chat message and updates the Zendesk ticket with it, providing an answer to the customer:

  1. Click on Add Backend API and select Zendesk from the list of available integrations
  2. Rename the API to zendesk_sendComments
  3. Set the Method to PUT
  4. Set the Url Path to tickets/{{ticket.value}}
  5. Set the JSON Body to:
{
  "ticket": {
    "comment": {
      "body": "{{Chat1.userMessageText}}",
      "public": true
    },
    "status": "solved"
  }
}
Use the Zendesk REST integration in an API step to update the ticket with the AI-generated response.
  1. Open the API's Response Block by clicking on the Response button below the Zendesk API step and set the onSuccess event handler to a Run API action type that runs the zendesk_getComments API we created earlier:
An onSuccess event handler is used to reload the Zendesk messages displayed in the Chat component.
  1. Click on the Chat component on the left to open the Properties Panel and set the onMessageSend event handler to a Run API action type that calls the zendesk_sendComment API:
The onMessageSend event handler of the Chat component is used to run the backend API that updates the Zendesk ticket.

Finally, click on the ⚡️ Copy AI Response Button, paste the response to the Zendesk Chat and hit enter. Your AI generated response is successfully submitted to Zendesk!

See the updated ticket in Superblocks:

The AI-generated response is displayed in the Chat Component after the user has pasted and submitted it.

Find the same response when you log in to your Zendesk account:

The Zendesk ticket has successfully been updated using the response generated by an AI in Superblocks.