> ## 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.

# Examples Overview

> Browse dedicated docs pages for each Open Chat Widget example repo.

Open Chat Widget ships with three example repos. Each one has its own dedicated docs page with install, environment variable setup, and local run instructions.

<Frame>
  <img src="https://mintcdn.com/openchatwidget/gFGA3xb0tLItE0Ps/images/widget-screenshot.png?fit=max&auto=format&n=gFGA3xb0tLItE0Ps&q=85&s=5c2c1b25cfa16dadf3c3eb2af966e5f2" alt="Open Chat Widget opened on the Next.js landing page example." style={{ borderRadius: "0.75rem" }} width="4560" height="3200" data-path="images/widget-screenshot.png" />
</Frame>

## Next.js landing page

<Card title="Next.js landing page" icon="code" href="/example-nextjs-landing-page" horizontal>
  Next.js App Router app with the widget mounted in the page and a serverless `POST /api/chat` route using OpenRouter `openai/gpt-5-mini:online`.
</Card>

* Repo folder: `examples/nextjs-landing-page`
* Docs page: `/example-nextjs-landing-page`

## Next.js portfolio chat

<Card title="Next.js portfolio chat" icon="user" href="/example-nextjs-portfolio-chat" horizontal>
  Next.js App Router portfolio site with the widget mounted in the app layout and a `POST /api/chat` route that answers from resume context.
</Card>

* Repo folder: `examples/nextjs-portfolio-chat`
* Docs page: `/example-nextjs-portfolio-chat`

## React + Express example

<Card title="React + Express example" icon="server" href="/example-basic-react-express-app" horizontal>
  Vite frontend + Express backend with `gpt-5-mini` and native OpenAI `web_search`.
</Card>

* Repo folder: `examples/basic-react-express-app`
* Docs page: `/example-basic-react-express-app`

## Which example should you start from?

<CardGroup cols={2}>
  <Card title="Use the Next.js example" icon="code">
    Start here if your app already uses App Router and you want the widget and route handler in one project.
  </Card>

  <Card title="Use the portfolio example" icon="user">
    Start here if you want an App Router portfolio starter where your agent answers questions about you from structured resume data.
  </Card>

  <Card title="Use the Express example" icon="server">
    Start here if you want a standalone backend or you need to keep the agent outside the frontend app.
  </Card>
</CardGroup>