> ## Documentation Index
> Fetch the complete documentation index at: https://docs.anotherwrapper.com/llms.txt
> Use this file to discover all available pages before exploring further.

# AI Chat

> Multi-provider AI assistant with web search, PDF RAG, generative UI, and reasoning models

<Info>
  This is the most advanced app in AnotherWrapper Premium. It's not a basic chatbot -- it's a **multi-model AI workspace** with streaming responses, web browsing, PDF chat, citations, generative UI, and persistent conversation history.
</Info>

## What Your Users Get

From the user's perspective, this feels like a serious AI assistant, not a toy prompt box. They can:

* **Switch models** on the fly -- GPT, Claude, Gemini, Grok, DeepSeek, Llama
* **Chat with streaming** responses that feel instant
* **Upload PDFs** and ask questions about them (with citations!)
* **Browse the web** when browsing mode is enabled
* **Work with images** and other multimodal inputs
* **Generate documents** and UI blocks inside the chat
* **Keep conversation history** tied to their account

If you want a "main AI app" in your product, this is the one.

## Supported Models

| Provider      | Models                                                                    |
| ------------- | ------------------------------------------------------------------------- |
| **OpenAI**    | GPT-5, GPT-5 mini, GPT-5 nano, GPT-4o, o3                                 |
| **Anthropic** | Claude Opus 4.5, Sonnet 4.5, Haiku 4.5                                    |
| **Google**    | Gemini 3 Pro, Gemini 3 Pro Image, Gemini 3.1 Flash Lite, Gemini 2.5 Flash |
| **Groq**      | Llama 4 Scout, Llama 4 Maverick                                           |
| **xAI**       | Grok 4, Grok 4.1, Grok 4.1 Fast Reasoning                                 |
| **DeepSeek**  | DeepSeek Chat                                                             |

Models are configured in `lib/ai/models.ts`. You can add, remove, or tweak available models there.

## What Makes It Feel Like a Real Product

This isn't just "call an API and show text." It combines several systems:

* **Vercel AI SDK** for streaming, tools, and provider abstraction
* **Multiple providers** so users aren't locked into one model family
* **Native web search tools** for supported providers
* **RAG** so uploaded PDFs can be searched semantically
* **Better Auth + PostgreSQL** for auth, sessions, and persistence
* **Object storage** for uploads
* **Credit gating** so premium models and actions can be monetized

That combination is what makes it feel like a product instead of a demo.

## Setup

<Tabs>
  <Tab title="Basic Setup">
    Get chat running with the essentials.

    <Steps>
      <Step title="Set up core services">
        You need auth, a database, and at least one configured chat provider. Storage is optional unless you want uploads or PDF chat.

        <CardGroup cols={3}>
          <Card title="Better Auth + PostgreSQL" icon="database" href="/services/better-auth-postgresql">
            Auth + hosted Postgres for this boilerplate
          </Card>

          <Card title="One AI Provider" icon="microchip" href="/providers">
            OpenAI, Anthropic, Google, Groq, xAI, or DeepSeek
          </Card>

          <Card title="Storage (optional)" icon="hard-drive" href="/services/storage">
            Only needed for uploads, file attachments, and PDF workflows
          </Card>
        </CardGroup>
      </Step>

      <Step title="Run the app">
        Start the dev server and open the chat page. You should see streaming responses from your configured model.
      </Step>

      <Step title="Verify it works">
        Switch between models, send a few messages, and confirm that conversations persist after a refresh.
      </Step>
    </Steps>
  </Tab>

  <Tab title="Full Setup with RAG + All Providers">
    Get every feature running -- PDF chat, web search, and all model families.

    <Steps>
      <Step title="Set up core services">
        For the full document workflow, set up auth, database, storage, and OpenAI.

        <CardGroup cols={3}>
          <Card title="Better Auth + PostgreSQL" icon="database" href="/services/better-auth-postgresql">
            Auth + hosted Postgres
          </Card>

          <Card title="Storage" icon="hard-drive" href="/services/storage">
            S3-compatible storage
          </Card>

          <Card title="OpenAI" icon="microchip" href="/providers/openai">
            GPT models + PDF embeddings
          </Card>
        </CardGroup>
      </Step>

      <Step title="Add more AI providers">
        Each provider unlocks its model family in the chat UI.

        <CardGroup cols={3}>
          <Card title="Anthropic" icon="sparkles" href="/providers/anthropic">
            Claude models
          </Card>

          <Card title="Google AI" icon="microchip" href="/providers/google">
            Gemini models
          </Card>

          <Card title="Groq" icon="bolt" href="/providers/groq">
            Llama models
          </Card>
        </CardGroup>

        <CardGroup cols={2}>
          <Card title="xAI (Grok)" icon="robot" href="/providers/xai">
            Grok models
          </Card>

          <Card title="DeepSeek" icon="microchip" href="/providers/deepseek">
            DeepSeek models
          </Card>
        </CardGroup>
      </Step>

      <Step title="Set up Vector RAG for PDF chat">
        Follow the [Vector Database & RAG guide](/services/vector-rag) to enable document uploads, semantic search, and citations.
      </Step>

      <Step title="Verify everything">
        Test model switching, PDF uploads with citations, web browsing on supported models, and conversation persistence.
      </Step>
    </Steps>
  </Tab>
</Tabs>

### Web Search

Web search uses the native tool support from each provider -- there's no separate search API to configure.

Providers with native search support:

1. OpenAI
2. Anthropic
3. Google
4. xAI

<Note>
  Search availability depends on the selected model/provider. Models without native web search support (like some Groq or DeepSeek paths) won't get a fallback search provider automatically.
</Note>

## How a Chat Request Works

<Steps>
  <Step title="User sends a message">
    The message hits the server along with the chosen model, browsing mode, and any attached documents.
  </Step>

  <Step title="Context assembly">
    If documents are active, the app retrieves relevant chunks from PostgreSQL via semantic search.
  </Step>

  <Step title="Prompt building">
    The server builds the system prompt and tool list based on the model, context, and active features.
  </Step>

  <Step title="Streaming response">
    The answer streams back in real time to the user's browser.
  </Step>

  <Step title="Persistence">
    The final messages and metadata are saved in PostgreSQL for conversation history.
  </Step>
</Steps>

## PDF Chat, Vector Search, and Citations

The document workflow is one of the most powerful parts of this app.

<AccordionGroup>
  <Accordion title="How PDF upload and indexing works">
    When a user uploads a PDF:

    1. The file is stored in object storage
    2. Text is extracted from the PDF
    3. The text is split into chunks
    4. Each chunk is embedded with OpenAI
    5. Embeddings are stored in PostgreSQL with `pgvector`

    Later, when the user asks a question, those chunks are matched semantically and injected into the prompt.
  </Accordion>

  <Accordion title="How citations work">
    When the chat retrieves context from uploaded documents, the relevant source chunks are tracked. The UI then renders citations alongside the AI's response so users can see exactly where the information came from.
  </Accordion>

  <Accordion title="Setting up RAG">
    Check out the full guide: [Vector Database & RAG](/services/vector-rag)
  </Accordion>
</AccordionGroup>

## Generative UI and Tools

This chat app isn't text-only. It supports tool-driven interactions like:

* **Document creation** -- generate and update docs inside the chat
* **App suggestions** -- contextual recommendations
* **Web search** -- provider-native browsing when enabled

That's what makes the chat feel "more like an agent" and less like a plain chatbot.

## Credit Gating

The repo includes an app-wide credit layer that makes monetization straightforward:

* Free models can stay free
* Premium models can cost credits
* Browsing can also cost credits
* The app returns usage metadata so the UI can show what happened

## Good First Customizations

Ready to make this your own? Here are the usual first edits:

* Update the model list in `lib/ai/models.ts`
* Change which models are free vs. premium
* Adjust the system prompt in `app/(apps)/chat/prompt.ts`
* Add or remove tools under `app/(apps)/chat/tools/`
* Tune the document retrieval flow under `lib/rag/`

## Verification

<Check>
  Your chat setup is working if:

  * The page loads and streams responses
  * Switching models changes the provider/model badge
  * Browsing works on models that support native search
  * Uploaded PDFs can be indexed and cited
  * New messages persist after refresh
</Check>

<CardGroup cols={3}>
  <Card title="AI SDK" icon="microchip" href="/services/ai-sdk">
    Learn why streaming, tools, and model switching work the way they do.
  </Card>

  <Card title="Vector RAG" icon="database" href="/services/vector-rag">
    Learn how document chat and citations are implemented.
  </Card>

  <Card title="Storage" icon="hard-drive" href="/services/storage">
    Uploads and file-backed workflows depend on storage being configured.
  </Card>
</CardGroup>