Stay organized with collectionsSave and categorize content based on your preferences.
The frontend portion of the Twilio integration consists of two components: Twilio functions and plugins. Functions host the HTML document and API methods needed to use Agent Assist and replace the need for hosting elsewhere. A Twilio plugin is a way to present the Agent Assist interface to the agent desktop.
Twilio functions
The Twilio functions are serverless API endpoints that can perform work hosted by Twilio. They provide user verification, chat service tokens, and the Agent Assist interface.
Twilio Flex plugin
Use the Flex plugin to customize user experiences and behaviors for the Flex agents and supervisors. You present the Agent Assist console to the agent within the Flex application.
Environment variables
Create a file named.envin theagent-assist-functionsdirectory or
Create a file named.env.devin theagent-assist-pluginsdirectory.
Set the following environment variables for the plugin to function after deployment:
This is a comma-separated list of Agent Assist suggestion features to render, such as: `SMART_REPLY`, `CONVERSATION_SUMMARIZATION`
TWILIO_FUNCTIONS_URL
This is the Cloud Run URL for the backend application after you deploy the functions. Select theTwilio Agent Assist Functionsoption. Then, you should see a URL resembling twilio-agent-assist-functions-####-dev.twil.io.
TWILIO_DEBUG
Show logs in the console: True, false, or left undefined.
For more information regarding environment variable setup, refer to the relevant Twilio documentation.
Deployment
Use the following script to deploy the solution to your Twilio instance:
npm run deploy:functions #Deploys just the functions to the Twilio instance.
npm run deploy:plugin #Deploys just the plugin to the Twilio instance, run command produced in the output to activate.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Hard to understand","hardToUnderstand","thumb-down"],["Incorrect information or sample code","incorrectInformationOrSampleCode","thumb-down"],["Missing the information/samples I need","missingTheInformationSamplesINeed","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-09-04 UTC."],[[["\u003cp\u003eThe frontend of the Twilio integration uses Twilio functions to host HTML and API methods, eliminating the need for external hosting.\u003c/p\u003e\n"],["\u003cp\u003eA Twilio Flex plugin is employed to display the Agent Assist interface within the agent's desktop environment for a customized user experience.\u003c/p\u003e\n"],["\u003cp\u003eEnvironment variables, such as \u003ccode\u003eTWILIO_ACCOUNT_SID\u003c/code\u003e, \u003ccode\u003eACCOUNT_SID\u003c/code\u003e, and \u003ccode\u003eAUTH_TOKEN\u003c/code\u003e, must be set in \u003ccode\u003e.env\u003c/code\u003e or \u003ccode\u003e.env.dev\u003c/code\u003e files to enable plugin functionality after deployment.\u003c/p\u003e\n"],["\u003cp\u003eDeployment involves using \u003ccode\u003enpm\u003c/code\u003e scripts: \u003ccode\u003enpm run deploy:functions\u003c/code\u003e for deploying functions and \u003ccode\u003enpm run deploy:plugin\u003c/code\u003e for deploying the plugin.\u003c/p\u003e\n"]]],[],null,["# Deploy Twilio Flex\n\nThe frontend portion of the Twilio integration consists of two components: Twilio functions and plugins. Functions host the HTML document and API methods needed to use Agent Assist and replace the need for hosting elsewhere. A Twilio plugin is a way to present the Agent Assist interface to the agent desktop.\n\nTwilio functions\n----------------\n\nThe Twilio functions are serverless API endpoints that can perform work hosted by Twilio. They provide user verification, chat service tokens, and the Agent Assist interface.\n\nTwilio Flex plugin\n------------------\n\nUse the Flex plugin to customize user experiences and behaviors for the Flex agents and supervisors. You present the Agent Assist console to the agent within the Flex application.\n\nEnvironment variables\n---------------------\n\n1. Create a file named `.env` in the `agent-assist-functions` directory or\n2. Create a file named `.env.dev` in the `agent-assist-plugins` directory.\n3. Set the following environment variables for the plugin to function after deployment:\n\nFor more information regarding environment variable setup, refer to the relevant Twilio documentation.\n\nDeployment\n----------\n\nUse the following script to deploy the solution to your Twilio instance: \n\n```\nnpm run deploy:functions #Deploys just the functions to the Twilio instance.\nnpm run deploy:plugin #Deploys just the plugin to the Twilio instance, run command produced in the output to activate.\n```"]]
