@lastbrain/ai-ui-core

Framework-agnostic core library for LastBrain AI UI Kit.

Features

• HTTP client with retry logic and authentication
• TypeScript types for AI models, responses, and status
• Error normalization and handling
• Response parsing utilities

Installation

npm install @lastbrain/ai-ui-core @lastbrain/ai-ui-react
# or
pnpm add @lastbrain/ai-ui-core @lastbrain/ai-ui-react

🔐 Secure Integration Guide

⚠️ NEVER expose your API key in client code!

Step 1: Add your LastBrain API key to .env.local

LB_API_KEY=lb_your_api_key_here
LB_BASE_URL=https://ai.lastbrain.io  # Optional, defaults to this

Step 2: Create a secure API proxy route

For Next.js App Router - Create app/api/lastbrain/[...path]/route.ts:

export { GET, POST } from "@lastbrain/ai-ui-core/route-handlers/nextjs/gateway";

That's it! The package handles all the proxying securely to https://ai.lastbrain.io/api/public/v1/*.

Step 3: Use the React components

"use client";
import { AiProvider, AiTextarea } from "@lastbrain/ai-ui-react";

export default function MyPage() {
  return (
    <AiProvider baseUrl="/api/lastbrain">
      <div className="p-6 space-y-4">
        <h1 className="text-xl font-bold">AI UI Demo</h1>

        <AiTextarea
          placeholder="Describe what you want to generate..."
          onValue={(content) => console.log("AI response:", content)}
        />
      </div>
    </AiProvider>
  );
}

Complete Example

# 1. Install packages
pnpm add @lastbrain/ai-ui-core @lastbrain/ai-ui-react

# 2. Add to .env.local
echo "LB_API_KEY=lb_your_key" >> .env.local

# 3. Create route file
mkdir -p app/api/lastbrain/\[...path\]
cat > app/api/lastbrain/\[...path\]/route.ts << 'EOF'
export { GET, POST } from "@lastbrain/ai-ui-core/route-handlers/nextjs/gateway";
EOF

# 4. Use in your components (see Step 3 above)

Architecture

Your App → /api/lastbrain → Gateway (with LB_API_KEY) → https://ai.lastbrain.io/api/public/v1

The gateway automatically:

• Adds your API key in Authorization header
• Proxies all requests to LastBrain API
• Keeps your API key secure server-side

Direct Usage (Advanced)

For custom implementations without React components:

import { createClient, ErrorCode } from "@lastbrain/ai-ui-core";

// ⚠️ Only use this server-side!
const client = createClient({
  baseUrl: "https://api.lastbrain.io",
  apiKeyId: "lb_your_api_key",
});

// Get models
const models = await client.getModels();

// Generate text
const result = await client.generateText({
  model: "openai/gpt-4o-mini",
  prompt: "Write a story",
});

// Get status
const status = await client.getStatus();

Security Best Practices

✅ DO:

• Store API keys in environment variables (.env.local)
• Create server-side proxy routes
• Use baseUrl="/api/lastbrain" in AiProvider

❌ DON'T:

• Hardcode API keys in client components
• Pass apiKeyId directly in browser code
• Expose .env.local in version control

API Reference

See the full documentation for detailed API reference.