Using AI to summarize conversations in a Support app

GPT-3is an AI language processing model created by OpenAI. The model can generate human-like responses to text prompts. For example, you can use GPT-3 to answer questions, complete texts, or summarize conversations. GPT-3 powers OpenAI'sChatGPTchatbot.

This tutorial shows how you can use theZendesk Apps framework (ZAF)to extend Zendesk using external AI systems. In the tutorial, you'll create a client-side Zendesk app that uses ChatGPT to summarize Support ticket conversations. The app uses the OpenAI API to interact with ChatGPT and give it text prompts. Agents can access the app while viewing a ticket in the Agent Workspace.

Disclaimer:Zendesk provides this article for instructional purposes only. Zendesk doesn't provide support for the app or example code in this tutorial. Zendesk doesn't support third-party technologies, such as GPT-3, ChatGPT, or the OpenAI API.

What you'll need

To complete this tutorial, you'll need the following:

• A Zendesk account with the Zendesk Suite Growth plan or above, or the Support Professional plan or above. To get a free account for testing, seeGetting a trial or sponsored account for development.

• An OpenAI API key. OpenAI offers free API credits you can use for testing.

  To sign up for an OpenAI account, see theCreate your account pageon openai.com. To create an API key, selectView API keysin the profile menu, then clickCreate new secret key.

• The Zendesk Command Line Interface (ZCLI). To install or upgrade ZCLI, seeInstalling and updating ZCLI. You also need to authenticate ZCLI with your Zendesk account. SeeAuthenticationin the ZCLI documentation.

  ZCLI replaces the Zendesk Apps Tools (ZAT), which are in maintenance mode. To use ZAT instead, seeInstalling and using ZAT.

• Familiarity with theZAF. Before you start, complete theZendesk app quick starttutorial.

Creating the app files

First, create basic starter files for an app named票史书.

To create basic app starter files

1. In your terminal, navigate to the folder where you want to store the app. Example:

                  
   
                   
   cd projects
                  

2. In the folder, run:

                  
   
                   
   zcli apps:new
                  

3. At the prompts, enter the following values:

   • Directory name:ticket_summarizer
   • Author's name: Your name
   • Author's email: Your email address
   • Author's website: Leave blank and press Enter.
   • App name:票史书

   ZCLI creates app starter files in the票史书folder.

Adding a secure API key setting

Create asecure settingfor the OpenAI API key. The OpenAI API requires this key for authentication.

Then add a related label for the setting to the project'sen.jsontranslation file. The label's text appears on the app's settings page.

To add the secure setting and label

1. In theticket_summarizerfolder, openmanifest.jsonin your text editor.

2. Inmanifest.json, add the followingdomainWhitelistandparametersproperties.

                  
   
                   
   {..."version":"1.0.0","frameworkVersion":"2.0","domainWhitelist":["api.openai.com"],"parameters":[{"name":"openAiApiToken","type":"text","secure":true}]}
                  

3. In theticket_summarizer/translationsfolder, openen.json.

4. 再保险placeen.json's contents with the following JSON:

                  
   
                   
   {"app":{"name":"Ticket Summarizer","short_description":"Use OpenAI's ChatGPT to summarize Support tickets.","long_description":"Use OpenAI's ChatGPT to summarize Support tickets.","installation_instructions":"Add your OpenAI API key and click install.","parameters":{"openAiApiToken":{"label":"OpenAI API key"}}}}
                  

5. Savemanifest.jsonanden.json.

Sending requests to the OpenAI API

Update your app to send a text prompt to the OpenAI API. The prompt should contain the ticket's conversation.

To update the app

1. In the app'sassetsfolder, openiframe.html. Replace the file's contents with the following HTML:

                  
   
                   
   DOCTYPEhtml><html><head><metacharset="utf-8"/><linkrel="stylesheet"href="https://cdn.jsdelivr.net/combine/npm/@zendeskgarden/[email protected],npm/@zendeskgarden/[email protected]"/>head><body><h2类="u-semibold u-fs-xl">Conversation summaryh2><div类="u-mt"id="container">Loading the ticket summary...div><scriptsrc="https://static.zdassets.com/zendesk_app_framework_sdk/2.0/zaf_sdk.min.js">script><scripttype="text/javascript"src="main.js">script>body>html>
                  

2. In theassetsfolder, create amain.jsfile. Paste the following code into the file:

                  
   
                   
   const客户端=ZAFClient.init();asyncfunctionupdateSummary(){constconvo=awaitgetTicketConvo();constprompt=awaitgetPrompt(convo);const总结=awaitgetSummary(prompt);constcontainer=document.getElementById("container");container.innerText=总结;}asyncfunctiongetTicketConvo(){constticketConvo=await客户端.get(“ticket.conversation”);returnJSON.stringify(ticketConvo[“ticket.conversation”]);}asyncfunctiongetPrompt(convo){return`Summarize the following customer service interaction.Detect the customer's sentiment and extract any key dates,places, or products in the following format.Summary:Customer sentiment:Key Information:${convo}`;}asyncfunctiongetSummary(prompt){constoptions={url:"https://api.openai.com/v1/chat/completions",type:"POST",contentType:"application/json",headers:{Authorization:"Bearer {{setting.openAiApiToken}}",},data:JSON.stringify({model:"gpt-3.5-turbo",messages:[{role:"user",content:prompt}],}),secure:true,};constresponse=await客户端.request(options);returnresponse.choices[0].message.content.trim();}客户端.on("app.registered",()=>{客户端.invoke("resize",{width:"100%",height:“400 px”});updateSummary();});客户端.on("ticket.conversation.changed",()=>{updateSummary();});
                  

   Upon loading, the app uses the ZAF客户端.get()method to retrieve the open ticket's conversation. It then uses the客户端.request()method to send a text prompt to OpenAI'sCreate completionendpoint. The prompt contains the conversation and a requested response format.

   The endpoint returns a summary of the conversation using the requested format. The app displays this summary.

   The app fetches a new summary whenever the ticket's conversation changes.

3. Saveiframe.htmlandmain.js.

Installing the app

ZCLI provides a local web server for app testing. However, the ZCLI server doesn't support secure settings. As a workaround, use ZCLI to package and install the app in a test account instead.

To install the app

1. In theticket_summarizerfolder, run:

                  
   
                   
   zcli apps:create
                  

2. When prompted, enter your OpenAI API key as thesetting.openAiApiTokenvalue and press Enter.

3. InAdmin Center, click theApps and integrationsicon () in the sidebar. Then selectApps>Zendesk Support apps.

   The app appears in the list of installed and enabled apps on theMy Appspage.

   

Testing the app

To test the app, open a Support ticket in the Agent Workspace.

To test the app

1. Go to the Agent Workspace in Zendesk Support. From the workspace, open a new or existing ticket. If possible, select a long or complex ticket.

2. Click theAppsicon.

   

   After a moment, a summary of the ticket's conversation appears in the票史书应用程序。

   

Congratulations! You've created a Zendesk app that summarizes Support ticket conversations using ChatGPT. As a next step, you can get your app ready for production. Consider tackling the following tasks:

• Add error handling for the app's客户端.get()and客户端.request()calls

• Add a cache to reduce calls to the OpenAI API

• Update thegetPrompt()function to experiment with different text prompts