Azure OpenAI Service
An Azure service that provides access to OpenAI’s GPT-3 models with enterprise capabilities.
How to add a guide prompt on Azure OpenAI web app page
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(28.799999999999997, 57.99999999999999%, 12%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3EAB%3C/text%3E%3C/svg%3E)
Amir Basha
40
Reputation points
Hi, I'm new in customizing web app for Azure Open Ai. I've managed to change logo, title but how to add this guide like button as the picture below?
Azure OpenAI Service
Azure Static Web Apps
Azure Static Web Apps
An Azure service that provides streamlined full-stack web app development.
{count} votes
-
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(204.8, 44%, 29%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3ESS%3C/text%3E%3C/svg%3E)
Saurabh Sharma 23,866 Reputation points Microsoft Employee Moderator2024-03-11T21:41:48.4133333+00:00 Hi @Amir Basha
Welcome to Microsoft Q&A! Thanks for posting the question.
I am assuming you are using this sample app repo for your web application. If you want to change the button, you need to update the image path in QuestionInput.tsx file over here.
- Update the import Send to a new image source.
Please let me know if you have any other questions.
Thanks
Saurabh
- Update the import Send to a new image source.
-
Amir Basha 40 Reputation points
2024-03-12T06:06:42.3433333+00:00 Hi, I think you might misunderstood my question. I don't want to change the send button but instead how to add "try these prompt" and "limitation" text box as the image before.
-
Saurabh Sharma 23,866 Reputation points Microsoft Employee Moderator
2024-03-12T21:45:52.97+00:00 @Amir Basha got it. Have you deployed this application from Azure Open AI Studio playground ?
because I have deployed the web application from the playground, but my UI is different (see below) -
Thanks
Saurabh
-
Amir Basha 40 Reputation points
2024-03-12T22:12:53.2566667+00:00 the image is from other sources... and yes I deployed it from Open Ai studio... I just need to know how to the prompt example thing
-
Saurabh Sharma 23,866 Reputation points Microsoft Employee Moderator
2024-03-20T17:34:16.32+00:00 -
Amir Basha 40 Reputation points
2024-03-21T01:41:34.0566667+00:00 is changing the layout.tsx will able to get like the image above that I'm highlighting?
-
Saurabh Sharma 23,866 Reputation points Microsoft Employee Moderator
2024-03-21T21:55:43.0733333+00:00 @Amir Basha sorry but I don't have expertise in react but based on web content I believe you need to update that page. However, you may need to look into the code structure to understand what components can be added to the page. Thanks.
-
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(35.2, 70%, 13%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3EHB%3C/text%3E%3C/svg%3E)
Harsh Bangad 85 Reputation points2025-03-11T21:33:41.5966667+00:00 Hi, were you able to modify and add the prompt? I am in similar situation and trying to understand how to modify the layout?
-
Amir Basha 40 Reputation points
2025-03-12T07:39:24.23+00:00 Hi @Harsh Bangad, until now I'm not able to add the prompt. User still needs to copy and paste in the dialogue box.
Sign in to comment
Sign in to answer