Skip to main content
This guide covers integrating Agent AI (Chat channel) with Amazon Connect using a Custom Contact Control Panel (CCP). The custom CCP acts as a unified container that hosts both Amazon Connect’s native CCP and the Agent AI Chat widget, allowing agents to manage customer interactions while receiving AI-driven assistance in real time.

​
Prerequisites

​
Components Required

The integration requires the following components:
  • Amazon Connect
  • Custom Contact Control Panel (CCP)
  • Agent AI Platform
Lambda, Kinesis, and streaming services aren’t required for chat-only integrations.

​
Set up an Amazon Connect Instance

  1. Sign in to your Amazon Connect instance.
  2. Go to Amazon Connect > Instances.
  3. Click Add an instance to create a new Amazon Connect instance. add-an-instance
  4. Select an option in the Identity management section, and enter the Amazon Connect instance name in the Access URL field. identity-management-access-url
  5. This step creates an Amazon Connect host URL: https://<instance-name>.my.connect.aws.
  6. Click Next.
  7. Select Specify an administrator, and enter the admin details in the following fields:
    • First name: First name of the administrator.
    • Last name: Last name of the administrator.
    • Username: Username for the administrator to sign in.
    • Password: Password for the administrator to sign in.
    • Password (verify): Re-enter the password. add-administrator
  8. Click Next.
  9. Select option(s) in the Telephony Options section. telephony-options
  10. Click Next.
  11. Select an option on the Data storage page. data-storage
  12. Click Next.
  13. Review and click Edit to change your input. review-and-create
  14. Click Create.

​
Sign in as an Administrator

The new instance you created is listed in Amazon Connect. new-instance
  1. Click the instance alias.
  2. Add allowed origins by clicking Approved origins, as shown in the following screenshot: approved-origins
  3. Go to the Overview option of the current instance, and click the URL. A new web page opens in a different tab: amazon-connect-signin-page
  4. Sign in with the Administrator credentials you created during instance setup. These credentials give you admin access to the contact center, allowing you to modify flows and groups as needed.

​
Run the Code Base

  1. Get the code base from this URL.
  2. Change the backend URL in config.js under the scripts/config folder. This backend URL provides the bot details and Agent AI iframe token.
  3. Change the ccpUrl in initCCP.js. The ccpUrl format is: https://[amazon-connect-instance].my.connect.aws/connect/ccp-v2
  4. Run a lightweight server to access this as a web page. Example: python -m http.server [port-number]
  5. After entering the local host URL, you see the following screen: welcome-page
  6. When you initiate a chat, you see the following screen (Agent AI on the right): agentai-rendering

​
Chat Widget in Amazon Connect

  1. Sign in to the Amazon Connect instance.
  2. Go to Channels > Communication widget. The default widget is available here. Create a new widget by clicking Add widget. default-and-add-widgets
  3. Click the required widget. The JavaScript sample code to run the widget on your local device is shown here. Copy the code. javascript
  4. Paste the code into any HTML file, and run a sample application server. python -m http.server [port-number]
  5. You see the following screen for the chat widget: chat-widget
    • The following screenshot shows Amazon Connect integrated with Agent AI: amazon-connect-with-agentai-chat
    • Click here for a demo video.