Now let’s design the widget that pops up whenever you use ChatGPT in Unreal Engine. We will be creating editor utility widgets, which are similar to standard widgets but with some differences. To create an editor utility widget, right-click and go to Editor Utilities. From there, you can create an editor utility blueprint or an editor utility widget. For this tutorial, we will create an editor utility widget called ‘W ChatGPT’.
Editor utility widgets allow you to run them in the editor and assign specific tasks to them. They have all the power of a standard widget, so you can design and build them using the standard widget editor.
To start designing the widget, delete the canvas panel and add a grid panel called ‘Main GP’. Create one column and three rows. Set the heights of the rows to 0.75, 0.2, and 0.05.
Next, add a scroll box called ‘Output SB’ to the top section of the grid panel. This scroll box will display the information that ChatGPT gives back to us after we’ve asked a question. Inside the scroll box, add a multi-line text box called ‘Output DB’ and set its size to fill. Set the font family to Roboto.
Now, add another scroll box called ‘Input GP’ below the main grid panel. This scroll box will contain the input section. Add an image called ‘Input Line Image’ to create a visual break between the output and input sections. Set the size of the image to 2x2.
Inside the input section, add a multi-line text box called ‘Input TB’ and set it to fill. Set the font family to Roboto. Set the hint text to ‘Input Question’.
Finally, add a button called ‘Submit BTN’ at the bottom of the main grid panel. Inside the button, add a standard text block called ‘Submit Text’ and set its text to ‘Submit’. Change the size of the button to 10 to ensure it appears properly in the editor.
Compile and save the widget. This completes the design of the ChatGPT widget.
