Getting Started with Better UI

This guide will walk you through the initial steps to install Better UI and set up your first AI-first tool. For a broader understanding of Better UI's philosophy and features, refer to the [Better UI Overview] page.

1. Installation

To begin, you need to install Better UI and its peer dependency, Zod, which is used for schema definition.

2. Quick Start: Your First Tool

Let's create a simple weather tool that can retrieve weather information for a given city and display it using a React component.

3. Understanding the Code

Let's break down each part of the weather tool definition:

1. Tool Definition (tool({ ... }))

• tool({ ... }): This is the core function for creating a new tool.
• name: A unique identifier for your tool (e.g., weather, search, counter). This is how AI models will reference it.
• description: A human-readable description of what the tool does. This is crucial for AI models to understand when to use your tool.
• input: A Zod schema↗ defining the expected input parameters for the tool. Better UI leverages Zod for robust type-safety and validation. Here, city is a required string.
• output: An optional Zod schema defining the expected structure of the data returned by the tool. This also contributes to type-safety throughout your application.

2. Server Implementation (.server())

• The .server() method defines the actual logic that executes the tool.
• Server-side execution: This code is designed to run in a Node.js environment (e.g., an API route, a server component). This means it can safely access databases, environment variables, or other sensitive server-only resources.
• Input destructuring: The input defined by your input schema is automatically type-safe and available as arguments to your handler (e.g., { city }).
• Return value: The function must return data that conforms to your output schema.

3. View for Rendering Results (.view())

• The .view() method is Better UI's key differentiator, allowing you to define a React component that renders the tool's output.
• React Component: It takes a function that receives the data (which conforms to your output schema) and returns a React element.
• Seamless Integration: Once defined, this view can be automatically rendered when the tool is used in a React component via the useTool hook or by AI assistants that support UI rendering.

4. Next Steps

With your first tool defined, you're ready to integrate it into your React application using the useTool hook or expose it to an AI model using toAITool().

For a deeper dive into using these tools in a React application and integrating with AI SDKs, refer to the other sections of the Better UI documentation.