react-ai-connect

Minimal, extensible React + Next.js library to use OpenRouter (and others) with simple hooks.

Features

• Text & multimodal chat via useAI
• Image generation via useImageAI
• Drop-in provider using the OpenAI SDK pointed at OpenRouter
• Minimal API: just provide your OpenRouter API key and model name

Reference: OpenRouter Quickstart using the OpenAI SDK (https://openrouter.ai/docs/quickstart).

Install

npm install react-ai-connect openai
# or
yarn add react-ai-connect openai

Quick start (React / Next.js)

Text chat:

import React from 'react';
import { AIProvider, useAI } from 'react-ai-connect';

export default function App() {
  return (
    <AIProvider
      provider="openai"
      apiKey={process.env.NEXT_PUBLIC_OPENROUTER_API_KEY!}
      options={{
        model: 'openai/gpt-4o-mini', // any model available on OpenRouter
        // baseUrl defaults to 'https://openrouter.ai/api/v1'
        // optional attribution headers for OpenRouter leaderboards:
        // extraHeaders: { 'HTTP-Referer': 'https://your-site.com', 'X-Title': 'Your App' },
      }}
    >
      <Chat />
    </AIProvider>
  );
}

function Chat() {
  const { messages, sendMessage, loading } = useAI('You are a helpful assistant.');
  return (
    <div>
      {messages.map((m, i) => (
        <div key={i}>
          <strong>{m.role}</strong>: {typeof m.content === 'string' ? m.content : JSON.stringify(m.content)}
        </div>
      ))}
      <button disabled={loading} onClick={() => sendMessage('Hello AI')}>Send</button>
    </div>
  );
}

Multimodal example (image + text)

The library passes multimodal message parts directly to OpenRouter via the OpenAI SDK. Provide content as an array of parts.

import { useAI } from 'react-ai-connect';

function MultimodalExample() {
  const { messages, setMessages, sendMessage } = useAI();

  async function askAboutImage(url: string) {
    setMessages([
      {
        role: 'user',
        content: [
          { type: 'text', text: 'What is in this image?' },
          { type: 'image_url', image_url: { url } },
        ],
      },
    ]);
    await sendMessage(''); // triggers send with current messages
  }

  return <button onClick={() => askAboutImage('https://example.com/cat.png')}>Analyze Image</button>;
}

Image generation

import { useImageAI } from 'react-ai-connect';

function ImageGen() {
  const { image, generateImage, loading } = useImageAI();
  return (
    <div>
      <button disabled={loading} onClick={() => generateImage('A watercolor painting of a fox')}>Generate</button>
      {image && <img src={image} alt="generated" />}
    </div>
  );
}

Configuration

• apiKey: Your OpenRouter API key
• options.model: Any model slug available on OpenRouter (e.g., openai/gpt-4o, anthropic/claude-3.5-sonnet)
• options.baseUrl: Defaults to https://openrouter.ai/api/v1
• options.extraHeaders: Optional attribution headers (HTTP-Referer, X-Title)

Security notes

• In production, consider routing through your own server proxy (e.g., /api/openai) to keep secrets server-side.
• The provider supports proxy paths by skipping client SDK auth when baseUrl starts with /.

License

MIT