Originally forked from nextjs-example

This is a updated version of the Next.js demo application for the OpenRouter SDK. Main changes include:

• Upgraded to Next.js 16
• OAuth re-implementation

Original README below (adapted as needed):

This is a demonstration application that shows how to create a chat interface using the OpenRouter SDK. The app implements OAuth 2.0 authentication flow and provides a complete chat experience with multiple AI models.

⚠️ Security Notice: This demo application stores unencrypted API keys in localStorage for demonstration purposes only. Do not use this approach in production applications.

• OAuth 2.0 Integration: Secure authentication flow with OpenRouter
• Multi-Model Chat: Access to various AI models (GPT-4, Claude, Gemini, etc.)
• Real-time Streaming: Live response streaming for better user experience
• Modern UI: Clean interface built with Tailwind CSS and shadcn/ui components
• TypeScript: Full type safety with the OpenRouter SDK

• Node.js 22 or later
• An OpenRouter account
• OpenRouter application configured with OAuth callback

1. Clone the repository and navigate to the example directory:

git clone <repository-url>
cd or-nextchat

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

4. Open http://localhost:3000 in your browser

The application is pre-configured to use http://localhost:3000/ as the OAuth callback URL. If you need to change this:

1. Update the OAUTH_CALLBACK_URL in src/lib/config.ts
2. Configure your OpenRouter application with the matching callback URL

No environment variables are required for this demo, as it uses client-side OAuth flow.

1. Connect Your Account: Click "Connect OpenRouter Account" to authenticate via OAuth
2. Start Chatting: Once connected, navigate to the chat interface
3. Select Models: Choose from available AI models using the dropdown menu
4. Send Messages: Type your message and press Enter to send

src/
├── app/
│   ├── page.tsx              # Home page with OAuth flow
│   ├── chat/page.tsx         # Chat interface
│   └── oauth/callback/       # OAuth callback handler
├── components/ui/            # Reusable UI components
├── lib/
│   ├── config.ts            # OAuth and app configuration
│   └── hooks/               # Custom React hooks
└── ...

• Uses OpenRouter's OAuth 2.0 implementation
• Handles authorization codes and token exchange
• Stores credentials in localStorage (demo only)

• Implements streaming responses using the OpenRouter SDK
• Supports multiple AI models through a single interface
• Real-time message updates with proper state management

import { OpenRouterCore } from "@openrouter/sdk/core";
import { chatSend } from "@openrouter/sdk/funcs/chatSend";

const openRouter = new OpenRouterCore({ apiKey });
const result = await chatSend(openRouter, {
  model: "openai/gpt-4o",
  messages: conversationHistory,
  stream: true,
});

• npm run dev - Start development server
• npm run build - Build for production
• npm run start - Start production server
• npm run lint - Run ESLint

This project is licensed under the MIT License, see the LICENSE file for details.