Getting Started with LibreApps React

Build AI-powered applications with generative UI using @libreapps/react

Getting Started with @libreapps/react

LibreApps React is a comprehensive React package for building AI-powered applications with generative UI, where users interact through natural language. Use LibreApps to build AI chats, copilots, or completely custom AI interactions.

Installation

Install the LibreApps React package in your project:

npm install @libreapps/react
# or
pnpm add @libreapps/react
# or
yarn add @libreapps/react

Quick Start

1. Wrap Your App with LibreAppsProvider

The LibreAppsProvider component provides the necessary context for all LibreApps features:

import { LibreAppsProvider } from "@libreapps/react"

export function App() {
  return (
    <LibreAppsProvider
      apiKey={process.env.LIBREAPPS_API_KEY}
      components={
        [
          /* your components */
        ]
      }
      tools={
        [
          /* your tools */
        ]
      }
    >
      <YourAIApp />
    </LibreAppsProvider>
  )
}

2. Send Messages

Use the useMessage hook to send messages to the AI:

import { useMessage } from "@libreapps/react"

function ChatInterface() {
  const { sendMessage, isLoading, lastMessage } = useMessage()

  const handleSubmit = async (content: string) => {
    const response = await sendMessage(content)
    console.log("AI Response:", response)
  }

  return (
    <div>
      <input
        onKeyDown={(e) => {
          if (e.key === "Enter") {
            handleSubmit(e.currentTarget.value)
          }
        }}
      />
      {isLoading && <p>Thinking...</p>}
      {lastMessage && <p>{lastMessage.content}</p>}
    </div>
  )
}

3. Stream Responses

For real-time streaming of AI responses:

import { useStreaming } from "@libreapps/react"

function StreamingChat() {
  const { streamMessage, currentMessage, isStreaming } = useStreaming()

  const handleStream = async (content: string) => {
    await streamMessage(content)
  }

  return (
    <div>
      <button onClick={() => handleStream("Tell me a story")}>
        Stream Response
      </button>
      {isStreaming && <p>Streaming...</p>}
      <div>{currentMessage}</div>
    </div>
  )
}

Core Concepts

Generative UI Components

import { LibreAppsProvider } from "@libreapps/react"

// Define a custom component
function WeatherCard({ city, temperature, conditions }) {
  return (
    <div className="weather-card">
      <h3>{city}</h3>
      <p>{temperature}°F</p>
      <p>{conditions}</p>
    </div>
  )
}

// Register it with LibreApps
const components = [
  {
    name: "weather-card",
    component: WeatherCard,
    description: "Displays weather information for a city",
    parameters: z.object({
      city: z.string(),
      temperature: z.number(),
      conditions: z.string(),
    }),
  },
]

function App() {
  return (
    <LibreAppsProvider components={components} apiKey="...">
      <YourApp />
    </LibreAppsProvider>
  )
}

Message Threads

Manage conversation history with threads:

import { useThread } from "@libreapps/react"

function ThreadManager() {
  const { threads, activeThread, createThread, switchThread, deleteThread } =
    useThread()

  const handleNewConversation = () => {
    const thread = createThread({ name: "New Chat" })
    switchThread(thread.id)
  }

  return (
    <div>
      <button onClick={handleNewConversation}>New Chat</button>
      <ul>
        {Array.from(threads.values()).map((thread) => (
          <li key={thread.id}>
            <button onClick={() => switchThread(thread.id)}>
              {thread.metadata?.name || thread.id}
            </button>
          </li>
        ))}
      </ul>
    </div>
  )
}

Tool Calling

Add tools that the AI can execute during conversations:

import { z } from 'zod'

const tools = [
  {
    name: 'calculate',
    description: 'Perform mathematical calculations',
    parameters: z.object({
      expression: z.string()
    }),
    execute: async ({ expression }) => {
      // Safely evaluate the expression
      const result = eval(expression) // Use a safe math library in production
      return { result }
    }
  },
  {
    name: 'fetchData',
    description: 'Fetch data from an API',
    parameters: z.object({
      endpoint: z.string(),
      method: z.enum(['GET', 'POST'])
    }),
    execute: async ({ endpoint, method }) => {
      const response = await fetch(endpoint, { method })
      return response.json()
    }
  }
]

<LibreAppsProvider tools={tools} apiKey="...">
  <App />
</LibreAppsProvider>

Configuration

LibreAppsProvider Props

Prop	Type	Description	Default
`apiKey`	`string`	Your LibreApps API key	Required
`apiUrl`	`string`	API endpoint URL	`https://api.libreapps.com/v1`
`model`	`string`	LLM model to use	`gpt-4-turbo-preview`
`components`	`LibreAppsComponent[]`	Generative UI components	`[]`
`tools`	`LibreAppsTool[]`	Tools for the AI to use	`[]`
`initialMessages`	`Message[]`	Initial conversation	`[]`
`enableStreaming`	`boolean`	Enable response streaming	`true`
`enableMCP`	`boolean`	Enable Model Context Protocol	`false`
`onMessage`	`(message: Message) => void`	Message callback	-
`onError`	`(error: Error) => void`	Error callback	-

Environment Variables

Set up your environment variables:

# .env.local
LIBREAPPS_API_KEY=your-api-key
NEXT_PUBLIC_LIBREAPPS_API_URL=https://api.libreapps.com/v1

TypeScript Support

LibreApps React is built with TypeScript and provides complete type definitions:

import type { LibreAppsComponent, LibreAppsTool, Message, Thread } from "@libreapps/react"

// Fully typed components
const typedComponent: LibreAppsComponent = {
  name: "my-component",
  component: MyComponent,
  description: "A typed component",
  parameters: z.object({
    title: z.string(),
    count: z.number(),
  }),
}

Next Steps

Vite LibreApps React Hooks