aws-samples / aws-lex-web-ui

Sample Amazon Lex chat bot web interface
Other
746 stars 472 forks source link

How to setup minimum working example? #719

Closed jenia closed 3 months ago

jenia commented 3 months ago

Hello.

I'm running the chatbot UI component in an HTML page by following the readme in src/README.md:

npm start

But I get the message in the web console:

1 validation error detected: Value 'ca-central-1_someID' at 'identityPoolId' failed to satisfy constraint: Member must satisfy regular expression pattern: [\w-]+:[0-9a-f-]+

Before hand I successfully created the Cognito identity pool using the Cloudformation template and copied User pool ID from AWS Cognito interface but I still receive the error above.

And here is my lex-web-ui-loader-config.json config:

  "connect": {
    "contactFlowId": "",
    "instanceId": "",
    "apiGatewayEndpoint": "",
    "promptForNameMessage": "",
    "waitingForAgentMessage": "",
    "waitingForAgentMessageIntervalSeconds": "",
    "agentJoinedMessage": "",
    "agentLeftMessage": "",
    "chatEndedMessage": "",
    "attachChatTranscript": "",
    "transcriptMessageDelayInMsec": ""
  },
  "cognito": {
    "poolId": "ca-central-1_someID",
    "aws_cognito_region": "ca-central-1",
    "region": "ca-central-1"
  },
  "ui": {
    "enableLogin": true
  }

My questions are as follows:

  1. Where do I get the Cognito pool id from? I copied the value directly from the field User pool ID in AWS Cognito interface.
  2. What about the rest of the fields in connect object above? Do I need to create an API gateway for this minimal example? Or the provided sample web app can call Lex without an API Gateway but simply call it directly? I looks to me that the provided API Gateway cloudformation script is designed with the idea that you'll be hosting this code on an S3 bucket rather than running a simple example locally. I prefer to only run a simple example locally rather than hosting an entire website on S3 for now.
atjohns commented 3 months ago

The easiest thing to do, if you have deployed it via CloudFormation, is hit your deployed web app and check the network traffic. It will have a lex-web-ui-loader-config.json file and you can just copy the contents and paste it into your local config file for development.

To answer your questions directly

  1. The pool ID should be an output you can pull from the template, but it should look something like : (for example us-east-1:xxxxxx-xxxx-xxxx-xxxxxxxxxxx)
  2. That object is only for doing Live chat with Amazon Connect, you can leave it blank for normal development
jenia commented 3 months ago

thank you kindly!

jenia commented 3 months ago

thank you!