DocumentationAPI Reference

Using AI to summarize conversations in a Support app

GPT-3 is 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's ChatGPT chatbot.

This tutorial shows how you can use the Zendesk 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, see Getting 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 the Create your account page on openai.com. To create an API key, select View API keys in the profile menu, then click Create new secret key.

  • The Zendesk Command Line Interface (ZCLI). To install or upgrade ZCLI, see Installing and updating ZCLI. You also need to authenticate ZCLI with your Zendesk account. See Authentication in the ZCLI documentation.

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

  • Familiarity with the ZAF. Before you start, complete the Zendesk app quick start tutorial.

Creating the app files

First, create basic starter files for an app named Ticket Summarizer.

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: Ticket Summarizer

    ZCLI creates app starter files in the Ticket Summarizer folder.

Adding a secure API key setting

Create a secure setting for the OpenAI API key. The OpenAI API requires this key for authentication.

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

To add the secure setting and label

  1. In the ticket_summarizer folder, open manifest.json in your text editor.

  2. In manifest.json, add the following domainWhitelist and parameters properties.

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

  3. In the ticket_summarizer/translations folder, open en.json.

  4. Replace en.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. Save manifest.json and en.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's assets folder, open iframe.html. Replace the file's contents with the following HTML:

    <!DOCTYPE html><html>  <head>    <meta charset="utf-8" />    <link      rel="stylesheet"      href="https://cdn.jsdelivr.net/combine/npm/@zendeskgarden/[email protected],npm/@zendeskgarden/[email protected]"    />  </head>  <body>    <h2 class="u-semibold u-fs-xl">Conversation summary</h2>    <div class="u-mt" id="container">Loading the ticket summary...</div>    <script src="https://static.zdassets.com/zendesk_app_framework_sdk/2.0/zaf_sdk.min.js"></script>    <script type="text/javascript" src="main.js"></script>  </body></html>

  2. In the assets folder, create a main.js file. Paste the following code into the file:

    const client = ZAFClient.init();
async function updateSummary() {  const convo = await getTicketConvo();  const prompt = await getPrompt(convo);  const summary = await getSummary(prompt);  const container = document.getElementById("container");
  container.innerText = summary;}
async function getTicketConvo() {  const ticketConvo = await client.get("ticket.conversation");  return JSON.stringify(ticketConvo["ticket.conversation"]);}
async function getPrompt(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}`;}
async function getSummary(prompt) {  const options = {    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,  };  const response = await client.request(options);
  return response.choices[0].message.content.trim();}
client.on("app.registered", () => {  client.invoke("resize", { width: "100%", height: "400px" });  updateSummary();});
client.on("ticket.conversation.changed", () => {  updateSummary();});

    Upon loading, the app uses the ZAF client.get() method to retrieve the open ticket's conversation. It then uses the client.request() method to send a text prompt to OpenAI's Create completion endpoint. 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. Save iframe.html and main.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 the ticket_summarizer folder, run:

    zcli apps:create

  2. When prompted, enter your OpenAI API key as the setting.openAiApiToken value and press Enter.

  3. In Admin Center, click the Apps and integrations icon () in the sidebar. Then select Apps > Zendesk Support apps.

    The app appears in the list of installed and enabled apps on the My Apps page.

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 the Apps icon.

    After a moment, a summary of the ticket's conversation appears in the Ticket Summarizer app.

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 client.get() and client.request() calls

  • Add a cache to reduce calls to the OpenAI API

  • Update the getPrompt() function to experiment with different text prompts