### Install Dependencies with npm

Source: https://github.com/buggyhunter/openchat-ui/blob/main/README.md

This command installs all the necessary dependencies for the OpenChat UI project using npm. It should be run after cloning the repository.

```bash
npm i
```

--------------------------------

### Run OpenChat UI Locally with npm

Source: https://github.com/buggyhunter/openchat-ui/blob/main/README.md

This command starts the OpenChat UI development server locally. After configuring the environment variables, this command allows you to view and interact with the UI in your browser.

```bash
npm run dev
```

--------------------------------

### useFetch: Flexible React Hook for HTTP Requests

Source: https://context7.com/buggyhunter/openchat-ui/llms.txt

The useFetch hook provides a flexible way to make HTTP requests in React applications. It automatically handles JSON parsing, error management, and supports request cancellation via AbortController. The hook exposes methods for standard HTTP verbs like GET, POST, PUT, and DELETE.

```typescript
import { useFetch } from '@/hooks/useFetch';

function MyComponent() {
  const fetchService = useFetch();
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);

  const fetchData = async () => {
    const controller = new AbortController();

    try {
      // POST request with body
      const response = await fetchService.post('/api/models', {
        body: { key: 'sk-dummy' },
        headers: { 'Content-Type': 'application/json' },
        signal: controller.signal
      });
      setData(response);

      // GET request with params
      const userData = await fetchService.get('/api/user', {
        params: '?id=123',
        signal: controller.signal
      });

      // PUT request
      await fetchService.put('/api/settings', {
        body: { temperature: 0.8 }
      });

      // DELETE request
      await fetchService.delete('/api/conversation/abc123');

    } catch (err) {
      setError(err);
      console.error('Request failed:', err);
    }

    // Cleanup: abort request if component unmounts
    return () => controller.abort();
  };

  return <button onClick={fetchData}>Fetch Data</button>;
}
```

--------------------------------

### Docker Deployment and Execution Commands

Source: https://context7.com/buggyhunter/openchat-ui/llms.txt

Provides commands for building a Docker image for OpenChat UI, running it as a container, and using Docker Compose for orchestration. It also includes a curl command to test the application's accessibility after deployment.

```bash
# Build and run with Docker
docker build -t openchat-ui .
docker run -p 3000:3000 \
  -e OPENAI_API_HOST=http://localhost:18888 \
  -e OPENAI_API_KEY=sk-dummy \
  openchat-ui

# Or use Docker Compose
docker-compose up -d

# Access the application
curl http://localhost:3000
```

--------------------------------

### Clone OpenChat UI Repository

Source: https://github.com/buggyhunter/openchat-ui/blob/main/README.md

This command clones the OpenChat UI project from its GitHub repository. It's the first step in setting up the project locally.

```bash
git clone https://github.com/imoneoi/openchat-ui.git
```

--------------------------------

### Clone and Branch Repository - Git

Source: https://github.com/buggyhunter/openchat-ui/blob/main/CONTRIBUTING.md

This snippet demonstrates the basic Git commands to clone the chatbot-ui repository, navigate into the directory, and create a new branch for development. It's a prerequisite for making any code contributions.

```bash
git clone https://github.com/mckaywrigley/chatbot-ui.git
cd chatbot-ui
git checkout -b my-branch-name
```

--------------------------------

### Environment Configuration for OpenChat UI (.env.local)

Source: https://context7.com/buggyhunter/openchat-ui/llms.txt

Sets up environment variables for connecting to OpenChat API servers and customizing default behavior. It supports both OpenAI-compatible endpoints and Azure deployments, along with optional Google Search integration. This file is crucial for local development and defining application-wide settings.

```bash
# .env.local configuration for local OpenChat server
OPENAI_API_HOST=http://localhost:18888
OPENAI_API_KEY=sk-dummy
NEXT_PUBLIC_DEFAULT_TEMPERATURE=0.5
NEXT_PUBLIC_DEFAULT_SYSTEM_PROMPT="You are a helpful AI assistant."

# Optional: Azure OpenAI configuration
OPENAI_API_TYPE=azure
OPENAI_API_VERSION=2023-03-15-preview
AZURE_DEPLOYMENT_ID=your-deployment-id
OPENAI_ORGANIZATION=your-org-id

# Optional: Google Search integration
GOOGLE_API_KEY=your-google-api-key
GOOGLE_CSE_ID=your-custom-search-engine-id
```

--------------------------------

### Configure OpenChat UI Environment Variables

Source: https://github.com/buggyhunter/openchat-ui/blob/main/README.md

This code block shows the content for the .env.local file, which is used to configure the OpenChat UI application. It sets the API host, API key, and default temperature and system prompt for the UI. Ensure the OpenChat API server is running and accessible at the specified host.

```env
OPENAI_API_HOST=http://localhost:18888
OPENAI_API_KEY=sk-dummy
NEXT_PUBLIC_DEFAULT_TEMPERATURE=0.5
NEXT_PUBLIC_DEFAULT_SYSTEM_PROMPT=" "
```

--------------------------------

### Accessing Environment Configuration in JavaScript

Source: https://context7.com/buggyhunter/openchat-ui/llms.txt

Demonstrates how to import and access configuration variables like API host, default temperature, and system prompt within your JavaScript code. These variables are typically exported from a utility file for easy access throughout the application.

```javascript
// Access configuration in code
import {
  DEFAULT_SYSTEM_PROMPT,
  DEFAULT_TEMPERATURE,
  OPENAI_API_HOST
} from '@/utils/app/const';

console.log('API Host:', OPENAI_API_HOST);
console.log('Default Temperature:', DEFAULT_TEMPERATURE);
console.log('System Prompt:', DEFAULT_SYSTEM_PROMPT);
```

--------------------------------

### Docker Compose Configuration for OpenChat UI

Source: https://context7.com/buggyhunter/openchat-ui/llms.txt

Defines the services, build context, ports, and environment variables for running OpenChat UI in a containerized environment using Docker Compose. It specifies the build image, port mapping, and dependencies on other services like an API server.

```yaml
# docker-compose.yml
version: '3.8'

services:
  openchat-ui:
    build: .
    ports:
      - "3000:3000"
    environment:
      - OPENAI_API_HOST=http://openchat-api:18888
      - OPENAI_API_KEY=sk-dummy
      - NEXT_PUBLIC_DEFAULT_TEMPERATURE=0.5
      - NEXT_PUBLIC_DEFAULT_SYSTEM_PROMPT=You are a helpful assistant.
    depends_on:
      - openchat-api
```

--------------------------------

### OpenAI Model Configuration: Types and Tokenizers

Source: https://context7.com/buggyhunter/openchat-ui/llms.txt

This section defines type definitions and tokenizer mappings for supported OpenChat models. It includes configurations for token limits, context windows, and associates specific tokenizers for accurate token counting, crucial for managing model context.

```typescript
import { OpenAIModel, OpenAIModelID, OpenAIModels, OpenAITokenizers } from '@/types/openai';

// Access model configurations
const openchatAura = OpenAIModels[OpenAIModelID.OPENCHAT_3_2_MISTRAL];
console.log(openchatAura);
// {
//   id: "openchat_v3.2_mistral",
//   name: "OpenChat Aura",
//   maxLength: 24576,  // 3x token limit for message display
//   tokenLimit: 8192   // actual context window
// }

// Use tokenizer for token counting
const tokenizer = OpenAITokenizers[OpenAIModelID.OPENCHAT_3_2_MISTRAL];
const text = "This is a sample message to tokenize";
const tokens = tokenizer.encode(text, false);
console.log(`Token count: ${tokens.length}`);

// Example: Validate message fits in context
function canAddMessage(message: string, model: OpenAIModel, currentTokens: number): boolean {
  const tokenizer = OpenAITokenizers[model.id];
  const messageTokens = tokenizer.encode(message, false);
  const totalTokens = currentTokens + messageTokens.length + 768; // reserve tokens for response
  return totalTokens <= model.tokenLimit;
}
```

--------------------------------

### OpenChat UI: Google Search API Endpoint for AI-Powered Answers (TypeScript)

Source: https://context7.com/buggyhunter/openchat-ui/llms.txt

Performs web searches using Google Custom Search API and generates AI-powered answers with cited sources. It fetches top search results, extracts readable content, and synthesizes an answer with proper citations using the AI model.

```typescript
// POST /api/google
// Request body
const googleSearchRequest = {
  model: {
    id: "openchat_v3.2_mistral",
    name: "OpenChat Aura",
    maxLength: 24576,
    tokenLimit: 8192
  },
  messages: [
    { role: "user", content: "What are the latest developments in quantum computing?" }
  ],
  key: "sk-dummy",
  prompt: "You are a helpful assistant.",
  temperature: 1,
  googleAPIKey: "YOUR_GOOGLE_API_KEY",
  googleCSEId: "YOUR_CUSTOM_SEARCH_ENGINE_ID"
};

// Execute Google search with AI answer generation
fetch('/api/google', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(googleSearchRequest)
})
  .then(response => response.json())
  .then(data => {
    console.log('AI-powered answer:', data.answer);
    // Response includes cited sources in markdown format:
    // "Recent developments include improved error correction [[1]](link1.com) 
    //  and quantum supremacy demonstrations [[2]](link2.com)."
  })
  .catch(error => console.error('Search failed:', error));
```

--------------------------------

### Google Search API Endpoint

Source: https://context7.com/buggyhunter/openchat-ui/llms.txt

Performs web searches using Google Custom Search API and generates AI-powered answers with cited sources. Fetches top search results, extracts readable content from web pages, and instructs the AI to synthesize an answer with proper citations.

```APIDOC
## POST /api/google

### Description
Performs web searches using the Google Custom Search API and generates AI-powered answers with cited sources. This endpoint fetches top search results, extracts readable content from web pages, and instructs the AI to synthesize an answer with proper citations.

### Method
POST

### Endpoint
/api/google

### Parameters
#### Request Body
- **model** (object) - Required - Specifies the model to use for generating the answer.
  - **id** (string) - Required - The unique identifier of the model.
  - **name** (string) - Required - The display name of the model.
  - **maxLength** (number) - Required - The maximum context length of the model in tokens.
  - **tokenLimit** (number) - Required - The token limit for the current conversation.
- **messages** (array) - Required - An array of message objects representing the user's query.
  - **role** (string) - Required - The role of the message sender (e.g., 'user').
  - **content** (string) - Required - The content of the user's query.
- **key** (string) - Required - The API key for authentication.
- **prompt** (string) - Optional - A system prompt to guide the AI's behavior.
- **temperature** (number) - Optional - Controls the randomness of the output.
- **googleAPIKey** (string) - Required - Your Google Custom Search API key.
- **googleCSEId** (string) - Required - Your Google Custom Search Engine ID.

### Request Example
```json
{
  "model": {
    "id": "openchat_v3.2_mistral",
    "name": "OpenChat Aura",
    "maxLength": 24576,
    "tokenLimit": 8192
  },
  "messages": [
    { "role": "user", "content": "What are the latest developments in quantum computing?" }
  ],
  "key": "sk-dummy",
  "prompt": "You are a helpful assistant.",
  "temperature": 1,
  "googleAPIKey": "YOUR_GOOGLE_API_KEY",
  "googleCSEId": "YOUR_CUSTOM_SEARCH_ENGINE_ID"
}
```

### Response
#### Success Response (200)
- **answer** (string) - The AI-generated answer to the query, including cited sources in markdown format.

### Response Example
```json
{
  "answer": "Recent developments include improved error correction [[1]](link1.com) and quantum supremacy demonstrations [[2]](link2.com)."
}
```
```

--------------------------------

### Models API Endpoint

Source: https://context7.com/buggyhunter/openchat-ui/llms.txt

Retrieves available OpenChat models from the API server. Filters and maps model information to ensure only supported OpenChat models are returned to the client.

```APIDOC
## POST /api/models

### Description
Retrieves a list of available OpenChat models from the API server. This endpoint filters and maps model information to ensure that only supported OpenChat models are returned to the client.

### Method
POST

### Endpoint
/api/models

### Parameters
#### Request Body
- **key** (string) - Required - The API key for authentication.

### Request Example
```json
{
  "key": "sk-dummy"
}
```

### Response
#### Success Response (200)
- **Array of models** - Returns a JSON array of model objects.
  - **id** (string) - The unique identifier of the model.
  - **name** (string) - The display name of the model.

### Response Example
```json
[
  { "id": "openchat_v3.2", "name": "OpenChat 3.2" },
  { "id": "openchat_v3.2_mistral", "name": "OpenChat Aura" }
]
```
```

--------------------------------

### OpenChat UI: Chat API Endpoint for Streaming Responses (TypeScript)

Source: https://context7.com/buggyhunter/openchat-ui/llms.txt

Handles streaming chat completions with token limit management and context window optimization. It processes messages, applies tokenization, and streams responses using Server-Sent Events. This endpoint is crucial for real-time chat interactions.

```typescript
// POST /api/chat
// Request body
const chatRequest = {
  model: {
    id: "openchat_v3.2_mistral",
    name: "OpenChat Aura",
    maxLength: 24576,
    tokenLimit: 8192
  },
  messages: [
    { role: "user", content: "What is machine learning?" },
    { role: "assistant", content: "Machine learning is a subset of AI..." },
    { role: "user", content: "Can you explain neural networks?" }
  ],
  key: "sk-dummy",
  prompt: "You are a helpful AI assistant.",
  temperature: 0.7
};

// Using fetch to call the API
const response = await fetch('/api/chat', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(chatRequest)
});

// Process streaming response
const reader = response.body.getReader();
const decoder = new TextDecoder();
let fullResponse = '';

while (true) {
  const { done, value } = await reader.read();
  if (done) break;
  const chunk = decoder.decode(value);
  fullResponse += chunk;
  console.log('Received:', chunk);
}
```

--------------------------------

### OpenChat UI: Models API Endpoint to Fetch Available Models (TypeScript)

Source: https://context7.com/buggyhunter/openchat-ui/llms.txt

Retrieves available OpenChat models from the API server. This endpoint filters and maps model information to ensure only supported OpenChat models are returned to the client, facilitating model selection for users.

```typescript
// POST /api/models
// Request body
const modelsRequest = {
  key: "sk-dummy"
};

// Call the models endpoint
fetch('/api/models', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(modelsRequest)
})
  .then(response => response.json())
  .then(models => {
    console.log('Available models:', models);
    // Expected response:
    // [
    //   { id: "openchat_v3.2", name: "OpenChat 3.2" },
    //   { id: "openchat_v3.2_mistral", name: "OpenChat Aura" }
    // ]
  })
  .catch(error => console.error('Failed to fetch models:', error));
```

--------------------------------

### Chat API Endpoint

Source: https://context7.com/buggyhunter/openchat-ui/llms.txt

Handles streaming chat completions with token limit management and context window optimization. Processes incoming messages, applies tokenization, and streams responses back to the client using Server-Sent Events.

```APIDOC
## POST /api/chat

### Description
Handles streaming chat completions with token limit management and context window optimization. The endpoint processes incoming messages, applies tokenization to stay within model limits, and streams responses back to the client using Server-Sent Events.

### Method
POST

### Endpoint
/api/chat

### Parameters
#### Request Body
- **model** (object) - Required - Specifies the model to use for chat completion.
  - **id** (string) - Required - The unique identifier of the model.
  - **name** (string) - Required - The display name of the model.
  - **maxLength** (number) - Required - The maximum context length of the model in tokens.
  - **tokenLimit** (number) - Required - The token limit for the current conversation.
- **messages** (array) - Required - An array of message objects representing the conversation history.
  - **role** (string) - Required - The role of the message sender (e.g., 'user', 'assistant').
  - **content** (string) - Required - The content of the message.
- **key** (string) - Required - The API key for authentication.
- **prompt** (string) - Optional - A system prompt to guide the AI's behavior.
- **temperature** (number) - Optional - Controls the randomness of the output, higher values mean more random.

### Request Example
```json
{
  "model": {
    "id": "openchat_v3.2_mistral",
    "name": "OpenChat Aura",
    "maxLength": 24576,
    "tokenLimit": 8192
  },
  "messages": [
    { "role": "user", "content": "What is machine learning?" },
    { "role": "assistant", "content": "Machine learning is a subset of AI..." },
    { "role": "user", "content": "Can you explain neural networks?" }
  ],
  "key": "sk-dummy",
  "prompt": "You are a helpful AI assistant.",
  "temperature": 0.7
}
```

### Response
#### Success Response (200)
- **Streaming data** - The response is streamed using Server-Sent Events. Each chunk contains a part of the AI-generated response.
```

--------------------------------

### useApiService: Encapsulating API Calls in React

Source: https://context7.com/buggyhunter/openchat-ui/llms.txt

The useApiService hook serves as a service layer in React components, simplifying API interactions by encapsulating specific API calls. It leverages the useFetch hook and predefines endpoints, such as fetching available models, for cleaner integration into components.

```typescript
import useApiService from '@/services/useApiService';
import { useEffect, useState } from 'react';

function ModelSelector() {
  const apiService = useApiService();
  const [models, setModels] = useState([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const controller = new AbortController();

    const loadModels = async () => {
      setLoading(true);
      try {
        const response = await apiService.getModels(
          { key: 'sk-dummy' },
          controller.signal
        );
        setModels(response);
      } catch (error) {
        console.error('Failed to load models:', error);
      } finally {
        setLoading(false);
      }
    };

    loadModels();
    return () => controller.abort();
  }, [apiService]);

  return (
    <select disabled={loading}>
      {models.map(model => (
        <option key={model.id} value={model.id}>
          {model.name}
        </option>
      ))}
    </select>
  );
}
```

--------------------------------

### TypeScript Type Definitions for Chat Components

Source: https://context7.com/buggyhunter/openchat-ui/llms.txt

Illustrates the use of TypeScript interfaces for defining the structure of chat messages, conversations, and API request payloads. This ensures type safety and consistency when handling chat-related data throughout the application.

```typescript
import { Message, Conversation, ChatBody } from '@/types/chat';
import { OpenAIModel } from '@/types/openai';

// Create a new conversation
const conversation: Conversation = {
  id: '550e8400-e29b-41d4-a716-446655440000',
  name: 'Machine Learning Discussion',
  messages: [
    { role: 'user', content: 'What is deep learning?' },
    { role: 'assistant', content: 'Deep learning is a subset of machine learning...' }
  ],
  model: {
    id: 'openchat_v3.2_mistral',
    name: 'OpenChat Aura',
    maxLength: 24576,
    tokenLimit: 8192
  },
  prompt: 'You are an expert in AI and machine learning.',
  temperature: 0.7,
  folderId: null
};

// Add a new message to conversation
const newMessage: Message = {
  role: 'user',
  content: 'Can you explain convolutional neural networks?'
};
conversation.messages.push(newMessage);

// Prepare chat request body
const chatBody: ChatBody = {
  model: conversation.model,
  messages: conversation.messages,
  key: 'sk-dummy',
  prompt: conversation.prompt,
  temperature: conversation.temperature
};
```

--------------------------------

### OpenAIStream: Core Streaming Handler for OpenChat API

Source: https://context7.com/buggyhunter/openchat-ui/llms.txt

The OpenAIStream function handles the core logic for connecting to OpenChat API servers and processing Server-Sent Events. It manages authentication, formats requests, and streams responses in real-time, including robust error handling for OpenAI-specific errors.

```typescript
import { OpenAIStream, OpenAIError } from '@/utils/server';
import { OpenAIModel } from '@/types/openai';
import { Message } from '@/types/chat';

// Configure streaming request
const model: OpenAIModel = {
  id: 'openchat_v3.2_mistral',
  name: 'OpenChat Aura',
  maxLength: 24576,
  tokenLimit: 8192
};

const systemPrompt = "You are a helpful, harmless, and honest AI assistant.";
const temperature = 0.7;
const apiKey = "sk-dummy";
const messages: Message[] = [
  { role: "user", content: "Explain quantum entanglement" }
];

try {
  const stream = await OpenAIStream(model, systemPrompt, temperature, apiKey, messages);

  // Return stream in Next.js API route
  return new Response(stream);
} catch (error) {
  if (error instanceof OpenAIError) {
    console.error('OpenAI Error:', error.message, error.type, error.code);
    return new Response('Error', { status: 500, statusText: error.message });
  }
  throw error;
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.