additional-instructions.mdx 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. ---
  2. title: "Additional Instructions"
  3. description: "Provide additional context and user information to your agents to enhance their responses."
  4. icon: "message"
  5. ---
  6. ## Overview
  7. Additional instructions allow you to pass additional context to the agent at the time of the request. Typically, this is used to pass session or specific user data. For example, if user is already signed in on your application, and you know their email, there is no reason for the agent to as it again. So, you can simply add in additional instructions: "The current user's email is [myemail@example.com](mailto:myemail@example.com) please use this to submit all customer support tickets"
  8. ## Usage
  9. ### Widgets
  10. To use **additional instructions** in widgets, simply add them in the **third parameter** in the ChatComponent ****`init()` function like below.
  11. ```html
  12. <!DOCTYPE html>
  13. <html lang="en">
  14. <head>
  15. <meta charset="UTF-8" />
  16. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  17. <title>My Travel Planner</title>
  18. </head>
  19. <body>
  20. <script
  21. defer
  22. src="https://openai-widget.web.app/ChatComponent.bundle.js"
  23. ></script>
  24. <script>
  25. document.addEventListener("DOMContentLoaded", function () {
  26. // Check if the chat container exists
  27. var chatContainer = document.getElementById("chat-container");
  28. // If the chat container doesn't exist, create it
  29. if (!chatContainer) {
  30. chatContainer = document.createElement("div");
  31. chatContainer.id = "chat-container";
  32. document.body.appendChild(chatContainer);
  33. }
  34. let additionalInstructions = "User's favorite city is Paris."
  35. // userId should be defined somewhere in your application
  36. //additionalInstructions = "The current user id is" + userId
  37. // Initialize the Chat component
  38. if (window.ChatComponent) {
  39. ChatComponent.init("<your-widget-id>", "#chat-container", additionalInstructions);
  40. } else {
  41. console.error("ChatComponent is not available");
  42. }
  43. });
  44. </script>
  45. </body>
  46. </html>
  47. ```
  48. Here's an example of the **Widget** response based on this input:
  49. ![widget-screenshot.png](/images/additional-instructions-example.webp)
  50. ### CustomGPTs
  51. To use **additional instruction with CustomGPTs**, add a **script tag** to handle your instructions or dynamic data to the **Custom GPT**. Here's an example of how you can extend the above HTML code with a script:
  52. ```html
  53. <!DOCTYPE html>
  54. <html lang="en">
  55. <head>
  56. <meta charset="UTF-8" />
  57. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  58. <title>My Travel Planner</title>
  59. </head>
  60. <body>
  61. <iframe
  62. src="https://agencii.ai/custom-gpt/<your-custom-gpt-id>"
  63. width="800"
  64. height="800"
  65. id="custom-gpt-iframe"
  66. data-additional-instructions="User wants to visit Paris."
  67. ></iframe>
  68. <script>
  69. const iframe = document.getElementById("custom-gpt-iframe");
  70. window.addEventListener("message", (event) => {
  71. if (event.data === "iframe-ready" && event.origin === "https://agencii.ai") {
  72. // Get additional instructions from the HTML data attribute or use your own logic to set it
  73. let additionalInstructions = iframe.getAttribute("data-additional-instructions") || "";
  74. // userEmail should be defined somewhere in your application
  75. // additionalInstructions += "Current user's email is " + userEmail
  76. // Send the additional instructions to the iframe
  77. iframe.contentWindow.postMessage(
  78. {
  79. type: "additionalInstructions",
  80. value: additionalInstructions,
  81. },
  82. "https://agencii.ai"
  83. );
  84. }
  85. });
  86. </script>
  87. </body>
  88. </html>
  89. ```
  90. Here's an example of the **Custom GPT's** response based on this input:
  91. ![custom-gpt-screenshot.png](/images/custom-gpt-screenshot.webp)
  92. ### API
  93. For web api, simply use `additionalInstructions` in the `get_response` POST endpoint. For more details, see: [API reference](/platform/integrations/api/get-response)