Making a UI2 App

Let's start by making our first UI2 application. As a reminder, we'll be making a simple todo app powered by UI2, with the following features integrated in the Intent Interface:

Add todos
Mark todos as complete

Let's start by setting up our project. We'll be using Next.js as our template.

Create a Next.js App

npx create-next-app@latest

Walk through the app creation steps.

TypeScript Support

UI2 is written in TypeScript and has many amazing features only available in TypeScript.

We'll be using TypeScript and Tailwind CSS.

Install UI2

Use npm, or your favorite package manager.

npm i ui2-sdk

Install Other Dependencies

Use npm, or your favorite package manager.

npm i zod @ai-sdk/cerebras

Prepare the Files

Put the following code in your page.tsx:

"use client";
import { useUI2 } from "ui2-sdk/react";
 
export default function Page() {
	return (
		<div>
			<h1>Hello UI2!</h1>
		</div>
	);
}

Note how we are importing the useUI2 hook from ui2-sdk/react instead of just ui2-sdk. This helps organize the features of UI2.

Run Your App

Finally, run your app with the following command:

npm run dev

Keep the server open to see changes as we change our app.