Cognigy Sessions: Extensions

Welcome to Cognigy Sessions, our Techinar series from Conversational AI experts for experts. With every episode, you will get deep insights into another Cognigy.AI topic. Our goal is to provide you with the knowledge you need to build your own best-in-class Conversational AI applications. This session is about working with and creating your own Cognigy.AI Extensions. We will show you how to enhance your Virtual Agents' capabilities by using Extensions in your Flows, how to leverage our open-source library to speed up your Cognigy.AI projects, and finally, how to build your own Extensions based on CognigyScript and an external IDE. This recording is also available in our Help Center. Please follow the link below to access additional resources and to find our community for questions and discussions. Also, please be invited to start a free trial if you're not already a Cognigy.AI user. And with that, let's start today's session.

Hi, everyone, my name is Phil, and today we're going to look at enhancing Cognigy.AI with Extensions. As always, if you want to follow along, what you need is access to Cognigy.AI, which you can get at signup.cognigy.ai, if you want to register for a trial. And for this session, you will need a code editor. So for example, Visual Studio Code, or of course you can use any other code editor that you like as well.

Now let's start by looking at what are Cognigy Extensions actually. So Cognigy Extensions are a way to extend the Cognigy Flow Editor with new Nodes. As you can see, two examples here on the right side: We have a Salesforce "Retrieve Entity" Node and a UI path "Start a specific job Node", and both of those are Nodes that come from Extensions. Under the hood, Extensions are JavaScript modules which describe two things: They describe the front end or the user interface of a Node and the back end, which is the functionality of a Node. The front end definitions create the fields that you see in the Flow Editor and the back end functionality is what's being executed when the Node is hit during the execution of a Cognigy Flow.

One important and interesting fact to note is that all Cognigy Nodes are also written in the Extensions Framework. All the features that Cognigy Nodes have access to, your Extensions will also have access to all the field types, all the API functions, etc. So you can rebuild the functionality we've built or you can extend the functionality that we've built with the Extension Framework.

Now, what are typical use cases for Extensions? The probably most common use case is the integration with third-party APIs. So you want to write a module like the ones we saw where you connect against a UI Path installation or you connect against a CRM system like HubSpot or Salesforce and you want to give your business users, so the people who are building the Flows, a nice user interface for that. Another use case could be complex logic. So if you have complex logic that maybe already exists in code, you can write an Extension that executes that complex logic and hides it from the user so you don't need to use a Code Node or anything like that. And another thing about Code Nodes, Code Nodes have a 1-second timeout, whereas Extensions don't. So you could do a long-running computation, that doesn't fit into a Code Node and in Extension as well. Last but not least, you could build Convenience Nodes that for example, use various npm modules that are out there, crypto or some logging mechanisms, things that are not available in Cognigy out-of-the-box, and that you want to add to your Flow Editor.

Now, looking at the first one, integration with third-party APIs, you might say, well, can't I do that using HTTP Requests as well? And of course, you can use the HTTP Request Node to connect against any API. So that is our generic way to connect against APIs. But you have to know server-specific payloads etc. So you must know the URL to connect against, you need to know the HTTP Request method. Maybe you need to know the payloads, you need to know about authentication, etc, etc. And you can hide that complexity from your users by building an Extension. So what we see here in the example is we see the exact same functionality being carried out. But once with HTTP Request Node, where I need to know the Twilio URL, I need to know the payload that goes against the Twilio API to then send an SMS, etc. And then on the right side, we see an Extension which hides this complexity and giving the user a nice user interface where they can define the Twilio connections or the credentials. The sender number, receiver number, and the message body. So a lot more user friendly and a lot easier to use for business users.

Let's start with a general overview of Cognigy Extensions. Extensions appear as Cognigy Flow Nodes in the Flow Editor, just like we saw on the screenshot earlier, and they work in exactly the same way. In order to get an Extension into Cognigy, you upload them as an Extension package in the Extensions manager, which you can see under settings on the left side, and then they appear just like you see on the screen, shown on the right in your Cognigy.AI installation. Now there is a lot of Extensions which we've pre-built already, and you can find them in the Cognigy Help Center. This is where you find the Extension packages that are ready for upload and all our Extensions are also available as open-source on GitHub. So if you go to our GitHub repo, you can see the Extensions that we've built and you can see the code and can use that as a tutorial or to extend upon if you want.

Let's take a look at that. If you go to the Cognigy Help Center and search for Extensions, you will see the Extensions Overview page, which is where we list information about Extensions in general, but also the library of Extensions, which we have available, and if you click on the name of the Extension, you will go to the code of that Extensions on our GitHub repo, and if you click on download, it will download this Extension for you to then later upload into your Cognigy.AI installation. Now, if we go to Cognigy.AI and here we are in a Flow, we go to the Manage section and here we go to Extensions and we can now upload our Extension here. For that we drag the Extension to upload in and Cognigy will then start uploading it and we can see a task being spawned in the task manager as well, which is the Extension Upload and Installation.

While this is installing, let's take a look at the Extension on GitHub. We have a GitHub repo in which all our Extensions are that we have built as Cognigy and that are available as open-source. We have general information about Extensions, how to get started, installation, etc. and you can find the code for the individual Extensions in the Extensions folder. So if you take a look at the HubSpot Extension, for example, here we can see the code for that. We can see it's just a regular JavaScript module with a package.json etc. And in our case, we're using Typescript to write most of the modules so you can find the module code here. But we will take a little bit of a deeper look at this in a second.

Once the Extensions has been installed, it will show up here in this view and we can actually click on it to get more information about the package and also the Nodes that the package contains, and we can now use this in our Flow. So we could go here into the main Flow, we could add a Node and the newly installed Extensions we will find under this Extensions tab here, where it will be in line with all the ones that have been installed by default or that have been added into this project as well. And here, for example, we can now see the Find Contact by Email Node and we can see it has a UI on its own, and here we could now go and add this information to get some information. So why don't we do that?

We'll say, ok, we want to build a bot that retrieves information, a first name and last name for an email address from our HubSpot installation. So we pop the text in here and we need to create a HubSpot connection, which will quickly do. So, we'll call it HubSpot and here I need to paste our API key. Here we go. I create this connection, I save it and this is now done and I can now output the results of that Node, and I believe this Node actually exposes some Tokens as well. So the Firstname from HubSpot and the Lastname from HubSpot and we can try that out. So if I pop in my email address, it should now reach out to HubSpot, find that information and then execute the Say Node afterwards. That shows, ok, that would be Phil Heltewig, and if we pop in someone else, then we will see that it will now reach out and find that other person in HubSpot. So you can see it's actually super easy, what you can also see, it takes a second or two to execute the Extension. That is because we're executing it in a secure context so that it does not impact the performance of the system as a whole. So it needs to be spun up, executed, and spun down. That's why there is a slight delay.

Now that we've seen how we can find Extensions on the Help Center, look at the source code and upload them into Cognigy and use them in Flows. Let's take a look at how to build Extensions. As described before, Extensions are NodeJS based JavaScript modules. You can write them in JavaScript, but you can of course, also write them in Typescript, which is what we've done with our example modules and what we're going to do here today as well for convenience because you have access to all the typings, can use Intellisense in a better way and so on. Now, just like any other JavaScript modules, you can include different modules into your Extensions module, right. So you can use any npm module, say you're building an Extension that is accessing Microsoft SQL Server. You can use the MS SQL npm package and you can really use any npm that's out there in your Extensions, which is something that you can't do inside a Code Node, for example.

Now, the structure of the Extensions is exactly the same as with any other JavaScript module, with all the requirements and all the freedoms that they have. So, for example, as for requirements, you do require a package.json, which has the definitions of the dependencies etc. But as for folder structure, how you divide your module up into different JavaScript or Typescript files, this is really up to you. The only thing here is they must include the Add Cognigy Extension tools module, and we're going to take a look at that, of course, how that works in a sec.

Now, we're going to work on an example structure here and you can copy that, or you can, of course, implement your own structure if you want. But let's take a look at the example structure, which is also the structure that we're using for all our open-source modules. Now in the root of the module, we have a package.json file. This contains the name of the Extension, a short description, the dependencies, all the other npm modules that you have in your Extensions, etc. We then have an icon.png  file and this has to be a 64x64 PNG icon and that is the icon that shows up on your Nodes in the Cognigy Flow Editor. We also have a markedown file the README.md file, which contains a longer description of the Extension which you then see on the Extensions overview page. We have a source folder, this is a Typescript thing here, but we have a source folder in which we have a module.ts file and the module.ts file contains the definition of the Extension, as in what Nodes are available through the Extension, what connections are available. The Nodes and Extensions we're saving in their own folders for convenience, and then here in this example, now we have one testNode.ts which contains the definition for one type of Node that is available in the Extension.

Now we're starting off with a module.ts structure. So this is the main file of the Extension, which we are referencing in the package.json. Of course, we're not really referencing the Typescript file, but the JavaScript transpiled version of it. But this is the main entry point of the Extensions module. This file then in turn references, Nodes, and Connections, and the way you're doing that is you are exporting,  you have a default export in here of the create Extension method and you're passing a number of parameters into that. We'll take a look at that in Visual Studio Code in a second. Now, each individual Node can have its own file, and this file uses a function which is the Create Node descriptive function, which you've then imported from the Cognigy Extensions tools, and you're passing a number of parameters into that, and the parameters describe the UI and the backend code of that Node.

Now there's a large number of parameters and I just want to show a couple of them here to give you an idea of the things that we can do with a Node. So, Node has what we call a type and a type is a unique name for that Node type. So say you have a Database Query Node, you could call it type DB query. If you have a Send SMS Node, you could call it Send SMS. So you give it a unique key, a unique ID. This doesn't show up anywhere. It's just that you give it here a unique ID to be referenced by later inside the Cognigy system. You give it a defaultLabel, you know, when you have Nodes in Cognigy they have a label and you can change the label per Node but every Node has a default label. So when you create a Say Node, for example, the defaultLabel is say, when you create a Question Node, the defaultLabel is question. The appearance section describes what the Node will look like, the colors of the Node, the shape of the Node icon, etc, etc. The preview parameter defines the preview of the data that is inside the Node that we will show. So for example, you could reference a Text field here, which means when the field is filled in by the user of the Flow Editor, this text will then show up in the preview in the Flow Editor itself. And most importantly, there's an object called fields. This lists the fields that appear in the Node Editor so when you click on the Node in the Cognigy Flow Editor, the Node Editor opens on the right side and you can edit the fields of that Node, and those fields are defined here in the fields array and we're going to dig a lot deeper into that on the next slide. Last but not least, every module contains one function and the function as an async function that describes the backend code, that describes the code that is executed when the Node is hit. That's what we have here in the example on the right, we have on the very bottom.

By going into the fields array, the fields array contains all the fields that are shown in the Node Editor when you click on the Node in the Cognigy.AI user interface. And here we have an example on the left side of a Send SMS Node which has four fields, and those four fields, as you can see, appear on the right side in the Node Editor as well. So we have a Twilio Connection field, which is of type connection. We have a from field with a label Sender Number which is a Cognigy Text field, Receiver Number, Message Body, also Cognigy Text field. We'll learn more about fields on the next couple of slides. But as you can see, those fields when you  put them into the definitions here will then appear in the Cognigy Node Editor.

Now, fields are objects as well that have a number of keys and there are three required keys, and then there's optional parameters as well. The required ones are key, which is a unique key or unique ID for the field and you need that to later reference it in your backend code. There is the label, which is the label that appears above the field. You can see that on the bottom, on the bottom right where the label is in this case here  Sender Number. We also have a type which defines the type of the field and more on that on the next slide. But the type could be Cognigy text, for example, and in this example, here it is Cognigy text, so that tells the Cognigy Node Editor, Ok, when I show this field, I'm showing a Text field with the Cognigy.AI Icon on the right side to insert Tokens. There's also a number of optional parameters, such as defaultValue, such as description, which will enable you to put a tooltip on the label, various parameters. In the example here, we have a parameter required: true, and you can also add conditions to fields, which allows you to hide and show fields depending on other fields values.

Now, as for field types, maybe you remember all the Cognigy Nodes are also written in the Extensions framework, so all the fields we have available in any Cognigy Node, any Cognigy Supplied Node are also available in Extensions. And here we're just showing a couple of them to show you what you could do in the Cognigy Node Editor. The probably most commonly used one on the upper left is the Cognigy Text field. It's a single-line text field that also has the Cognigy Tokens Editor icon with the AI icon there. We then have checkboxes, we have a text array fields where when you enter one line and your line appears, this will then later be exposed as a string array. We have a chips input, we have a number fields, we have a toggle field, we have a slider where you can define what are the parameters for the slider, minimum, maximum step, etc, a date selector, a time selector, and a JSON field that lets you enter JSON. So you can really give your business users the user interface that they need in order to configure the Node.

Now there is one very special field type, which is the say field type because the Say Node is not composed out of many different field types, but the Say Node itself is a field type. So you can use the field type say to add a full Say Node field to your Extensions. And that includes all the Graphical editors, Cards editors, Quick Replies editors, etc. channel configurations. And then when your Node is executed, you will have access to that configuration from within your backend code and you can then output it or you can manipulate it or do anything else with it that you want.

Last but not least, there is the backend function. The function inside a Node descriptor contains the code that we will run when the Node is hit during a Flow execution. Can be any JavaScript code or Typescript code, but it has access to a number of things inside Cognigy. It has access to the input that was present when the Node was hit. It has access to the conversation context when the Node was hit. To the contact profile and of course, to the full API object, meaning that you can interact with the Cognigy system through the API as in outputting things, manipulating context, changing the order in which Nodes are executed, etc, etc. So you have the full power of the internal Cognigy API at your hands in that backend code. When we jump into the code editor later, you will see how to get more information about the various methods that are available.

Now, when we've built a new Extension with the frontend code, the backend code, etc. How do we build it and deploy it? Extensions, in the end, to become uploadable into the Cognigy system, are .tar.gz files, which are created by just zipping them essentially, and then you can upload them into the Cognigy.AI user interface. The file has to contain the package.json, the icon, the README.md, and your JavaScript Code. If you're using Typescript, be sure not to include the Typescript code. You can include it, but it doesn't do anything, you have to include JavaScript code. You can optionally include your Node modules folder, but you don't have to. If you don't include your Node modules folder, we will read the dependencies in the package.json and install those into your Cognigy.AI installation. If you do include your Node modules folder, we will disregard the definitions and the package.json, and just take your Node modules folder. One important thing, of course, you're going to iterate on your Extensions, right,  you're going to build a first version and then you're going to build a second version of it, and maybe you've already used Nodes of your first Extensions somewhere in your Flows and you don't want to recreate everything. Now, when you go into the Extension upload, you can delete your existing Extensions. This will not delete the Nodes in your Flows, they will still be there, and remember, they are referenced by the name of the Extension and the name of the Node, that's what you defined in your Node definitions. And then you can go in, you can delete the old version, upload the new version and then everything in Flows will still work, so you can delete and reinstall and that'll still be fine. Now, I know that was a lot to take in, so I think we should jump straight into a code editor and build one of these to see how it would actually work.

Alright, so we've prepared an example project here, and let's take a look at what we prepared, and then we'll jump straight into creating Extension. So we have our default package.json, here, and we have a number of dependencies which we've installed. Obviously, we said we're going to use Typescript so we install dev dependencies, the Node types, and also Typescript itself, and we install another dependency, which is not a dev dependency, which is Add Cognigy Extensions tools, which is what we will need later in our Node files, module files, etc. We also have a README. It doesn't contain a lot of stuff right now, but it's just a markdown file and we have an icon, It's a 64X64 PNG. We also have created two files, the module.ts, and the testNode.ts, which are both empty at this point.

Let's start with the Node itself. First, we need to import the Create Node descriptive function from the Cognigy Extensions tools, and we're also importing some interfaces here, which we can later use to define an interface for the parameters that we're going to use in this Node now. This is Typescript specific. If you're not doing Typescript, you don't need any of this. All we are defining here is that, ok, in the configuration for the Node, we will have one field, which is a Text field and that is string. This does not have anything to do with the UI. This is really just for Typescript. And now we're going to write the Node itself. So what we're going to do is we're going to export a variable which we will call Test Node in this case, and we're going to use the createNodeDescriptor function. Now we have to pass an object into this function and the nice thing in Typescript is that if I press control-space, I get all the typings that are available for this. As you can see, we have full typings. So for example, I can choose I need to type field, what shall we call this? Let's call it the testNode field. I also want to add a defaultLabel. So I'm going to call this my test Node and I need to add some fields. So we're going to add the fields array and you can see the typings are not just for the first level, but the typings are actually for all levels, including the fields. So, again, control-space, and I get the variables that are required. And these with the question mark means they're optional.

So I need to give my field a key. So I'm going to call it the Text field. I need to give my field a label, maybe I'll call this my text and I need to give the field a type, and in this case, here again, I get full Intellisense and I'm going to use the Cognigy Text field. This will create one field in the Node Editor and that field is a Cognigy Text field. Maybe for the fun of it, we also add a description and this is what we will show up in the tooltip. Please, enter any text you like. Now, last but not least, we're going to add the function into this. The function is an asynchronous function and we are going to add the Cognigy variable into it, and the config. The Cognigy parameter gives us access to all the input object, context object, etc, and the config gives us access to the config itself. So you and I have the function defined and let's extract the input context profile and API from the Cognigy object. And you should now be able to see if I type input then I get all the things that are in the input. Like for example, text, user ID, etc, etc. and API gives me all the API functions that are available in Cognigy, right, so actually, it's super convenient when you built that.

Now let's extract the text from the config so this becomes very convenient now because we created this interface up here. So I can say, I'm going to extract some parameters from the config and what's available? text is available and what do we want our Node to do? We want our Node to output something. So we're going to use the output function and the output needs text and data output and maybe the text is hello and then whatever the text was that was entered in the config and there is no data that we need to output, and that's it. We've written our Node and the Node will have a Text field, which we can configure in the Node Editor, and then it will output hello and then the text that we've put in. So let's save that and let's take a look at the module.ts. Now, this is the main entry point, right? So in this main entry point, we need to use the create Extension method. We also, of course, need access to the Node that we've built so we're going to import that Node as well. And then we need to have a default export so if we go "export default createExtension" and then here, we now need to give it Nodes and optionally Connections, so we're going to give it Nodes. It's an array, and here we add our Test Node and then we can if we want to add Connections, we'll get to Connections later. We're just going to add an empty array into that. And with that, we are now done.

If we want to package this up now, we can just go in and type npm run build, just to show what this will do, it will do an transpiling. So npm run tsc which will transpile the Typescript into JavaScript, and it will then also do an npm run zip which we've defined up here, which will actually zip everything necessary into the Extension for you. You can see we're transpiling and then we are going to zip and then we will have that file. And if we look into the transpiled code, you can see the transpiled code is actually very similar. We have the module.js now in this case and we have the Node. So you can just use JavaScript then you don't need to do this transpiling step.

Now, if you go back to our Cognigy project and we go to the Extensions view, we can upload the Extension by just dragging it here. This will upload it, this Extensions will upload superfast because it doesn't have any npm dependencies. We can see our icon here, we can see the name here, etc. When we click on it, we can see, Ok, there is a Node, it's the test Node for which we didn't provide a summary in the Node description, but we could have and we can now use this in our Flows. So if we go to the main Flow, um, it has two disabled Nodes at this stage, the ones that we saw earlier. We can go to the Extensions and under this icon here, we now see the Test Node that we've created. The Test Node has one field, which is my text with a tooltip here as well, and it is of type Cognigy text. And I can type anything in here like, for example, I could type Cognigy and if you remember the backend code, what the Node does, it should do an API output "Hello" and then the configure text. So it should say "Hello Cognigy." Let's try it out. So asdf and it says Hello Cognigy. Now because this is a Cognigy Text field, I can really do anything here. I can also use Tokens for example, or I could say um something like input.text.toUpperCase. So if I say Cognigy now it should say "Hello Cognigy COGNIGY" and there we go. So that's how easy it is to build a very simple Extension. You just create the Node and you create the module.ts, and you insert it into that and then this function will be executed when you hit the Node in your Flow Editor.

So now that we've seen how to build a simple Extension, let's look at some more advanced features that the Cognigy Extensions framework offers. You can imagine that if you're using a lot of fields, it can become very cluttered on the right side in the Node Editor, so we have developed a concept which we call Sections and Sections can be used to group fields into collapsible sections in the user interface. They can contain conditions to which we will come next. And if you use sections, you have to use a special element, which is called form. So you are adding a sections definition into your definitions, into the parameters of the Create Node descriptor. But you're not just adding the sections which contain the fields, but you're also adding a form element below, that defines how to present that form in the Node Editor. You do not require this if you only have fields that you just want to show. But if you have fields and sections and if you want to turm the order of how things are showing up, you need to use that form field, and if we look at the section here, we have, actually let's look at the form first. If you look at the bottom two fields of the form, we have a field of type body well, with the key body and we have a section of storage option. If you look on the right side, you can see the message body field, and then comes the section, which is the storage auction section. And this section is defined on top of the form element here and it contains three fields: store location, input key, and context key. Now here we're only seeing store location and input key because the context parameter has been hidden by a condition. So this one would really only show up if the store location wouldn't be input but context. So again, we can use sections to group fields in the Node Editor UI.

So what are these conditions that we are talking about, sometimes it might make sense to only show a field if a certain other field, like a dropdown or a toggle has a certain value. So imagine you have a dropdown like the one we just saw. Where do you want to store your information? You can have input and context as options in your dropdown, and if you choose input, you want to show the input key fields, if you select context in the dropdown you want to show the context input field. So what you can do to any field, you can add a condition and to any section actually, you can add a condition as well. And the condition links to another key, to another field's key. In this example here, it's store location. It has a value which means does this key or does the key value correspond to that? So is store location context and you can negate it as well. So this means if you don't negate it, it says only show this field if store location says context. If you do negate it, it means only show this field if the store location does not say context. Now, the nice thing about conditions is that they can be changed. You can chain them with and & or, you can see that on the right side there. And you can do indefinite chaining essentially where "and" and "or" are array of conditions, right, So in this case, here it would say only show this field if the store location is context and either key 2 has value 2, or key 2 has value 3. So you can get rather complex in that and create a much better user experience through that.

Now, another thing we've briefly seen is Connections. Connections are key-value pairs which we are storing encrypted in Cognigy.AI. So you could use those, for example, for credentials. They are created via the Flow Editor or via the Node Editor inside the Flow Editor, and by storing them in an encrypted way, we cannot read them afterwards. The user cannot read the settings inside a Connection. You can update them, which means you can override them, but the user cannot read them. The Node itself can read the Connections though. So say you're putting in username is Phil and password is Cognigy. Nobody using the Flow Editor including my own user will be able to read my credentials. I can update them like, my password is no longer Cognigy, my password is now Cognigy2021, but I cannot read them. The Node itself that's using the Connection does have access to the username and password though, so they can use them, for example, to authenticate and against an external service. Another nice thing about Connections is that Connections are not bound to Nodes, meaning that Connections can be shared across Nodes if the Node fields refer to the same type of Connection. We're going to create a Connection in a second so we can see how that works.

Connections themselves are relatively simple objects, which are just like Nodes exported, and then you can use them in the Create Extensions function in the module.ts and below, we can see an example for the Twilio connection. So it has a type and this type is important, right, the type is the parameter that lets you share them across Nodes. So you could have several Nodes, for example, in your Twilio Extensions, send SMS, place calls, things like that and all of them are using the same type of Connection. They're all using a Twilio Connection. So if you create a Send SMS Node and through that, you create your Twilio Credentials Connection and then you put a Place Call Node into your Flow as well. This could reuse the already existing Twilio Connection and then Connections have fields again which show up in the Connection Editor.

So let's take a look at that in the Visual Studio Code. So let's take a look and implement some of the things that we've just seen and we're going to start by adding some extra fields and some sections, and I've prepared those here. So here we have our fields, right. Right now, we only have the my text field. So I'm going to add another field and which I call choice. So the key is choice and maybe the label is "Your Choice"; and it's a select field and a select field as a dropdown and it gets some parameters, and in the parameters we have options, and here we have an array of the options that are available to the select field and they have a label and a value. So when we open that dropdown, we'll see two choices that we will say text and number, and when we select them, those will be the values. Now, we already have our Text field and we're going to add a number field in as well. So we have a second field, which we call "num", and it is "my number", it is a type number field. And I've actually already added a condition here. The condition is if the key "choice" so this one up here has the value number, so there's one here, then show this field, otherwise don't show this field. And we can do this in exactly the same way here where we say, well, if it's text, then show this, right, otherwise don't show it.

So why don't we try that out? I'm going to build this and then I'm going to go back into my Flow and I'm going to delete the Extensions we currently have, I'm going to upload it. We can delete it. By the way, if you go back to a Flow after you've deleted Node, you will get this type of warning like, Ok, this used to be an Extension that we no longer have. So I can now go into the Extensions and re-upload it from here just to see if the conditions that we put in actually work. So going back to the Node, we now have this Test Node and I can choose text, and then here we have text and then I can choose number, and then here now I have my number. Now I can put in 12, and the cool thing is that the values persist. So even if I go text here now, it's my text , and if I choose number, then now it's a number of field and I have the number.

Now, let's go in and add some more fields, we're going to add a second and third number field.  I'm just going to paste them in here and we've got to call them num2 and num3, and I will say, Ok, this is my second number and this is my third number. We will keep the conditions. Although in this case, let's actually remove the conditions, and now, of course, it would get quite cluttered, right, and maybe, you know, the principle we're using and Cognigy we call it "advanced simplicity" which means that you should give your user a simple view if they only want to achieve something simple and if they want to do something more advanced, hide it in a section. And that's exactly what we're going to build now. So if we look at building sections, we need to add a new key here, which is sections and sections, again, is an array. And in the sections array, we now need to add a section. So a section is an object as well and let's just type that in here. The section has a key, maybe we call this advanced. A section has a label which you might call advanced, a section can be collapsed by default or not. Maybe here we say true and a section contains fields, and the fields that this one will contain is the num2 field and the num3 field. Now we have a section, but as we learned earlier, we actually have to use a form element if we use sections as well to determine what the form of the Node Editor will look like and just prepared this here. So we will show the choice field, we will then show the text field and the num field or really just one of them because we've conditioned them, right, and then we'll show the advanced section, which is this one. Now we could even say, well, the advance section only really makes sense if a number was chosen or if the number was chosen in the select field. So we can add that in. So if choice is number, then we're going to show this section. Now let's compile that and let's take a look at what this looks like. So we're going to go in and delete the Extension again, and then we're going to re-upload the new one. Here we go, uploading it into the system and now let's go take a look.

I have chose a number, my number is 13 and I now have the advanced sections with my two extra number fields. If I choose text, the section disappears and the other fields disappear as well. So that's how you can use sections, the form, and conditions. Next up is the creation of Connections, so if we go back in and we create a new file, maybe we call it "myConnection.ts" Here, we can import the connection schema from the Extensions tools, and then we need to write an Extension. So if we do that here, we are exporting the variable, and in this case, we call it myConnection. You can call it whatever you like, really, and it's based on my connection schema so that we get all the nice typing again. There is a type and the type, in this case, is "testConnection". So you can really call this whatever you want and I actually forgot an equals here. So that's that. We do have a label and the label is, for example, Test Connection, and then we have a number of fields and in this case, maybe we want a username and password fields. So here we have fields array and every field has a field name, then the name of that field and that's it. So that's our Connection, we save that and now we need to make this Connection available in the module. So we're going to go here into the module and we say now we also have a Connection which we first need to import. So we import it from connections, and then here we have myConnection, and the variable we importing is called myConnection. And then here we are popping that in.

So now the Connection is available in the module and now we want to, of course, use that in one of our Nodes. Now, the way to do that is to add a new field which lets us select the Connection or select or create the Connection. So maybe we give it the key "connection" and we give it a label, which is "my Connection", and we give it the type "connection". This is important, and then we need to give it some parameters to tell it, what type of connection do we actually need here? So we put in connectionType and this is the one that we put in here. So I put in test connection and we can say, well, that's required or not, and maybe in this case we say required is true. Now, we need to add or we can add our variables that we've created to the num, num2, num3, choice, and connection up here in our typings as well. So let's do that, num is a number, num2 is a number, num3 is a number, choice is either text or number, and now comes the connection. The connection is actually an object. The object has a user and a password field and they are both string. So we have user which is string, and password which is also string. And now we can use all that information in our Node down here so we can import all the things that we haven't imported yet. So num, num2, num3, and the connection. So and maybe we also import choice, actually. We could say, ok, depending on what choices, let me do a switch on choice. If it's text, we are going to do exactly what we did here, and then we break. If it's number, we are going to an "api.ouput", and we'll say number, and we'll just take num, for example. We could do something with num2, and num3 here as well, but let's keep it at that for now. And then, of course, we now also have access to the information in the connection. Now, something we wouldn't usually do is output it. But in this case, just to show that it actually works, we will output the username and password. So here we have user. Actually, let's do this in a bit of a nicer way. So we have the user, and it is a connection.user, we have a password, just connection.password, and we're not outputting data. Let's try that out.

We're compiling the module going back in here to our Extensions, and I'm going to delete this Extensions. I am going to upload our new Extension which should now have the connection to finish and all that. Let's see. We should also be able to see the Connection here, so we see aha! there is a Connection here, it is a Connection Type: Test Connection, and the name here and here again, we have our Test Node. Now, if we go into the Flow Editor, we'll see our module as we saw it before, and the Connection doesn't show up. Where is it? Ah, we forgot to add it to our form. So let's add it to the form and then it will show up as well. So here we add the field "connection", compile this again, and get it uploaded into the system. Back to Extensions. To lead the Extensions uploaded it a new. So we don't have to stay here, we can go somewhere else, we get a notification anyways. We go back in now and aha, here we have the Connection. Now in the Connections, I can select existing Connections of that type, but there are no existing Connections of that type. So I'm going to create a New Connection and I need to give it a name Phil's Connection and I need to give it a user name, for example, I can type phil and see this here and I put in a password, say Cognigy and I create this and I save it. You will see that I can also Edit Connections from here, but I cannot do anything. I can only Reset it or Update it. I cannot really see the values. Let's see if it does what we wanted it to do. We'll say sdf, it says Hello my text, User: phil, Pass: cognigy. Now I go in and I say, well I don't want the text, I want the number 13 and it'll say number 13, User: phil, Pass: cognigy. So you can see the Extension itself has full access to the Connection parameters and you can then use that to connect against a third-party system. You do find your Connections also here on the left side where we now have a Phil's Connection, it was last edited by myself a minute ago. It's of type testConnection, but I can't do much with it even if I click Edit, it's the same dialog here so we can maybe update the user. So say we don't say phil anymore but philip. We should now see that it says Philip. I cannot read the values, I can delete it, or I can copy a reference ID to use it in the API, but that's pretty much it.

Now, this is not all that we can do. There is a lot more that you can do with Extensions and we're going to show two more things that I think are really cool and important and then we'll let you explore on your own. Now, the first is the backend  API. You have full access, as I said earlier, to the Cognigy.AI Node API through which you can interface with Cognigy.AI, Flow logic, etc directly from within an Extension. The Node API contains most of the Code Node actions, which you can check out on our documentation. But it also contains specific things that are not available in Code Nodes like a setNextNode function or a stopExecution function. And if you want to explore the APIs in more detail, you can do that in Intellisense and VS code by pressing control-space to then see the different options that are available in the API.

As you remember, all Cognigy Nodes were also built in the Extensions framework, and there's one feature of the Cognigy Nodes that we haven't looked at yet in the Extensions framework, and that is Child Nodes and Flow logic. An If Node or a Switch Node or an optional Question Nodev have children that are created with them when the Node is created in the Cognigy Flow Editor, and you can do that in the Extensions framework as well. We call them dependencies. The dependencies are configured as part of the Node parameters and the information about its dependencies are then passed into the Node function as an extra parameter. You may remember the function we looked at so far had two parameters: Cognigy and config. Now there's a third parameter, which is called childConfigs that gives you full access to the dependencies of that Node so you can access them, and let's try that out.

Let's take a look at what this would look like, how do we add children to a Node. Now in order to add children, we need to create the Child Nodes themselves first. You can do that in their own file, of course, but you can also do it directly inside the file where the main Node sits, where the Parent Node sits. And I've prepared something here, it is a Node that I call Even Node. It is of type even this is a type you can define whatever you like. It has a defaultLabel which is even and it has a certain appearance. It has a color, it has a text color and it has a variance. Now there is different variance available. Yeah, hexagon, mini and regular. Now mini is a Node of the type like you would see on a Then or Else Node. Hexagon is a big one, like for example a LookUp Node, and regular is just a regular Node. Now there's also some constraints to that Even Node. It's not editable, it's not deletable, it is collapsible, It is not created on its own, It's not movable on its own, and the Parent type is the Test Node. Now, let's not just create one, let's actually create two. So I'm adding another one in. So we have a Node that is called Even and we have a Node that is called Odd and they pretty much look the same.

Now I need to add those as dependencies to my main Test Node here as well. And what I got to do here is first need to add the dependencies. So we say, Ok, which Nodes are actually dependents of this Node. Dependencies has one key which is children, which is an array with the names of those Nodes, and there could be some constraints. So, for example, the Node is now collapsible and the only children we can append to a Test Node are the Even and Odd Nodes. Now, as you can see, we're not referencing really the Nodes here. We're referencing the names, so the types of the Nodes which means we actually have to add the Nodes to our module.ts as well so they're available in the system. Now, we are exporting them from the same file. So we get the Odd Node and Even Node and then we can just add them in here so they will be available in the system as well. Now, this will now create, when we create a new Test Node, it will add an odd and an even path. But of course, we need to do something with that path as well. So we're going to add some logic in here that does a certain thing, depending on if a number is an odd number or an even number.

Now, as described on the slides earlier, we have a third element which we can pass into the function here. Actually, there's a fourth one as well. The third one is childConfigs and the fourth one is the Node ID. childConfigs gives us access to the Child Nodes that we have and depending on that, we can do something. Now, what we can do is that we can, for example, determine what the next Node should be, and we use the api.setNextNode method for that into which we need to pass the ID of a Node to determine, ok, where should we continue on which path should we continue. Now we need to of course, dynamically find the ID of the correct Node. So what we could say,  first we need to define is maybe we say let "oddnodeId" and now we need to find the ID of that Odd Node. For that, we can search through the childConfigs. So we go to childConfigs.find, it will go through all the Child Nodes and we can say, please return the one where child.type= odd. And then maybe we can also do the same for even and we retrieve the one where it's even. Could have done that in a nicer way here, but it's just for illustrative purposes. And now, these can actually be const. Now we can say, Ok, which one is the Node that we want to go with. So next Node is if num by two is zero, so if num is even then it's evenNodeId otherwise it's oddNodeId, and then all we got to do is pass the one in here. Actually, it's the Node, so we have to go ID, ok.

Let's take a look. Compile that again, so now again, what should it do, depending on what we set in num, if it's an even number to go down the even path, otherwise it should go down the odd path. Let's delete the Node. Now let's delete the Extension. I am going to pass in the Extension package and go back to our Flow. Now, one thing you will note is that we will not append new children to existing Nodes because these children are actually created when the Node is placed. So you can see here we now have even and odd but this old Node doesn't have that. So let's delete this old one and let's see, we can select the Connection we already had, and then on the choice we place Number, and here we choose a number. So let's choose an even number, which is 10. So now here we will say "You chose even", and here, let's see, let's say you chose odd. Let's try it out. We execute the Node. It's at number 10 and then it gave me the information and then said, you chose even. Now if I change this, It's going to say you chose odd, right?

So what we saw is how to create Child Nodes and then how to change the direction the Flow is going by using the API set next Node function to determine which of the two paths to go down. I'm sure this was a lot to take in already, and you can get a glimpse of the amazing things that you can do with the Cognigy Extensions Framework. You can create your own Nodes that not just make it easier for business users to interface with systems or expose certain types of functionality. But you can even determine the way that the Flow is executed and a lot more.

Now, we've only really scratched the surface, of course, of what you can do today and you can actually take a look at all the Extensions that we have and the GitHub repo, as mentioned earlier, and look at all the Extensions. There's various different Extensions, some of which use npm packages, like, for example, the Twilio Extension. Here we have this Send SMS function, and as you can see, it is using the standard Twilio package and it is using that to then using Twilio here to send out messages. But there's various other modules that you can look at and get inspiration from. We have modules for Sunshine Conversations, ServiceNow, which is a module that, for example, uses the AXIOS module to interface with ServiceNow directly, also using Connections, and so on. So you can get a lot of inspiration from those modules that we have available. You can contribute to the repo yourself as well. So if you're building Extensions that you would like to make available to others, please do so. We are really looking forward to seeing what you are going to build with the Extensions framework.

Thank you very much for watching our session on Cognigy.AI Extensions. Please don't forget to visit our Cognigy.AI Help Center under support.cognigy.com for additional resources and information and the link to a community where you can ask questions or leave us feedback for this episode. Thank you very much for watching and see you next time.