npm package: @lastbrain/ai-ui-core
Description: Framework-agnostic core library for LastBrain AI UI Kit
Latest version: 1.0.55

# @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

```bash
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`

```bash
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`:

```typescript
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

```tsx
"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

```bash
# 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:

```typescript
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](https://docs.lastbrain.com/ai-ui-kit/core) for detailed API reference.