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

# Web UI

> Full-featured web interface for managing conversations and settings

The Web UI is Page Assist's full-featured interface that provides a complete control center for managing your AI conversations, settings, and data. It offers more screen space and advanced features compared to the sidebar.

## Opening the Web UI

Access the Web UI in multiple ways:

<Tabs>
  <Tab title="Keyboard Shortcut">
    Press `Ctrl+Shift+L` (Windows/Linux) or `Cmd+Shift+L` (Mac) to open the Web UI in a new tab.
  </Tab>

  <Tab title="Extension Menu">
    1. Click the Page Assist icon in your browser toolbar
    2. Select "Open Web UI" from the menu
  </Tab>

  <Tab title="Direct URL">
    Navigate to the extension's options page through your browser's extension management interface.
  </Tab>
</Tabs>

## Interface Overview

The Web UI consists of several key areas:

### Main Chat Area

The central workspace where conversations take place:

* **Message Display**: Full conversation history with formatted responses
* **Code Blocks**: Syntax highlighting and copy buttons
* **Markdown Support**: Rich text rendering for better readability
* **Image Previews**: Inline image display for vision-enabled models
* **Message Actions**: Copy, edit, regenerate, or delete individual messages

### Navigation Sidebar

Located on the left side (toggle with `Ctrl+B`):

* **Chat History**: Browse and search through past conversations
* **New Chat**: Create new conversation threads
* **Folders/Organization**: Group related chats together
* **Search**: Find specific conversations quickly

### Input Area

At the bottom of the chat interface:

* **Text Input**: Multi-line text area with auto-resize
* **Attachment Options**: Upload images, documents, or files
* **Mode Toggles**: Quick access to chat modes (webpage, search, knowledge base, vision)
* **Model Selector**: Switch AI models on the fly
* **Submit Options**: Send with Enter or Ctrl+Enter (configurable)

### Settings Panel

Comprehensive configuration options:

<Steps>
  <Step title="General Settings">
    * Wide screen mode for larger displays
    * Resume last chat on opening
    * Restore last used model for previous chats
    * Generate titles using AI
  </Step>

  <Step title="Model Settings">
    Configure AI models from various providers:

    * Ollama (local models)
    * OpenAI (GPT-4, GPT-3.5)
    * Anthropic (Claude)
    * Google (Gemini)
    * Custom API endpoints
  </Step>

  <Step title="RAG Settings">
    Configure Retrieval Augmented Generation:

    * Embedding model selection
    * Chunk size and overlap
    * Number of retrieved documents
    * Splitting strategy
  </Step>

  <Step title="Prompt Management">
    Create and manage custom prompts:

    * System prompts
    * Quick prompts
    * Copilot prompts
  </Step>
</Steps>

## Key Features

### Chat Management

<Accordion title="Multiple Conversations">
  Manage unlimited conversations simultaneously:

  * Each chat maintains its own context and history
  * Switch between chats without losing progress
  * Organize chats with custom titles
  * Export or delete conversations as needed
</Accordion>

<Accordion title="Chat History">
  Full conversation history with:

  * Automatic saving to local storage
  * Search and filter capabilities
  * Export to markdown or JSON
  * Import previous conversations
</Accordion>

<Accordion title="Message Editing">
  Edit and refine your conversations:

  * Edit previous messages and regenerate responses
  * Delete individual messages
  * Copy message content
  * View message metadata (tokens, model, timestamp)
</Accordion>

### Advanced Features

#### Wide Screen Mode

For larger displays, enable wide mode for better readability:

1. Go to Settings → General Settings
2. Enable "Enable wide screen mode"
3. The interface expands to utilize more screen space

<Info>
  Wide mode is recommended for screens 1920px or wider.
</Info>

#### Resume Last Chat

Automatically continue where you left off:

1. Go to Settings → General Settings
2. Enable "Resume the last chat when opening the Web UI"
3. Your most recent conversation loads automatically on startup

#### Model Restoration

Restore the specific model used in each chat:

1. Go to Settings → General Settings
2. Enable "Restore last used model for previous chats"
3. When switching between old chats, the model automatically changes to match

#### AI Title Generation

Automatically generate descriptive titles for conversations:

1. Go to Settings → General Settings
2. Enable "Generate Title using AI"
3. New chats automatically receive contextual titles based on content

### Keyboard Shortcuts

Boost your productivity with keyboard shortcuts:

| Action           | Shortcut       | Description            |
| ---------------- | -------------- | ---------------------- |
| Open Web UI      | `Ctrl+Shift+L` | Open in new tab        |
| New Chat         | `Ctrl+Shift+O` | Start new conversation |
| Toggle Sidebar   | `Ctrl+B`       | Show/hide chat history |
| Focus Input      | `Shift+Esc`    | Jump to message input  |
| Toggle Chat Mode | `Ctrl+E`       | Switch chat modes      |

<Note>
  Keyboard shortcuts can be customized in your browser's extension management page.
</Note>

## Settings and Configuration

### Managing Models

The Web UI provides comprehensive model management:

<Tabs>
  <Tab title="Ollama">
    Configure local Ollama models:

    1. Go to Settings → Ollama Settings
    2. Enter your Ollama server URL (default: [http://localhost:11434](http://localhost:11434))
    3. Click "Fetch Models" to load available models
    4. Configure default models for chat, embedding, and vision
  </Tab>

  <Tab title="OpenAI">
    Set up OpenAI API access:

    1. Go to Settings → OpenAI Settings
    2. Enter your API key
    3. Select models (GPT-4, GPT-3.5-turbo, etc.)
    4. Configure temperature and other parameters
  </Tab>

  <Tab title="Other Providers">
    Add custom providers:

    1. Go to Settings → Model Settings
    2. Add custom API endpoints
    3. Configure authentication and headers
    4. Test connection and save
  </Tab>
</Tabs>

### Knowledge Base Management

Upload and manage your documents:

1. Go to Settings → Manage Knowledge
2. Click "Add New Knowledge"
3. Upload files (PDF, DOCX, TXT, CSV, MD)
4. Wait for processing and embedding generation
5. Select knowledge bases to use in conversations

See [Knowledge Base](/features/knowledge-base) for detailed information.

### Prompt Library

Create reusable prompts:

1. Go to Settings → Manage Prompts
2. Choose prompt type:
   * **System Prompts**: Set conversation context
   * **Quick Prompts**: Reusable templates
   * **Copilot Prompts**: Context menu actions
3. Create and save your prompts

See [Prompts](/features/prompts) for more details.

## Data Management

### Export and Backup

<Steps>
  <Step title="Export Conversations">
    * Right-click on any chat in history
    * Select "Export" to save as JSON or Markdown
    * Choose location and save
  </Step>

  <Step title="Export All Data">
    * Go to Settings → About
    * Use backup/export options
    * Save all conversations, settings, and knowledge bases
  </Step>

  <Step title="Import Data">
    * Go to Settings → About
    * Select "Import Data"
    * Choose your backup file
    * Confirm import
  </Step>
</Steps>

### Privacy and Storage

<Info>
  All data is stored locally in your browser. Page Assist does not send data to external servers except to your configured AI providers.
</Info>

* **Chat History**: IndexedDB (browser database)
* **Knowledge Base**: Browser local storage + embeddings
* **Settings**: Chrome storage API
* **Vector Data**: Indexed in browser memory

<Warning>
  Clearing browser data will delete all conversations and settings. Always backup important data.
</Warning>

## Tips and Best Practices

<Tip>
  **Organization**: Use AI-generated titles to keep your chat history organized and searchable.
</Tip>

<Tip>
  **Model Switching**: Different models excel at different tasks. Use GPT-4 for complex reasoning, Claude for long-form content, and local Ollama models for privacy.
</Tip>

<Tip>
  **Wide Mode**: Enable wide mode when working with code or long documents for better readability.
</Tip>

## Troubleshooting

<Accordion title="Web UI won't open">
  1. Check if the extension is enabled
  2. Try the keyboard shortcut `Ctrl+Shift+L`
  3. Click the extension icon and select "Open Web UI"
  4. Check browser console for errors
</Accordion>

<Accordion title="Chat history not loading">
  1. Check browser storage settings
  2. Ensure you haven't cleared browser data
  3. Try refreshing the page
  4. Check IndexedDB in browser DevTools
</Accordion>

<Accordion title="Settings not saving">
  1. Grant storage permissions to the extension
  2. Check if you're in private/incognito mode
  3. Try restarting the browser
  4. Verify storage quota isn't exceeded
</Accordion>

## Next Steps

<CardGroup cols={2}>
  <Card title="Internet Search" icon="magnifying-glass" href="/features/internet-search">
    Add real-time web search to your conversations
  </Card>

  <Card title="Knowledge Base" icon="database" href="/features/knowledge-base">
    Upload and chat with your documents
  </Card>

  <Card title="Prompts" icon="wand-magic-sparkles" href="/features/prompts">
    Create custom prompts and templates
  </Card>

  <Card title="Vision" icon="eye" href="/features/vision">
    Analyze images with vision-capable models
  </Card>
</CardGroup>