diff --git a/docs/images/gen-ui-example.png b/docs/images/gen-ui-example.png new file mode 100644 index 000000000..a3beb983b Binary files /dev/null and b/docs/images/gen-ui-example.png differ diff --git a/docs/images/weather.png b/docs/images/weather.png new file mode 100644 index 000000000..36e150efd Binary files /dev/null and b/docs/images/weather.png differ diff --git a/docs/mint.json b/docs/mint.json index 9634ac772..fca067c65 100644 --- a/docs/mint.json +++ b/docs/mint.json @@ -50,7 +50,8 @@ "group": "Copilot widget", "pages": [ "widget/embed", - "widget/styling" + "widget/styling", + "widget/gen-ui" ] }, { diff --git a/docs/widget/gen-ui.mdx b/docs/widget/gen-ui.mdx new file mode 100644 index 000000000..37568145b --- /dev/null +++ b/docs/widget/gen-ui.mdx @@ -0,0 +1,218 @@ +--- +title: "Responding with UI" +description: "Learn how to respond to user input with a UI." +--- + +The copilot offer the ability to respond with highly customizable UIs. This way you can create a more interactive experience for your users. + + +These UIs can be used for a variety of purposes, such as: + +- Displaying information in a more user-friendly way +- Collecting user input +- Providing a more interactive experience for the user (from simple buttons to complex forms) +- Showing progress or status updates, videos, images, and more +- Toggle dark mode, change language, and other settings. + +## Example + +We will create a simple copilot that have access to real time weather data and display it in a UI. + +- After creating the copilot, create a new action called `getTheWeather`, make sure the action type is `GET`, and pass the following URL: + ``` + https://api.open-meteo.com/v1/forecast?latitude=52.52&longitude=13.41¤t=temperat[…]m&hourly=temperature_2m,relative_humidity_2m,wind_speed_10m + ``` + + +You should have seomthing like this image: + + ![getTheWeather](images/weather.png) + + +- Now, embed the copilot using our React component : + + ```jsx + import { CopilotWidget, Root } from "@openchatai/copilot-widget"; + import { GetWetherDataRenderer } from "./components/WeatherRenderer"; + + function App() { + return ( +