TL;DR
In this tutorial, you'll learn what Generative UI is and how to use it to provide a dynamic user experience within your apps.
You'll also learn how to build an interactive sales dashboard that allows you to add, update, and delete data using an AI copilot.
This practical guide will bring up to date to the cutting edge of frontend & AI-enabled application development. Your users will be grateful you honed these skills.
. We make it easy to integrate powerful AI into your React apps.
Build:
- ChatBot: Context-aware in-app chatbots that can take actions in-app 💬
- CopilotTextArea: AI-powered textFields with context-aware autocomplete & insertions 📝
- Co-Agents: In-app AI agents that can interact with your app & users 🤖
What is Generative UI?
Generative UI refers to UI components that are dynamically generated and updated in real-time based on users' inputs. The AI-embedded software application listens to a user's prompt and generates a UI based on the given instruction. - an open-source copilot framework for building custom AI chatbots, in-app AI agents, and text areas.
- a collection of customizable and reusable UI components.
Project Set up and Package Installation
First, create a Next.js application by running the following code snippet in your terminal:
npx create-next-app generative-ui-with-copilotkit
Install the CopilotKit packages. These packages enable the AI copilot to retrieve data from the React state and make decisions within the application.
npm install @copilotkit/react-ui @copilotkit/react-core @copilotkit/backend recharts
Set up the , , and
First, create a types.d.ts file at the root of the Next.js project and copy the following code snippet into the file:
interface Todo {
id: number;
text: string;
completed: boolean;
}
interface Invoice {
id: number;
status: "Paid" | "Pending" | "Overdue";
amount: number;
method: "Credit Card" | "Paypal" | "Bank Transfer";
}
interface Chart {
month: string;
sales: number;
customers: number;
}
The code snippet above defines the data structure of the various variables used within the application.
Add a components folder within the Next.js app folder and create App, Card, Chart, Checkbox, Nav, and Table components.
cd app
mkdir components && cd components
touch App.tsx Card.tsx Chart.tsx Checkbox.tsx Nav.tsx Table.tsx
Update the App.tsx component to contain the necessary React states and function:
import { useState } from "react";
import ChartComponent from "@/app/components/Chart";
import CardComponent from "@/app/components/Card";
import TableComponent from "@/app/components/Table";
import CheckboxComponent from "@/app/components/Checkbox";
import NavComponent from "@/app/components/Nav";
export default function App() {
//👇🏻 a todo list
const [todoList, setTodoList] = useState<Todo[]>([
{
id: 1,
text: "Learn about CopilotKit implementation",
completed: false,
},
{
id: 2,
text: "Remind Uli about the next project",
completed: false,
},
{
id: 3,
text: "Send an invoice to CopilotKit team",
completed: false,
},
]);
//👇🏻 an invoice list
const [invoiceList, setInvoiceList] = useState<Invoice[]>([
{
id: 1,
status: "Pending",
amount: 1000,
method: "Credit Card",
},
{
id: 2,
status: "Paid",
amount: 2000,
method: "Paypal",
},
{
id: 3,
status: "Overdue",
amount: 3000,
method: "Bank Transfer",
},
]);
//👇🏻 the chart data
const [chartData, setChartData] = useState<Chart[]>([
{ month: "January", sales: 350, customers: 80 },
{ month: "February", sales: 200, customers: 30 },
{ month: "March", sales: 1500, customers: 120 },
{ month: "April", sales: 1050, customers: 190 },
{ month: "May", sales: 1200, customers: 130 },
{ month: "June", sales: 550, customers: 140 },
{ month: "July", sales: 1200, customers: 130 },
]);
//👇🏻 calculates the total sales and number of customers
const calculateTotal = (key: keyof Chart): number => {
if (key === "sales")
return chartData.reduce((acc, item) => acc + item.sales, 0);
return chartData.reduce((acc, item) => acc + item.customers, 0);
};
return (/**-- 👉🏻 UI components 👈🏼 ---*/)
}
Render the following UI components from the App component, each designed to display the invoices, to-do tasks, and sales data.
export default function App() {
//👉🏻 the states and functions
return (
<main>
<NavComponent />
<div className='w-full flex items-center justify-between p-4 md:flex-row space-x-4'>
<div className='lg:w-1/2 h-[300px] lg:mb-0 mb-4 w-full'>
<CardComponent
invoiceLength={invoiceList.length}
todoLength={todoList.length}
totalCustomers={calculateTotal("customers")}
totalSales={calculateTotal("sales")}
/>
</div>
<div className='lg:w-1/2 h-[300px] w-full lg:mb-0 mb-4 '>
<ChartComponent chartData={chartData} />
</div>
</div>
<div className='w-full flex flex-row items-center justify-between lg:space-x-4 p-4'>
<div className='lg:w-1/2 w-full h-full lg:mb-0 mb-8'>
<TableComponent invoiceList={invoiceList} />
</div>
<div className='lg:w-1/2 w-full h-full lg:mb-0 mb-4'>
<CheckboxComponent todoList={todoList} setTodoList={setTodoList} />
</div>
</div>
</main>
);
}
Finally, you can copy the various dashboard components from the and create a new secret key.
accept users’ requests and make decisions using the OpenAI model.
import { CopilotRuntime, OpenAIAdapter } from "@copilotkit/backend";
export const runtime = "edge";
export async function POST(req: Request): Promise<Response> {
const copilotKit = new CopilotRuntime({});
const openaiModel = process.env["OPENAI_MODEL"];
return copilotKit.response(req, new OpenAIAdapter({ model: openaiModel }));
}
To connect the application to the backend API route, copy the code snippet below into the app/page.tsx file.
"use client"
import { CopilotKit } from "@copilotkit/react-core";
import { CopilotPopup } from "@copilotkit/react-ui";
import "@copilotkit/react-ui/styles.css";
import "@copilotkit/react-textarea/styles.css";
import App from "./components/App";
export default function Home() {
return (
<CopilotKit runtimeUrl='/api/copilotkit/'>
<App />
<CopilotPopup
instructions='Help the user update and manipulate data on the chart, table, todo, and card components.'
defaultOpen={true}
labels={{
title: "Data Visualization Copilot",
initial:
"Hello there! I can help you add, edit, and remove data from the various components on the page. You can update the chat, table, and todo list. Let's get started!",
}}
clickOutsideToClose={false}
></CopilotPopup>
</CopilotKit>
);
}
The CopilotKit component wraps the entire application and accepts a runtimeUrl prop that contains a link to the API endpoint. The CopilotKitPopup component adds a chatbot sidebar panel to the application, enabling us to provide various instructions and perform various actions using the AI copilot.
and . You'll learn how to implement this feature shortly.
The useCopilotReadable hook provides the application state to CopilotKit.
import { useCopilotReadable } from "@copilotkit/react-core";
const myAppState = "...";
useCopilotReadable({
description: "The current state of the app",
value: myAppState
});
Now, let’s plug the application states into CopilotKit.
Within the App.tsx component, pass the chartData, invoiceList, and todoList states into CopilotKit.
//👇🏻 pass Chart data to CopilotKit
useCopilotReadable({
description:
"The chart data is a list of sales and customers data for each month. You can update the data for each month. It contains the month, sales, and customers data.",
value: chartData,
});
//👇🏻 pass invoice data to CopilotKit
useCopilotReadable({
description: "The invoice list is a list of invoices that need to be paid. You can add, edit, and remove invoices from the list and also update the status of the invoice. An invoice status can either be Paid, Pending, or Overdue. The acceptable payment methods are Credit Card, Paypal, and Bank Transfer.",
value: invoiceList,
});
//👇🏻 pass todolist data to CopilotKit
useCopilotReadable({
description: "The todo list is a list of tasks that need to be completed. You can add, edit, and remove tasks from the list.",
value: todoList,
});
Automating Various Actions with CopilotKit
We need to allow users to create, update, and delete data from the application. Therefore, let's create actions that do the following using the useCopilotAction hook:
- update the chart data,
- create new invoices,
- delete an invoice,
- update a todo status,
- create new todo,
- delete a todo.
Add an action that updates the chartData to the App.tsx file:
//👇🏻 action to update chartData
useCopilotAction({
name: "updateChartData",
description: "Update the chart data for the a particular month.",
parameters: [
{
name: "month",
type: "string",
description: "The month to update the data for.",
required: true,
},
{
name: "sales",
type: "number",
description: "The sales data for the month.",
required: true,
},
{
name: "customers",
type: "number",
description: "The customers data for the month.",
required: true,
},
],
render: ({ status, args }) => {
const { month, sales, customers } = args;
if (month === undefined || sales === undefined || customers === undefined) return "";
if (typeof month !== "string" || typeof sales !== "number" || typeof customers !== "number") return "";
const updateChart = () => {
setChartData((prev) => {
return prev.map((item) => {
if (item.month === month) {
return { month, sales, customers };
}
return item;
});
});
};
return (
<div className="w-full p-2">
<p className="text-sm text-blue-400 mb-2">Status: {status}</p>
<ChartComponent chartData={[{month, sales, customers}]} />
<button className="px-4 py-2 bg-blue-400 text-white shadow rounded-md" onClick={updateChart}>Update</button>
</div>
)
},
handler: async () => {
// Do nothing
},
});
- From the code snippet above,
- The action accepts an array of parameters that describes the attributes of the
chartDataReact state. - The
renderproperty displays the result of the user's prompt and a button that allows the user to add the data to the page.
- The action accepts an array of parameters that describes the attributes of the
Finally, add the actions that create, update, and delete todos.
//👇🏻 action to update todo status
useCopilotAction({
name: "toggleTodo",
description: "Toggle the completion status of a todo item.",
parameters: [
{
name: "id",
type: "number",
description: "The id of the todo item to toggle.",
required: true,
},
],
render: ({ status, args }) => {
const { id } = args;
if (id === undefined) return "";
const getTodo = todoList.find((item) => item.id === id);
if (!getTodo) return "";
const toggleTodo = () => {
setTodoList(
todoList.map((todo) => {
if (todo.id === id) {
return { ...todo, completed: !todo.completed };
}
return todo;
})
);
};
return (
<div className="w-full p-2">
<p className="text-sm text-blue-400 mb-2">Status: {status}</p>
<CheckboxComponent todoList={[getTodo]} setTodoList={setTodoList} />
<button className="px-4 py-2 bg-blue-400 text-white shadow rounded-md" onClick={toggleTodo}>Toggle Todo</button>
</div>
)
},
handler: async () => {
// Do nothing
},
})
//👇🏻 action to add new todo
useCopilotAction({
name: "addNewTodo",
description: "Add new todo to the todo list",
parameters: [
{
name: "text",
type: "string",
description: "The text of the todo item.",
required: true,
},
],
render: ({ status, args }) => {
const { text } = args;
if (text === undefined) return "";
const addTodo = () => {
setTodoList((prev) => {
return [...prev, { id: prev.length + 1, text, completed: false }];
});
};
return (
<div className="w-full p-2">
<p className="text-sm text-blue-400 mb-2">Status: {status}</p>
<CheckboxComponent todoList={[...todoList, { id: todoList.length + 1, text, completed: false }]} setTodoList={setTodoList} />
<button className="px-4 py-2 bg-blue-400 text-white shadow rounded-md" onClick={addTodo}>Add to Page</button>
</div>
)
},
handler: async () => {
// Do nothing
},
});
//👇🏻 action to delete todo
useCopilotAction({
name: "deleteTodo",
description: "Remove todo from the todo list",
parameters: [
{
name: "id",
type: "number",
description: "The id of the todo item to remove.",
required: true,
},
],
render: ({ status, args }) => {
const { id } = args;
if (id === undefined) return "";
const getTodo = todoList.find((item) => item.id === id);
if (!getTodo) return "";
const deleteTodo = () => {
setTodoList((prev) => {
return prev.filter((item) => item.id !== id);
});
};
return (
<div className="w-full p-2">
<p className="text-sm text-blue-400 mb-2">Status: {status}</p>
<CheckboxComponent todoList={[getTodo]} setTodoList={setTodoList} />
<button className="px-4 py-2 bg-red-500 text-white shadow rounded-md" onClick={deleteTodo}>Delete</button>
</div>
)
},
handler: async ({ id }) => {
// Do nothing
},
});
The toggleTodo action toggles the status of a todo. The addNewTodo action creates a new todo, and the deleteTodo action deletes a todo via its ID.
Thank you for reading!
SOCIAL SHARE CARD GENERATOR