@byorouter/next

Next.js App Router integration for BYORouter - let your users bring their own AI API keys.

Installation

npm install @byorouter/next @byorouter/js @byorouter/node

Peer Dependencies

• next >= 14.0.0
• @byorouter/js >= 0.1.0
• @byorouter/node >= 0.1.0

Quick Start

1. Create the API Route

Create app/api/byorouter/[...slug]/route.ts:

import { createHandlers } from '@byorouter/next';

export const { GET, POST } = createHandlers({
  clientId: process.env.BYOROUTER_CLIENT_ID!,
  apiKey: process.env.BYOROUTER_API_KEY!,

  // Return the current user's ID (null if not authenticated)
  getUserId: async (request) => {
    const session = await auth(); // Your auth solution
    return session?.user?.id ?? null;
  },

  // Get stored connection ID for a user
  getConnectionId: async (userId) => {
    return db.user.findUnique({ where: { id: userId } }).connectionId;
  },

  // Store connection ID for a user
  setConnectionId: async (userId, connectionId) => {
    await db.user.update({
      where: { id: userId },
      data: { connectionId },
    });
  },
});

2. Add Environment Variables

BYOROUTER_CLIENT_ID=byor_xxx
BYOROUTER_API_KEY=sk_live_xxx

3. Use the Endpoints

The handler creates these routes:

| Route | Method | Description | |-------|--------|-------------| | /api/byorouter/connect | GET | Redirects to BYORouter OAuth flow | | /api/byorouter/callback | GET | Handles OAuth callback | | /api/byorouter/models | GET | Returns available models | | /api/byorouter/disconnect | POST | Disconnects the user |

Configuration Options

createHandlers({
  // Required
  clientId: string,
  apiKey: string,
  getUserId: (request: Request) => Promise<string | null>,
  getConnectionId: (userId: string) => Promise<string | null>,
  setConnectionId: (userId: string, connectionId: string | null) => Promise<void>,

  // Optional
  loginUrl: '/login',      // Redirect when not authenticated (default: '/login')
  successUrl: '/',         // Redirect after successful connection (default: '/')
  basePath: '/api/byorouter', // Base path for routes (default: '/api/byorouter')
});

Using with React Hooks

Pair with @byorouter/react for a complete solution:

import { useModels, useConnect } from '@byorouter/react';

function AISettings() {
  const { models, connected } = useModels();
  const { connectUrl, disconnect } = useConnect();

  if (!connected) {
    return <a href={connectUrl}>Connect AI Provider</a>;
  }

  return (
    <div>
      <p>Available models: {models.length}</p>
      <button onClick={disconnect}>Disconnect</button>
    </div>
  );
}

License

MIT