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!

tip

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:

• OpenAI Integration
• REST API Integration
• Chat Component

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:

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

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

2. 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:

   

3. 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;
   

4. Click on the Chat component on the left to open its Properties Panel and set Message History Data to {{zendesk_getComments.response}}:

   

5. To store the ticket ID for further API usage, we use a state variable. To do this, open the State Panel, click on Add to add a new Temporary State Variable and rename it to ticket:

   

6. 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 state variable:

   

7. 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:

   

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!

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 state 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 State Variable and rename the variable to prompt:

   

   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>."

3. 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.
  

1. Click on the Chat component on the right and set Message History Data to {{openai_chat.response.messageHistory}}

   

2. 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:

   

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!

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);:

   

2. Add a second action to the same event handler that runs the openai_chat API when a user submits a message:

   

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 🙌

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:

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"
     }
   }
   

6. 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:

   

7. 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:

   

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:

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