> ## Documentation Index > Fetch the complete documentation index at: https://phaseo.app/docs/llms.txt > Use this file to discover all available pages before exploring further. > ## Agent Instructions > Phaseo Gateway base URL: https://api.phaseo.app/v1. Send `Authorization: Bearer $PHASEO_API_KEY` with every request. > Model IDs look like `provider/model`, for example `openai/gpt-6-astra`. Do not guess IDs: list them with `GET /v1/models` or check https://phaseo.app/models. `phaseo/free` routes to an available free model and needs no wallet balance. > For new text integrations prefer `POST /v1/responses`. `POST /v1/chat/completions` (OpenAI format) and `POST /v1/messages` (Anthropic format) suit existing code. > The full API contract is https://phaseo.app/docs/openapi/v1/openapi.yaml. Official SDKs: `@phaseo/sdk` (TypeScript) and `phaseo` (Python), plus Go, C#, PHP, Ruby and Rust. > Search these docs over MCP at https://phaseo.app/docs/mcp, and install Phaseo skills with `npx skills add https://phaseo.app/docs`. If a page is wrong or out of date, report it with the MCP `submit_feedback` tool. > Manage Phaseo accounts with the `phaseo` CLI (`npm install -g @phaseo/cli`, then `phaseo login` or `phaseo login --device-code`), the `/v1` Management API or the MCP server at `https://mcp.phaseo.app/mcp?access=manage`. Do not send users to the dashboard for account tasks. A person is still needed for sign-up, approving a sign-in, paying the first top-up on the checkout link that `phaseo credits add` returns when no card is saved, confirming each saved-card top-up from the emailed link, and account security (password, MFA, passkeys). Create API keys with `phaseo keys create --name --json`; never guess one. Credit top-ups need `phaseo login --scopes billing:write` first. Task map: https://phaseo.app/docs/v1/developers/manage-from-an-agent.md. # Build a Next.js Web Chat App > Use the existing Next.js sample chat app as a full walkthrough, with a copyable build prompt at the top. Use this page when you want a small Next.js chat app that feels real, but still keeps your Phaseo API key on the server. **Goal:** Run a browser chat app that discovers models and sends responses through server-side routes. **Outcome:** A working local chat interface with no Phaseo credentials exposed to the browser. Build a **Next.js web chat app** on top of Phaseo Gateway. You are building a small production-style chat app with Phaseo Gateway. Create a Next.js app with: \- a chat UI \- a model picker backed by GET /v1/models \- a server-side route that calls POST /v1/responses \- server-side API key handling using PHASEO\_API\_KEY \- loading, success, and error states Keep the app intentionally small and easy to inspect. Implementation requirements: \- Use one local API route for model discovery. \- Use one local API route for responses generation. \- Keep secrets server-side only. \- Show the request/response flow clearly in code. \- Add a short README with setup and run steps. Verification: \- Run the app if possible. \- Verify one successful chat turn. \- Report the exact files changed, what you verified, and any remaining assumptions. ## Sample project * GitHub: [examples/web-chat-nextjs](https://github.com/phaseoteam/Phaseo/tree/main/examples/web-chat-nextjs) * Local repo path: `examples/web-chat-nextjs` ## What this app does * fetches available models from `GET /v1/models` * submits chat turns through `POST /v1/responses` * keeps the API key on the server * gives you a simple starting point for a real product without OAuth complexity ## Key files * app/ * api/ * models/ * route.ts * responses/ * route.ts * components/ * ChatClient.tsx * lib/ * gateway.ts ## Why the sample is structured this way ### 1. The browser does not call Phaseo directly The UI talks to your own Next.js routes first. Those routes call Phaseo on the server. This gives you: * server-side secret handling * one place to manage headers and request payloads * an easier upgrade path if you later add auth, rate limits, or logging ### 2. Model discovery is separated from generation Keep model listing and chat generation in separate routes so each part stays easy to understand: * one route for listing models * one route for running the chat request ### 3. The UI owns interaction state only The React client handles: * input state * loading state * error presentation * rendered messages The server route handles the AI call. The browser just handles the user experience. ## Prerequisites * Node.js and one supported package manager * a Phaseo API key ## Run the sample ```bash npm theme={null} cd examples/web-chat-nextjs npm install cp .env.example .env.local ``` ```bash pnpm theme={null} cd examples/web-chat-nextjs pnpm install cp .env.example .env.local ``` ```bash yarn theme={null} cd examples/web-chat-nextjs yarn install cp .env.example .env.local ``` ```bash bun theme={null} cd examples/web-chat-nextjs bun install cp .env.example .env.local ``` Set: * `PHASEO_API_KEY` * `NEXT_PUBLIC_GATEWAY_URL` Then run: ```bash npm theme={null} npm run dev ``` ```bash pnpm theme={null} pnpm dev ``` ```bash yarn theme={null} yarn dev ``` ```bash bun theme={null} bun run dev ``` Open `http://localhost:3000`. ## Check your work * The model picker loads models from the server route. * Sending a message produces one assistant response. * The browser network panel does not expose `PHASEO_API_KEY`. * A failed gateway request appears as a useful error state in the UI. ## How to make it your own * switch the default model to your chosen production target * add streaming if your UX needs token-by-token output * add auth later if the app becomes multi-user * swap the server route internals to the TypeScript SDK later if you want a higher-level client ## When to use a different starting point * use the Node quickstart when you want a script or backend smoke test, not a UI * use the Python quickstart when the first integration lives in a worker, CLI, or backend service ## Related guides * [Mini app starter prompts](https://phaseo.app/docs/v1/cookbook/mini-app-starter-prompts.md) * [Examples](https://phaseo.app/docs/v1/guides/examples.md) * [Quickstart](https://phaseo.app/docs/v1/quickstart.md) This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.