Next.js Landing Page - Open Chat Widget

This example wires @openchatwidget/sdk into a Next.js App Router project. The POST /api/chat route uses OpenRouter with openai/gpt-5-mini:online (web search enabled).

Open Chat Widget on the Next.js landing page example.

It includes:

a landing page with OpenChatWidget
a client wrapper for the widget
a serverless POST /api/chat route handler

Key files

examples/nextjs-landing-page/app/widget-client.tsx
examples/nextjs-landing-page/app/api/chat/route.ts
examples/nextjs-landing-page/src/landing/pages/LandingPage.tsx

Run it

Install dependencies:

cd /Users/matt8p/Desktop/openchatwidget/examples/nextjs-landing-page
npm install

Configure environment variables:

cp .env.example .env.local

OPENROUTER_API_KEY=your_key_here

Start the dev server:

npm run dev

Open http://localhost:3000. The widget is mounted on the page and sends requests to /api/chat.

View repo folder

Open the full example source on GitHub.