Chat UI

Hadrian Gateway includes a built-in React-based chat interface for interacting with multiple LLM models simultaneously. The UI supports real-time streaming, file uploads, conversation history, and advanced multi-model interaction modes.

Multi-Model Chat

Chat with multiple models in a single conversation to compare responses, leverage different model strengths, or get diverse perspectives.

Selecting Models

Select one or more models from the model picker. Each model responds to your messages in parallel, with responses displayed side-by-side.

Model Instances

Create multiple instances of the same model with different settings to compare behavior:

GPT-4 (Creative)     → temperature: 0.9, top_p: 0.95
GPT-4 (Precise)      → temperature: 0.3, top_p: 0.8
GPT-4 (Reasoning)    → reasoning: high effort

Each instance has:

• Unique ID - Distinguishes instances in the UI and message history
• Custom label - Display name (e.g., "Creative", "Precise")
• Instance parameters - Override temperature, max tokens, reasoning, system prompt

Response Display

Responses are displayed in a configurable layout:

Each response card shows:

• Model name and instance label
• Streaming content with syntax-highlighted markdown
• Usage stats (tokens, cost, latency)
• Action buttons (copy, regenerate, expand, feedback)

Per-Model Settings

Configure settings for each model independently:

Reasoning Mode

Enable extended thinking for models that support it:

Effort levels: none, minimal, low, medium, high

When reasoning is enabled, the model's thinking process appears in a collapsible section above the response. Reasoning tokens are tracked separately in usage stats.

Streaming

All responses stream in real-time using Server-Sent Events (SSE), providing immediate feedback as models generate content.

Performance

The chat UI is optimized for high-performance multi-model streaming:

Streaming Features

Usage Statistics

Each response displays detailed usage information:

File Uploads

Attach files to your messages for vision models, document analysis, or data processing with frontend tools.

Supported File Types

Upload Methods

• Click - File picker dialog
• Drag & drop - Drop files onto the input area
• Paste - Paste images from clipboard

File Handling

Files are processed based on type:

Configuration

[ui.chat]
file_uploads_enabled = true
max_file_size_bytes = 10485760  # 10 MB
allowed_file_types = [
  "image/png", "image/jpeg", "image/gif", "image/webp",
  "application/pdf", "text/plain", "text/markdown",
  "text/csv", "application/json"
]

Conversation Management

History

Conversations are persisted locally in IndexedDB:

Organization

Project Assignment

Assign conversations to a project using the project picker in the chat header. Select a project from the dropdown or choose "Personal" for unscoped usage.

When a project is selected:

• The X-Hadrian-Project header is sent with every request, attributing usage to that project
• Usage appears in the project's usage dashboard in the admin panel
• Session-based users (SSO/proxy auth) get per-project usage tracking without needing a project-scoped API key

Project Sharing

Share conversations with team members via projects:

1. Create or select a project in the admin panel
2. Move conversation to the project
3. Team members with project access can view and continue the conversation

Message Features

User Messages

Assistant Messages

Citations

When using file search (RAG) or web search tools, responses include citations:

Citations appear as inline references with expandable previews.

Artifacts

Tool execution produces artifacts displayed inline:

Keyboard Shortcuts

Related Features