@libreapps/react 1.1.1

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 LibreApps.com
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,347 @@
+# @libreapps/react
+
+React package for building AI-powered applications with generative UI, where users interact through natural language.
+
+## Features
+
+- 🤖 **Generative UI** - Dynamically render React components in AI responses
+- 🔄 **Real-time Streaming** - Stream AI responses with progress tracking
+- 💬 **Message Threads** - Manage conversation history and context
+- 🛠️ **Tool Calling** - Let AI execute functions during conversations
+- 🔌 **Model Context Protocol** - MCP integration for enhanced AI capabilities
+- 🎨 **Component Registry** - Register custom components for AI to use
+- 🔐 **Authentication** - Built-in auth support for user management
+- 📎 **File Attachments** - Handle images, documents, and other files
+- 💡 **Smart Suggestions** - Provide contextual suggestions to users
+- ⚡ **TypeScript Support** - Full type safety and IntelliSense
+
+## Installation
+
+```bash
+npm install @libreapps/react
+# or
+pnpm add @libreapps/react
+# or
+yarn add @libreapps/react
+```
+
+## Quick Start
+
+```tsx
+import { LibreAppsProvider, useMessage } from '@libreapps/react'
+
+function App() {
+  return (
+    <LibreAppsProvider apiKey={process.env.LIBREAPPS_API_KEY}>
+      <ChatInterface />
+    </LibreAppsProvider>
+  )
+}
+
+function ChatInterface() {
+  const { sendMessage, isLoading, lastMessage } = useMessage()
+  
+  const handleSubmit = async (text: string) => {
+    const response = await sendMessage(text)
+    console.log('AI Response:', response)
+  }
+  
+  return (
+    <div>
+      <input onKeyDown={(e) => {
+        if (e.key === 'Enter') {
+          handleSubmit(e.currentTarget.value)
+        }
+      }} />
+      {isLoading && <p>Loading...</p>}
+      {lastMessage && <div>{lastMessage.content}</div>}
+    </div>
+  )
+}
+```
+
+## Core Concepts
+
+### LibreAppsProvider
+
+The root component that provides LibreApps context to your app:
+
+```tsx
+<LibreAppsProvider
+  apiKey="your-api-key"
+  apiUrl="https://api.libreapps.com/v1"
+  model="gpt-4-turbo-preview"
+  components={[/* your components */]}
+  tools={[/* your tools */]}
+  enableStreaming={true}
+  enableMCP={true}
+  onMessage={(message) => console.log('New message:', message)}
+  onError={(error) => console.error('Error:', error)}
+>
+  <YourApp />
+</LibreAppsProvider>
+```
+
+### Generative UI Components
+
+Register components that AI can dynamically render:
+
+```tsx
+const components = [
+  {
+    name: 'weather-card',
+    component: WeatherCard,
+    description: 'Display weather information',
+    parameters: z.object({
+      city: z.string(),
+      temperature: z.number(),
+      conditions: z.string()
+    })
+  }
+]
+
+<LibreAppsProvider components={components}>
+  {/* AI can now render WeatherCard in responses */}
+</LibreAppsProvider>
+```
+
+### Message Hooks
+
+Send messages and handle responses:
+
+```tsx
+// Basic messaging
+const { sendMessage, isLoading, error } = useMessage()
+
+// Streaming responses
+const { streamMessage, currentMessage, progress } = useStreaming()
+
+// Thread management
+const { threads, activeThread, createThread, switchThread } = useThread()
+```
+
+### Tool Calling
+
+Add tools that AI can execute:
+
+```tsx
+const tools = [
+  {
+    name: 'calculator',
+    description: 'Perform calculations',
+    parameters: z.object({
+      expression: z.string()
+    }),
+    execute: async ({ expression }) => {
+      return { result: eval(expression) }
+    }
+  }
+]
+
+<LibreAppsProvider tools={tools}>
+  {/* AI can now use the calculator tool */}
+</LibreAppsProvider>
+```
+
+## Available Hooks
+
+### Core Hooks
+- `useLibreApps()` - Access complete LibreApps context
+- `useMessage()` - Send messages and manage state
+- `useStreaming()` - Stream AI responses in real-time
+- `useThread()` - Manage conversation threads
+
+### Component & Tool Hooks
+- `useComponent()` - Dynamically register/render components
+- `useTool()` - Execute and manage AI tools
+- `useGenerativeUI()` - Generate UI components on the fly
+
+### Utility Hooks
+- `useSuggestions()` - Provide intelligent suggestions
+- `useModelConfig()` - Configure and switch AI models
+- `useAttachments()` - Handle file attachments
+- `useAuth()` - Manage user authentication
+- `useMCP()` - Model Context Protocol integration
+
+## Examples
+
+### Chat Application
+
+```tsx
+import { LibreAppsProvider, useMessage, useStreaming } from '@libreapps/react'
+
+function ChatApp() {
+  const [messages, setMessages] = useState([])
+  const { sendMessage } = useMessage()
+  const { streamMessage, currentMessage, isStreaming } = useStreaming()
+  
+  const handleSend = async (text: string) => {
+    // Add user message
+    setMessages(prev => [...prev, { role: 'user', content: text }])
+    
+    // Stream AI response
+    await streamMessage(text)
+    
+    // Add AI message when complete
+    setMessages(prev => [...prev, { 
+      role: 'assistant', 
+      content: currentMessage 
+    }])
+  }
+  
+  return (
+    <div>
+      {messages.map((msg, i) => (
+        <div key={i} className={msg.role}>
+          {msg.content}
+        </div>
+      ))}
+      {isStreaming && <div>{currentMessage}</div>}
+    </div>
+  )
+}
+```
+
+### Custom Components
+
+```tsx
+// Define a custom visualization component
+function DataChart({ data, type }) {
+  return <Chart data={data} type={type} />
+}
+
+// Register it with LibreApps
+const components = [
+  {
+    name: 'data-chart',
+    component: DataChart,
+    description: 'Visualize data in a chart',
+    parameters: z.object({
+      data: z.array(z.number()),
+      type: z.enum(['bar', 'line', 'pie'])
+    })
+  }
+]
+
+// Use in your app
+<LibreAppsProvider components={components}>
+  <ChatInterface />
+</LibreAppsProvider>
+```
+
+### Tool Integration
+
+```tsx
+const tools = [
+  {
+    name: 'fetchData',
+    description: 'Fetch data from API',
+    parameters: z.object({
+      endpoint: z.string().url()
+    }),
+    execute: async ({ endpoint }) => {
+      const response = await fetch(endpoint)
+      return response.json()
+    }
+  },
+  {
+    name: 'saveToDatabase',
+    description: 'Save data to database',
+    parameters: z.object({
+      collection: z.string(),
+      data: z.any()
+    }),
+    execute: async ({ collection, data }) => {
+      await db.collection(collection).insert(data)
+      return { success: true }
+    }
+  }
+]
+
+<LibreAppsProvider tools={tools}>
+  {/* AI can now fetch data and save to database */}
+</LibreAppsProvider>
+```
+
+## TypeScript
+
+Full TypeScript support with type definitions:
+
+```tsx
+import type { 
+  LibreAppsComponent, 
+  LibreAppsTool, 
+  Message, 
+  Thread 
+} from '@libreapps/react'
+
+const component: LibreAppsComponent = {
+  name: 'my-component',
+  component: MyComponent,
+  description: 'A typed component',
+  parameters: z.object({
+    title: z.string(),
+    count: z.number()
+  })
+}
+
+const tool: LibreAppsTool = {
+  name: 'my-tool',
+  description: 'A typed tool',
+  parameters: z.object({
+    input: z.string()
+  }),
+  execute: async ({ input }) => {
+    return { processed: input.toUpperCase() }
+  }
+}
+```
+
+## API Reference
+
+### LibreAppsProvider Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `apiKey` | `string` | Yes | - | Your LibreApps API key |
+| `apiUrl` | `string` | No | `https://api.libreapps.com/v1` | API endpoint URL |
+| `model` | `string` | No | `gpt-4-turbo-preview` | AI model to use |
+| `components` | `LibreAppsComponent[]` | No | `[]` | Registered components |
+| `tools` | `LibreAppsTool[]` | No | `[]` | Available tools |
+| `initialMessages` | `Message[]` | No | `[]` | Initial conversation |
+| `enableStreaming` | `boolean` | No | `true` | Enable streaming |
+| `enableMCP` | `boolean` | No | `false` | Enable MCP |
+| `onMessage` | `(message: Message) => void` | No | - | Message callback |
+| `onError` | `(error: Error) => void` | No | - | Error callback |
+
+### Hook Options
+
+Most hooks accept configuration options:
+
+```tsx
+const { sendMessage } = useMessage({
+  threadId: 'custom-thread',
+  onSuccess: (message) => console.log('Sent:', message),
+  onError: (error) => console.error('Error:', error),
+  autoRetry: true,
+  maxRetries: 3,
+  retryDelay: 1000
+})
+
+const { streamMessage } = useStreaming({
+  onChunk: (chunk) => console.log('Chunk:', chunk),
+  onComplete: (message) => console.log('Complete:', message),
+  bufferSize: 5,
+  throttleMs: 100
+})
+```
+
+## License
+
+BSD-3-Clause © LibreApps AI, Inc.
+
+## Support
+
+- Documentation: [https://ui.libreapps.com/docs/libreapps-react](https://ui.libreapps.com/docs/libreapps-react)
+- GitHub: [https://github.com/libre-apps/ui](https://github.com/libre-apps/ui)
+- Discord: [https://discord.gg/libreapps](https://discord.gg/libreapps)

package/dist/index.d.mts

@@ -0,0 +1,255 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React$1 from 'react';
+import { z } from 'zod';
+import { ClassValue } from 'clsx';
+
+interface LibreAppsComponent {
+    name: string;
+    component: React$1.ComponentType<any>;
+    description?: string;
+    parameters?: z.ZodType<any>;
+    generateUI?: (params: any) => React$1.ReactElement;
+}
+interface LibreAppsTool {
+    name: string;
+    description: string;
+    parameters: z.ZodType<any>;
+    execute: (params: any) => Promise<any>;
+}
+interface Message {
+    id: string;
+    role: 'user' | 'assistant' | 'system' | 'tool';
+    content: string | React$1.ReactElement;
+    timestamp: Date;
+    threadId: string;
+    toolCalls?: ToolCall[];
+    metadata?: Record<string, any>;
+}
+interface ToolCall {
+    id: string;
+    name: string;
+    arguments: any;
+    result?: any;
+    status: 'pending' | 'running' | 'completed' | 'failed';
+}
+interface Thread {
+    id: string;
+    messages: Message[];
+    createdAt: Date;
+    updatedAt: Date;
+    metadata?: Record<string, any>;
+}
+interface LibreAppsContextValue {
+    apiKey?: string;
+    apiUrl?: string;
+    model?: string;
+    components: Map<string, LibreAppsComponent>;
+    tools: Map<string, LibreAppsTool>;
+    threads: Map<string, Thread>;
+    activeThreadId?: string;
+    sendMessage: (content: string, threadId?: string) => Promise<Message>;
+    streamMessage: (content: string, threadId?: string) => AsyncGenerator<Message>;
+    createThread: (metadata?: Record<string, any>) => Thread;
+    switchThread: (threadId: string) => void;
+    deleteThread: (threadId: string) => void;
+    registerComponent: (component: LibreAppsComponent) => void;
+    unregisterComponent: (name: string) => void;
+    renderComponent: (name: string, props: any) => React$1.ReactElement | null;
+    registerTool: (tool: LibreAppsTool) => void;
+    unregisterTool: (name: string) => void;
+    executeTool: (name: string, params: any) => Promise<any>;
+    isStreaming: boolean;
+    responseStage?: 'thinking' | 'generating' | 'tool-calling' | 'completed';
+    error?: Error;
+}
+interface LibreAppsProviderProps {
+    children: React$1.ReactNode;
+    apiKey?: string;
+    apiUrl?: string;
+    model?: string;
+    components?: LibreAppsComponent[];
+    tools?: LibreAppsTool[];
+    initialMessages?: Message[];
+    onMessage?: (message: Message) => void;
+    onError?: (error: Error) => void;
+    enableStreaming?: boolean;
+    enableMCP?: boolean;
+    mcpServers?: string[];
+}
+declare function LibreAppsProvider({ children, apiKey, apiUrl, model, components: initialComponents, tools: initialTools, initialMessages, onMessage, onError, enableStreaming, enableMCP, // eslint-disable-line @typescript-eslint/no-unused-vars
+mcpServers }: LibreAppsProviderProps): react_jsx_runtime.JSX.Element;
+declare function useLibreApps(): LibreAppsContextValue;
+
+interface UseMessageOptions {
+    threadId?: string;
+    onSuccess?: (message: Message) => void;
+    onError?: (error: Error) => void;
+    autoRetry?: boolean;
+    maxRetries?: number;
+    retryDelay?: number;
+}
+interface UseMessageReturn {
+    sendMessage: (content: string) => Promise<Message>;
+    sendMessageWithAttachments: (content: string, attachments: File[]) => Promise<Message>;
+    isLoading: boolean;
+    error: Error | null;
+    lastMessage: Message | null;
+    clearError: () => void;
+    retry: () => Promise<void>;
+}
+declare function useMessage(options?: UseMessageOptions): UseMessageReturn;
+
+interface UseStreamingOptions {
+    threadId?: string;
+    onChunk?: (chunk: string) => void;
+    onComplete?: (message: Message) => void;
+    onError?: (error: Error) => void;
+    bufferSize?: number;
+    throttleMs?: number;
+}
+interface UseStreamingReturn {
+    streamMessage: (content: string) => Promise<void>;
+    isStreaming: boolean;
+    currentMessage: string;
+    error: Error | null;
+    stopStreaming: () => void;
+    clearMessage: () => void;
+    progress: number;
+}
+declare function useStreaming(options?: UseStreamingOptions): UseStreamingReturn;
+
+declare function cn(...inputs: ClassValue[]): string;
+
+declare function generateId(prefix?: string): string;
+
+declare function parseStream(stream: ReadableStream<Uint8Array>): Promise<string>;
+
+interface UseThreadOptions {
+    maxThreads?: number;
+    autoArchive?: boolean;
+}
+interface UseThreadReturn {
+    threads: Map<string, any>;
+    activeThread: any | undefined;
+    createThread: (metadata?: Record<string, any>) => any;
+    switchThread: (threadId: string) => void;
+    deleteThread: (threadId: string) => void;
+    updateThreadMetadata: (threadId: string, metadata: Record<string, any>) => void;
+    getThreadMessages: (threadId: string) => any[];
+    clearThread: (threadId: string) => void;
+}
+interface UseComponentOptions {
+    lazy?: boolean;
+}
+interface UseComponentReturn {
+    registerComponent: (component: any) => void;
+    unregisterComponent: (name: string) => void;
+    renderComponent: (name: string, props: any) => React.ReactElement | null;
+    getComponent: (name: string) => any | undefined;
+    hasComponent: (name: string) => boolean;
+    listComponents: () => string[];
+}
+interface UseToolOptions {
+    timeout?: number;
+}
+interface UseToolReturn {
+    executeTool: (name: string, params: any) => Promise<any>;
+    registerTool: (tool: any) => void;
+    unregisterTool: (name: string) => void;
+    isExecuting: boolean;
+    lastResult: any | null;
+    error: Error | null;
+}
+interface UseSuggestionsOptions {
+    maxSuggestions?: number;
+    autoRefresh?: boolean;
+    refreshInterval?: number;
+}
+interface UseSuggestionsReturn {
+    suggestions: any[];
+    getSuggestions: (options?: any) => Promise<void>;
+    acceptSuggestion: (suggestion: any) => void;
+    dismissSuggestion: (id: string) => void;
+    isLoading: boolean;
+}
+interface UseModelConfigOptions {
+    defaultModel?: string;
+}
+interface UseModelConfigReturn {
+    currentModel: string;
+    availableModels: any[];
+    switchModel: (modelId: string) => void;
+    updateParameters: (params: any) => void;
+    resetToDefaults: () => void;
+}
+interface UseMCPOptions {
+    autoConnect?: boolean;
+}
+interface UseMCPReturn {
+    connectServer: (config: any) => Promise<void>;
+    disconnectServer: (id: string) => void;
+    connectedServers: any[];
+    executeServerTool: (serverId: string, tool: string, params: any) => Promise<any>;
+    getServerResources: (serverId: string) => any[];
+    isConnected: (serverId: string) => boolean;
+}
+interface UseGenerativeUIOptions {
+    cacheResults?: boolean;
+}
+interface UseGenerativeUIReturn {
+    generateUI: (options: any) => Promise<React.ReactElement>;
+    isGenerating: boolean;
+    generatedComponents: React.ReactElement[];
+    clearComponents: () => void;
+    saveComponent: (name: string, component: React.ReactElement) => void;
+}
+interface UseAuthOptions {
+    provider?: string;
+}
+interface UseAuthReturn {
+    user: any | null;
+    isAuthenticated: boolean;
+    isLoading: boolean;
+    signIn: (options?: any) => Promise<void>;
+    signOut: () => Promise<void>;
+    getToken: () => Promise<string | null>;
+    refreshToken: () => Promise<void>;
+}
+interface UseAttachmentsOptions {
+    maxSize?: number;
+    allowedTypes?: string[];
+    autoUpload?: boolean;
+}
+interface UseAttachmentsReturn {
+    attachments: any[];
+    addAttachment: (file: File) => Promise<any>;
+    removeAttachment: (id: string) => void;
+    clearAttachments: () => void;
+    uploadAttachment: (attachment: any) => Promise<void>;
+    isUploading: boolean;
+    uploadProgress: number;
+}
+
+interface Suggestion {
+    id: string;
+    text: string;
+    metadata?: Record<string, any>;
+}
+interface Model {
+    id: string;
+    name: string;
+    description: string;
+    parameters?: Record<string, any>;
+}
+interface Attachment {
+    id: string;
+    name: string;
+    size: number;
+    type: string;
+    url?: string;
+    file?: File;
+}
+
+declare const VERSION = "1.0.0";
+
+export { type Attachment, type LibreAppsComponent, type LibreAppsContextValue, LibreAppsProvider, type LibreAppsProviderProps, type LibreAppsTool, type Message, type Model, type Suggestion, type Thread, type ToolCall, type UseAttachmentsOptions, type UseAttachmentsReturn, type UseAuthOptions, type UseAuthReturn, type UseComponentOptions, type UseComponentReturn, type UseGenerativeUIOptions, type UseGenerativeUIReturn, type UseMCPOptions, type UseMCPReturn, type UseMessageOptions, type UseMessageReturn, type UseModelConfigOptions, type UseModelConfigReturn, type UseStreamingOptions, type UseStreamingReturn, type UseSuggestionsOptions, type UseSuggestionsReturn, type UseThreadOptions, type UseThreadReturn, type UseToolOptions, type UseToolReturn, VERSION, cn, generateId, parseStream, useLibreApps, useMessage, useStreaming };