straico-custom-provider/examples/integration-example.md

Straico custom provider for Vercel AI SDK

# Integration with Next.js and Vercel AI SDK

## Setup in a Next.js App

1. First, install the Straico custom provider and Vercel AI SDK:

```bash
yarn add straico-custom-provider ai next
```

2. Setup your environment variables in `.env.local`:

```
STRAICO_API_KEY=your_api_key_here
```

3. Create a route handler in your Next.js app:

```typescript
// app/api/chat/route.ts
import { straico } from 'straico-custom-provider';
import { StreamingTextResponse, Message } from 'ai';

export const runtime = 'edge';

export async function POST(req: Request) {
  const { messages, fileUrls, youtubeUrls } = await req.json();
  
  // Get the latest message from the user
  const lastUserMessage = messages.filter((m: Message) => m.role === 'user').pop();

  // Initialize the Straico provider with the model you want to use
  const model = straico('anthropic/claude-3-haiku:beta', {
    fileUrls,
    youtubeUrls
  });

  // Create a stream from the provider
  const stream = await model.doStream([
    { type: 'text', text: lastUserMessage.content }
  ], {});

  // Convert the stream to a format that Vercel AI SDK can use
  return new StreamingTextResponse(stream);
}
```

4. Use the chat interface in your frontend:

```tsx
// app/page.tsx
'use client'

import { useChat } from 'ai/react';
import { useState } from 'react';

export default function Chat() {
  const [fileUrl, setFileUrl] = useState('');
  const [youtubeUrl, setYoutubeUrl] = useState('');
  
  const { messages, input, handleInputChange, handleSubmit } = useChat({
    // Pass the file and YouTube URLs to the API
    body: {
      fileUrls: fileUrl ? [fileUrl] : [],
      youtubeUrls: youtubeUrl ? [youtubeUrl] : []
    }
  });

  return (
    <div className="flex flex-col w-full max-w-xl mx-auto py-24 px-4">
      <h1 className="text-3xl font-bold mb-8">Straico Chat</h1>
      
      <div className="space-y-4 mb-4">
        <div>
          <label className="block mb-1">File URL:</label>
          <input 
            type="text" 
            value={fileUrl} 
            onChange={(e) => setFileUrl(e.target.value)}
            className="w-full p-2 border rounded"
            placeholder="https://example.com/file.csv"
          />
        </div>
        
        <div>
          <label className="block mb-1">YouTube URL:</label>
          <input 
            type="text" 
            value={youtubeUrl} 
            onChange={(e) => setYoutubeUrl(e.target.value)}
            className="w-full p-2 border rounded"
            placeholder="https://www.youtube.com/watch?v=example"
          />
        </div>
      </div>
      
      <div className="flex-1 overflow-y-auto mb-4 space-y-4">
        {messages.map((m) => (
          <div key={m.id} className={`p-3 rounded-lg ${
            m.role === 'user' ? 'bg-blue-100 ml-auto' : 'bg-gray-100'
          }`}>
            <p>{m.content}</p>
          </div>
        ))}
      </div>
      
      <form onSubmit={handleSubmit} className="flex gap-2">
        <input
          value={input}
          onChange={handleInputChange}
          placeholder="Say something..."
          className="flex-1 p-2 border rounded"
        />
        <button 
          type="submit" 
          className="px-3 py-2 bg-blue-500 text-white rounded"
        >
          Send
        </button>
      </form>
    </div>
  );
}
```

## Advanced Configuration

You can create a custom configuration for the Straico provider:

```typescript
// utils/straico-config.ts
import { createStraicioProvider } from 'straico-custom-provider';

export const straico = createStraicioProvider({
  apiKey: process.env.STRAICO_API_KEY,
  // You can set a custom base URL if needed
  // baseURL: 'https://custom-proxy.example.com/v1',
  // Add custom headers
  headers: {
    'X-Custom-Header': 'value'
  }
});
```

Then import this custom configuration in your API routes.