Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.openchatwidget.com/llms.txt

Use this file to discover all available pages before exploring further.

This example wires @openchatwidget/sdk into a Next.js App Router portfolio site. The POST /api/chat route uses OpenRouter with openai/gpt-5-mini:online and includes resume context from src/data/resume.tsx so users can ask questions about you.
Open Chat Widget on the Next.js portfolio chat example.
It includes:
  • a portfolio page with OpenChatWidget
  • a client wrapper for the widget
  • a serverless POST /api/chat route handler grounded on resume data

​
Key files

  • examples/nextjs-portfolio-chat/src/app/widget-client.tsx
  • examples/nextjs-portfolio-chat/src/app/api/chat/route.ts
  • examples/nextjs-portfolio-chat/src/data/resume.tsx

​
Run it

  1. Install dependencies:
cd /Users/matt8p/Desktop/openchatwidget/examples/nextjs-portfolio-chat
pnpm install
  1. Configure environment variables:
OPENROUTER_API_KEY=your_key_here
  1. Start the dev server:
pnpm dev
Open http://localhost:3000. The widget is mounted in the app layout and sends requests to /api/chat.

View repo folder

Open the full example source on GitHub.