Explanation Of Video - Connecting ChatGPT to an Alexa Skill

Internal Links:
- Create Skill Button | Build Tab | Code Tab | Test Tab | Reserve
- Internal Link | Internal Link | Internal Link | Internal Link | Reserve
External Links:
- Learning ChatGPT | ExplanationOfVideo-ACrashCourse | Learning ChatGPT-APIs | Alexa and ChatGPT | ExplanationOfVideo-ConnectChatGPTtoAlexaSkill | prupis.info

**Table of Internal Links**
Create Skill button	(1) Name, Locale	(2) Experience, Model, Hosting	(3) Templates	(4) Review

the Build tab	Invocations	Interaction Model	Add Intent	Create Custom Intent	Intents / AskchatgptIntent
	Sample Utterances	Select an Existing Slot	Intent Slots	Slot Type	Save Model	Build Model

the Code tab	First Look at Index.js	Pasting New Code	lambda Submenu	Create File PopUp
	Empty Keys.js File	Pasting to Keys.js File	Save Button	Deploy Button

the Test tab	Changing Testing Mode	Development Screen	Alexa Simulator: Type Or Click
	Conversation Displayed	Ask: How Many People in the World	Ask: What Is ChatGPT

Notes from: Connect ChatGPT-3 with an Alexa skill

Go to Top | Video
00:12:03 | 02/01/23 | Connect ChatGPT-3 with an Alexa skill

00:00:22 definition of ChatGPT
00:00:52 To connect ChatGPT-3 with an Alexa skill, you need to follow steps.

The "Create Skill" button

Go to Top | Video
00:00:58 The first step is to create a new Alexa Skill
- In the Alexa Developer Console, under the "Skills" tab there is a "Create Skill" button
  - the video displays this in a browser with the link:
  - developer.amazon.com/alexa/console/ask/create-new-skill
  - this link first takes me to the amazon developer Sign in screen
  - I had to register, then welcomed to the Amazon Developer Portal
  - I had to choose which products I was interested in
  - I selected [x] Alexa Skills Kit and [x] Alexa Voice Services
  - I did not select [ ] Receive product information and updates
  - you are finally presented with the Amazon Developer Dashboard
  - and under "amazon alexa" I see "Alexa Skills Kit" and "Alexa Voice Service" as links
  - by clicking "Amazon Skills Kit" link, I see the same screen that's displayed in the video with the "Skills" tab in focus
  - and I see the "Create Skill" button !
00:01:03 He clicks the "Create Skill" button

The first of 4 screens used to Create a New Skill is displayed.

(1) Name, Locale | (2) Experience, Model, Hosting service | (3) Templates | (4) Review

(1) Name, Locale

Go to Top | Back to the "Create Skill" button | Video
00:01:07 (1) He first wants to give the skill a name, he names it "chatgpt skill"
00:01:18 (2) For "Primary Local" he keeps the default as "English (US)"
00:01:26 He clicks the "Next" button

(2) Experience, Model, Hosting service

Go to Top | Back to the "Create Skill" button | Video
00:01:27 (1) Choose a type of experience
You are offered: Food & Drink, Games & trivia, Movies & TV, Music & Audio, News, Smart home, Other
He selected "Other"
00:01:37 (2) Choose a model
You are offered: Custom, Flash Briefing, Meetings, Music, Smart home, Video
He selected the "Custom" model, so we can create our own skill interactions
00:01:53 After that, select to host the back end of the AWS Lambda
00:01:00 (3) Hosting services
You are offered: Alexa-hosted (Node.js), Alexa-hosted (Python), Provision your own
He selected the "Alexa-hosted (Node.js)" as a Hosting Service
00:02:00 He clicks the "Next" button

(3) Templates

Go to Top | Back to the "Create Skill" button | Video
00:02:09 We have to select one of the many "skill templates" that are displayed
You are offered: Start from Scratch, Fact Skill, High-Low Game Skill, Pet Tales Skill,
- Fruit Shop Skill, Scheduling Skill, Survey Skill, Intro to Alexa Conversations,
- Weather Bot Skill, Pizza Ordering Skill, Celebrity Older or Younger,
He selected the "Start from Scratch" skill template
00:02:31 He clicks the "Next" button

(4) Review

Go to Top | Back to the "Create Skill" button | Video
00:02:32 the "Review your selections" screen is displayed
You can review your selections for 1. Name, Locale; 2. Experience, Model, Hosting Service; 3. Templates
There are two buttons, "Back" and "Create Skill"
00:02:32 He clicks the "Create Skill" button

Creating the Alexa hosted skill

Go to Top | Video
00:02:38 He says: creating an Alexa skill will take around a minute
A pop-up window displaying "Creating your Alexa hosted skill."
- it also displays: "It will take about a minute."
- and it also displays: "Creating a voice model..."
  - that phrase gets replaced by: "Provisioning AWS resources..."
  - then that phrase gets replaced by: "Preparing the code editor..."

the "Build" tab

Steps Followed in the Build tab

Invocations | Interaction Model | Add Intent | Create Custom Intent | Intents / AskchatgptIntent
Sample Utterances | Select an Existing Slot | Intent Slots | Slot Type | Save Model | Build Model

Go to Top | Video
00:03:43 the Alexa Developer Console's "Build" tab has three panels,
- a "Custom" panel on the left,
- the "Design and skill building resources" panel in the middle,
- and the "Building your skill" panel on the right
00:03:55 to begin an interaction with a particular custom skill
- we need to mention the "Invocation Name"
- This is the name we use to launch the application

"Invocations" from the Custom panel

Go to Top | Back to the "Build" tab | Video
00:03:58 In the Custom panel on the left, he selects "Invocations" just under the "Custom" heading
- After clicking "Invocations", three more options appear under the "Invocations" heading
- The first of those three options is "Skill Invocation Name"
- he clicks it
- this causes the main panel to display the "Invocation" screen
- this includes the "Skill Invocation Name" text box he will now be using
00:04:01 In the "Skill Invocation Name" text box he types "chatgpt skill"
- The same name he used when he entered it into the "Skill name" text box after clicking the "Create Skill" button at 00:01:16
00:04:06 he says: for example, Alexa open chat skill

"Interaction Model" from the Custom panel

Go to Top | Back to the "Build" tab | Video
00:04:09 he selects "Interaction Model" in the "Custom" panel on the left
- he then selects "Intents" from the Custom panel
- The "Intents" screen is displayed in the center panel

the "Add Intent" button from the center panel

Go to Top | Back to the "Build" tab | Video
00:04:17 He clicks the "Add Intent" button from the center panel

the "Add Intent" screen from the center panel

Go to Top | Back to the "Build" tab | Video
00:04:19 the center panel now displays the "Add Intent" screen
00:04:26 In the "Create custom intent" text box he types: AskOpenAI, however ...
00:04:52 he changes the contents of the text box from AskOpenAi to AskChatgptIntent

the "Create custom intent" button from the Add Intent screen

Go to Top | Back to the "Build" tab | Video
00:04:59 He clicks the "Create custom intent" button

the "Intents / AskchatgptIntent" from the main panel

Go to Top | Back to the "Build" tab | Video
00:05:01 He says we will now move on to building out our interactive model front end
The center panel now displays a screen heading titled: "Intents / AskchatgptIntent"
- under the heading, is a smaller heading titled: "Sample Utterances (0)" and a text box under the smaller heading
- under the text box is the message: "This intent has no sample utterances"
- under that message is another phrase: "A sample utterance is a phrase a user might speak to invoke the intent."

the "Sample Utterances (0)" text box

Go to Top | Back to the "Build" tab | Video
00:05:03 We start by creating a "intents" name named "AskChatgptIntent", with some sample utterances
such as ask - question - and what then we say the question

the "Select an Existing Slot" pop-up window - And Creating the First Utterance

Go to Top | Back to the "Build" tab | Video
00:05:15 he types into the text box: ask
- then the "Select an Existing Slot" pop-up window appears
  - the pop-up includes a text box titled: "Create a new slot"
  - and an "Add" button
- he types the word question into the "Create a new slot" text box from the pop-up, which places {question} (with those brackets) into the text box for Sample Utterances
- 00:05:16 Inside the pop-up is an "Add" button, he clicks it
- the pop-up window disappears
- 00:05:19 the text box containing ask {question} is moved down and a blank text box is displayed on top of it, under the heading: Sample Utterances

the "Select an Existing Slot" pop-up window - And Creating the Second Utterance

Go to Top | Back to the "Build" tab | Video
00:05:23 in the new text box he types: what {
- when he typed in the bracket, the "Select an Existing Slot" pop-up window appears again
- this time the text question is already there and displayed as such
- he clicks on the word question and the "Select an Existing Slot" pop-up window disappears
- 00:05:29 and the word question is now displayed to the right of the text "what", inside the text box
- I have to assume he pressed the Enter key on the keyboard
  - because that text box and the one below it, moved down and a third blank text box is now displayed under the heading: Sample Utterances
  - with the what {question} and ask {question} text boxes below that now include a garbage can icon on the right side of the text box

the "Intent Slots (1)" section from the main panel

Go to Top | Back to the "Build" tab | Video
00:05:32 He leaves that third text box alone and scrolls down the page

00:05:40 He points to the header: Intent Slots (1)

that has two rows under it with the following headers for the columns

Order	Name	Slot Type	Multi-Value	Actions
1	question	blank text box	off	(Edit, Dialog, Delete)
2		blank text box	not displayed	(Edit, Dialog, Delete)

the "Slot Type" drop-down text box from the "Intent Slots" section of the "Intents / AskChatgptIntent" window on the main panel

Go to Top | Back to the "Build" tab | Video

00:05:47 there is not yet a "Slot Type" for "question"

Slot Type is a drop-down menu, he scrolls down and selects "AMAZON.SearchQuery"
he says: in our case, we have an intent slot named "question"
so we need to select the Slot Type: "AMAZON.SearchQuery" as shown below

Order	Name	Slot Type	Multi-Value	Actions
1	question	AMAZON.SearchQuery	off	(Edit, Dialog, Delete)
2		blank text box	not displayed	(Edit, Dialog, Delete)

the "Save Model" button towards the top of the "Intents / AskChatgptInten" screen

Go to Top | Back to the "Build" tab | Video
00:06:06 He scrolls to the top left corner of the main panel and clicks the "Save Model" button

the "Build Model" button to the right of the "Save Model" button

Go to Top | Back to the "Build" tab | Video
00:06:10 He says: we finished with our iteration model, so we save and click the "Build Model" button
00:06:14 A message is displayed: The skill manifest has been saved without errors. The Model must be successfully built for changes to take effect.
- a second message is also displayed: Build Started, You will be notified when the model build is complete.
- meanwhile in the toolbar a message saying: Quick build in progress
00:06:36 A message is displayed: Quick Build Successful
- You can now test sample utterances while we continue to train your model.
- the top displays "Training model"
00:06:52 Finaly a message is displayed: Build Completed, Build was successful for skill chatgpt skill

We need Code to Intergrates the Two Technologies: Chatgpt and Alexa

00:07:00 To connect ChatGPT 3 with Alexa and return reponses, you need to write a back-end code that intergrates the two technologies
00:07:07 the code will receive requests from Alexa and pass them to ChatGPT 3 to generate a response

The "Code" tab

Steps Followed in the Code tab

First Look at Index.js | Pasting New Code | lambda Submenu | Create File PopUp
Empty Keys.js File | Pasting to Keys.js File | Save Button | Deploy Button

Go to Top | Video
00:07:08 From the Alexa Developer Console, he selects the "Code" tab,
- which displays a Toolbar towards the top, a side panel on the left, and the main panel displays the code from index.js

First look at the code for index.js in Alexa Developer Console's "Code" tab

Go to Top | Back to the "Code" tab | Video
00:07:13 he says: then the code will return the response to Alexa
00:07:20 he says: we can write code in the index.jsnode.js file
- I see references to index.js
- The code for index.js had a white background, with colored text
  - somehow he displays this other screen with a black background and colored text as code
  - it appears to also be named index.js

Pasting the new code from Visual Studio to the Alexa Developer Console's "Code" tab, overwriting the index.js that was originally there.

Was the code that was placed into Visual Studio automatic ? Did the Alexa Developer Console somehow place the code into Visual Studio ?

Or was the new code created in a particular folder and Visual Studio can open and display it ?

Go to Top | Back to the "Code" tab | Video
00:07:24 he says: the code for the custom Alexa skill is as follows, so we copy and paste it
- It looks like he copies all the code from the window with the black background,
- and paste it into index.js that's displayed in the Alexa Developer Console's "Code" tab, white background,
- in an overwrite of the code that was there before
- The code with the black background is from Visual Studio, however, how the code got there is beyond me.
- I would assume the code was created by everything we've done so far.
- I am hoping that code wasn't written by hand.

Go to Top | Video
00:07:44 he is highlighting some of the code
- he hoovers over the const statements in the begining of the code
- you can see words ie: ask-sdk-core, OpenAIApi, openai
- and he also hoovers over a line with keys and './Keys'

the lambda submenu with the "Create File" option

Go to Top | Back to the "Code" tab | Video
00:07:57 in the left panel, he hoovers over the "lambda" folder and gets a sub-menu to appear
the sub-menu has 4 options: Create Folder, Create File, Delete Folder lambda, Rename Folder lambda

the "Create File" pop-up window with the "File Path" text box and the "Create File" button

Go to Top | Back to the "Code" tab | Video
00:07:58 he selects Create Folder, a pop-up is displayed with a File Path box and a "Create File" button
- the File Path box had lambda/ inside of it
- he added to it: lambda/Keys.js
- then he clicks the "Create File" button

the empty Keys.js file

Go to Top | Back to the "Code" tab | Video
00:08:08 The Keys.js file name is now displayed in the left hand panel under "lambda" and above the index.js file name
- and there are no lines of code for Keys.js in the main panel
- he goes back to Visual Studio and clicks the "Keys.js" tab, which displays one line of code

00:08:09 he says: as shown, we require a file name, Keys.js, which contains the openai key, and you need to register openai website
00:08:13 and get your openai key and paste it into the lambda's/Keys.js file as the value for OPEN_AI_KEY
- the screen displays 'your api key' which is where he wants you to place the key
- He then clicks a "JS Keys.js" tab towards the top of the screen
- when he clicks the tab, one line of code is displayed with the text: 'your api key'

Pasting one line of code into Keys.js

Go to Top | Back to the "Code" tab | Video
00:08:22 He high-lights that one line of code from Visual Studio, and copies it to the clipboard
00:08:26 He goes back to the Alexa Developer Console, with Keys.js high-lighted in the left panel
- and the "Keys.js" tab in focus on the main panel
- 00:08:30 He pastes that one line of code into it

the "Save" button in Alexa Developer Console's "Code" tab

Go to Top | Back to the "Code" tab | Video
00:08:31 he says: another interesting thing is to install openai in a file package.json which we see on the screen
- he says: Now we can save.
- as he is saying that he selects the index.js tab which displays its code
- and then he clicks a "Save" button that's located above the tabs and to the right

the "Deploy" button in Alexa Developer Console's "Code" tab

Go to Top | Back to the "Code" tab | Video
00:08:37 He says: Now we can Deploy, and test our Alexa skill.
- so he clicks the "Deploy" button, located to the right of the "Save" button
00:09:11 The Deploy button goes from displaying "Deploying", back to "Deploy"
00:09:19 another little screen is displayed towards the bottom right side corner
- Deployment Successful
- If you make any new changes, you will need to deploy for them to take effect.

The "Test" tab

Steps Followed in the Test tab

Changing Testing Mode | Development Screen | Alexa Simulator: Type Or Click
Conversation Displayed | Ask: How Many People in the World | Ask: What Is ChatGPT

Go to Top | Video
00:09:23 in the Alexa Developer Console, he clicks the "Test" tab located to the right of the "Code" tab
00:09:28 There are three notes displayed towards the bottom right corner
- Deployment Successful
- New to Hello World?
- Full Build Successful
Towards the top of the window, there are 2 messages displayed: "Test is disabled for this skill."
- Then there's a drop-down menu displaying: "Off" and a down-arrow icon
- The second message: When test is enabled, you can interact with the selected stage of your skill in the Alexa simulator and on all devices linked to your Alexa developer account
- I didn't even know that I can link my Alexa devices to my Alexa Developer Account !!
00:09:32 he closes the three notes one at a time

Changing Testing Mode from "Off" to "Development"

Go to Top | Back to the "Test" tab | Video
00:09:33 he says: Let's test it out, click on the test option at the top.
- The mouse cursor hoovers over the "Off" drop-down menu, that I pointed out earlier
- he forces the drop-down menu to appear, it has 2 items: "Development" and "Off"

The Development Screen and its panels

Go to Top | Back to the "Test" tab | Video
00:09:38 he says: enable skill testing to development mode
00:09:41 After selecting "Development", a wider left side panel is displayed and the main panel has several panels in it
- and 4 options are now displayed to the right of the "Development" option mode
- [x] Skill I/O, [x] Device Display, [ ] Device Log, and [ ] Personalization is greyed out.

Alexa Simulator - the "Type or click and hold the mic" text box

Go to Top | Back to the "Test" tab | Video
00:09:42 the mouse cursor hoovers over the "Type or click and hold the mic"
- he says: then you can say, open chatgpt skill and ask a question
- he then types into the "Type or click and hold the mic" text box: open chatgpt skill
- it looks like he pressed the Enter key on the keyboard
  - then the text he just typed in vanishes
  - and an icon is displayed as if it's running something or waiting on a responce from the system

Alexa Simulator - conversation displayed in the left panel, and spoken

Go to Top | Back to the "Test" tab | Video
00:09:56 The left panel now displays a conversation and there's JSON Input and Output code displayed in the main panel
a female voice speaks "Hi there, what would you like to know

Asking - how many people in the world ?

Go to Top | Back to the "Test" tab | Video
00:10:17 he types: how many people in the world
00:10:25 The question is eventually displayed in the left panel with an answer that the female voice reads out,
- ending with: what else would you like to know

Asking - what is chat gpt ?

Go to Top | Back to the "Test" tab | Video
00:10:56 he types: ask what is chat gpt
00:11:05 Again, the question is eventually displayed in the left panel with an answer that the female voice reads out
- ending with: what more would you like to know

The End

Go to Top | Video
00:11:49 video displays: "Thank you"

Reserve

Go to Top
reserve
reserve

Version Info

Go to Top
Version: 20230209-06:33PM