diff --git a/ai-assistants-samples/.env.example b/ai-assistants-samples/.env.example index 66186f32..732f3c48 100644 --- a/ai-assistants-samples/.env.example +++ b/ai-assistants-samples/.env.example @@ -1,46 +1,35 @@ -# description: SID of your Twilio Account or Subaccount -# format: sid -# link: https://www.twilio.com/console -# required: true -ACCOUNT_SID= - -# description: Auth Token of your Twilio Account or Subaacount -# format: text -# link: https://www.twilio.com/console -# required: true -AUTH_TOKEN= - # description: The ID of your AI Assistant (starts with ai_asst_) # format: text -# required: true +# required: false # configurable: false ASSISTANT_SID= # description: API key for Google Maps service # format: text -# required: true +# required: false # configurable: false GOOGLE_MAPS_API_KEY= # description: API key for OpenAI used in Internet Search tool # format: secret # required: false +# configurable: false OPENAI_API_KEY= # description: API key for Exa used in Internet Search tool # format: text -# required: true +# required: false # configurable: false EXA_API_KEY= # description: Flex Workflow SID used for Flex Handoffs # format: text -# required: true +# required: false # configurable: false FLEX_WORKFLOW_SID= # description: Flex Workspace SID used for Flex Handoffs # format: text -# required: true +# required: false # configurable: false FLEX_WORKSPACE_SID= \ No newline at end of file diff --git a/ai-assistants-samples/assets/index.html b/ai-assistants-samples/assets/index.html index 14f4606f..f8b95b11 100644 --- a/ai-assistants-samples/assets/index.html +++ b/ai-assistants-samples/assets/index.html @@ -1,88 +1,846 @@ + - - - - - Get started with your Twilio Functions! - - - - - - - -
-
- - -
+ + + + + Get started with your Twilio AI Assistants! + + + + + + + + +
+
+ -
-
-

- -
-

Welcome!

-

Your live application with Twilio is ready to use!

-
-

-
-

Get started with your application

-

- Follow these steps to try out your new app: -

-

- This app will return the - TwiML - required to respond "Hello World" to incoming SMS messages. -

-
    -
  1. Text any message to your Twilio phone number
    2. -
  2. You should receive a response saying "Hello World"
    3. -
-
-
- -
-
-

Troubleshooting

-
    -
  • - Check the - - phone number configuration - - and make sure the Twilio phone number you want for your app has a SMS webhook - configured to point at the following URL -
    - - -
    -
    • -
-
-
-
-
- We can't wait to see what you build. -
- + +
+
+
+
+

+ +
+

Welcome!

+

Let's get your AI Assistant connected to the world!

+
+

+
+

Get started with your AI Assistant

+

+ Follow these steps to connect your AI Assistant to new Channels and + Tools: +

+
    +
  1. Bookmark this page so it's easier to come back to it later.
    2. +
  2. + If you don't have an AI Assistant yet, + go into the Twilio Console and create your AI Assistant. +
    3. +
  3. + Configure your AI Assistant + and start debugging using the + Simulator. +
    4. +
  4. + Copy your AI Assistant's ID and paste it into the input below. +
    5. +
  5. + Follow the steps of the individual Tools and channels below. +
    6. +
+
+ + +
+
+
+

Channels

+

+ For a more in-depth guide of connecting AI Assistants to any of + these channels, check out the + Twilio Docs. +

+ +
+ + + + Conversations Icon + + + +

+ Twilio Conversations (Web Chat, iOS, Android, SMS, WhatsApp) +

+ +

+ Twilio Conversations + is the recommended way to connect AI Assistants to most channels. By + onboarding with Twilio Conversations you can connect your AI + Assistant to most Twilio channels, use our + AI Assistants React and JavaScript SDKs, and handoff conversations to + Twilio Flex + and + Twilio Studio. +

+

+ If you are only interested in SMS and WhatsApp without any handoff + capabilities, you can also check out the separate instructions + below. +

+

+ To connect your AI Assistant to Twilio Conversations follow these + steps: +

+
    +
  1. + Onboard with Twilio Conversations by + checking out their documentation. +
    2. +
  2. + Find your + Conversations Service +
    3. +
  3. + Navigate to the "Webhooks" section of your Conversations Service. +
    4. +
  4. Set the "On Message Added" webhook to the URL below.
    5. +
  5. + Create a new Conversation using your preferred channel or use our + React SDK +
    6. +
+ +
+ +
+

+ Check out our documentation for more detailed instructions. +

+
+
+ + + SMS Icon + + +

SMS

+ +

+ If you just want to connect your AI Assistant to a Twilio phone + number, this is the fastest way to get started. +

+
    +
  1. + Get an + SMS-compatible Twilio phone number +
    2. +
  2. + Open up the configuration screen of your phone number or your + Messaging Service + if you are using one. +
    3. +
  3. + Configure the "When a message comes in" webhook to match the URL + below. +
    4. +
  4. Save your configuration
    5. +
  5. + Send a message to your phone number and see if you get a response + from your AI Assistant. +
    6. +
+ +
+ +
+

+ Check out our documentation for more detailed instructions. +

+
+
+ + + + WhatsApp Icon + + + +

WhatsApp

+ +

+ If you just want to connect your AI Assistant to WhatsApp without + any handoff capabilities, this is the fastest way to get started. +

+
    +
  1. + Request to register your WhatsApp phone number +
    2. +
  2. + While you are waiting for your WhatsApp number you can use the + WhatsApp Sandbox. +
    3. +
  3. + Configure your WhatsApp number's "When a message comes in" webhook + to be the URL below. +
    4. +
  4. + Message your WhatsApp number and see if you receive a message back + from your AI Assistant. +
    5. +
+ +
+ +
+

+ Check out our documentation for more detailed instructions. +

+
+
+ + + + Twilio Flex + + + +

Flex Webchat

+ +

+ If you are using the existing Flex Webchat and Studio Flow but want + to have AI Assistants handle your conversation before handing it off + to an agent follow this setup. +

+
    +
  1. + Find your "Chat Flow" + Studio Flow. +
    2. +
  2. Create a new Run Function widget
    3. +
  3. + Select the "ai-assistants-samples" service and pick the + /channels/conversations/flex-webchat Function. +
    4. +
  4. Add the following Function Parameters
    5. +
      +
    • + AssistantId: +
      • +
    • + Data: + {{trigger.conversation | to_json}} +
      • +
    +
  5. + Name your widget with a recognizable name like + "SendtoAIAssistant". +
    6. +
  6. + Connect your "SendtoAIAssistant" widget to the "Incoming + Conversation" trigger. +
    7. +
+ +
+ +
+
+
+ + + Twilio Voice + + +

Voice

+ +

Coming soon...

+
+
+
+

Tools

+
+ + + Twilio Studio + + +

Hand over to Studio

+ +

+ Tool to hand over a conversation that the Assistant is handling to a + Studio flow. While there is an example Description for + the Tool you want to update this to match your handover criteria. +

+

+ This Tool rewires the conversation from your Assistant to Studio but + does not forward the last message to the Studio flow. Instead the + Tool will by default respond with "Conversation handed over" which + might prompt the Assistant to say something like "I handed this + conversation over". If you want to manipulate this message you can + pass a different message into the Tool URL using the + successMessage query parameter. +

+
    +
  1. + Create a + Studio Flow +
    2. +
  2. + Connect your Flow to trigger for "Incoming Conversations" and + deploy your Flow. +
    3. +
  3. Copy your Flow SID starting with FW
    4. +
  4. + Create a new Tool with the following configuration: +
      +
    • Name: Studio Handover
      • +
    • + Description: You MUST use this if a customer + is asking for a refund. +
      • +
    • Input: {}
      • +
    • Method: POST
      • +
    • + URL: + Use the URL below and replace $FLOW_SID with + your Flow SID +
      • +
    +
    5. +
  5. + Send a message to your Assistant that triggers this tool and see + if you get a notification that you got transferred. Afterwards + write another message to trigger the Studio flow. +
    6. +
+ +
+ +
+

+ Check out our documentation for more detailed instructions. +

+
+ + + + Twilio Flex + + + +

Hand over to Flex

+ +

+ Tool for your AI Assistant to hand over a conversation to a human agent. +

+
    +
  1. Make sure you are in a Flex enabled account by visiting Flex in the Console.
    2. +
  2. + Find your Workspace SID and Workflow SID for your handover by visiting TaskRouter and note them down. +
    3. +
  3. + Create a new Tool with the following configuration: +
      +
    • Name: Flex Handover
      • +
    • + Description: You MUST use this if you don't know how to fulfill the request to let another customer service agent handle the conversation. +
      • +
    • Input: {}
      • +
    • Method: POST
      • +
    • + URL: + Use the URL below and replace $FLEX_WORKSPACE_SID and $FLEX_WORKFLOW_SID with + your respective values from Step 2. +
      • +
    +
    4. +
  4. Make sure you have your Channel of choice is appropriately connected to an AI Assistant by following the steps above." --> "Make sure your Channel of choice is appropriately connected to an AI Assistant by following the steps above.
    5. +
  5. + Send a message to your Assistant through one of those channels and ask it to connect you to a customer agent. +
    6. +
  6. Check your Flex UI to see if you got a new task assigned.
    7. +
+ +
+ +
+

+ Check out our documentation for more detailed instructions. +

+
+
+
+ +
+
+

Troubleshooting

+
    +
  • Verify that your channel webhook is configured correctly.
    • +
  • + Check the + Error logs + in the Twilio Console to see if you have any errors. +
    • +
  • + Open the Twilio Functions project by clicking "Edit this + application" above, enable "Live Logs" and retry the scenario + that's failing. +
    • +
+
+
+
+ +