Checking Availability
Detect WebLLM availability and guide users to set up their environment
Before making LLM requests, you should check if WebLLM is available on the user's device. This guide covers how to detect availability, show helpful messages to users, and handle fallback scenarios.
Availability Helpers
WebLLM provides a set of helpers to simplify availability checking:
| Function | Description |
|---|---|
checkAvailability() | Complete status check returning availability, transport, browser info, providers, and capabilities |
hasCapability(type) | Check if a capability is available: 'text', 'image', 'embedding', 'vision', 'audio', 'tool-use' |
getCapabilities() | Get all capabilities as a Record<Capability, boolean> |
getProvidersByCapability() | Get available providers grouped by capability type |
useWebLLMStatus() | React hook for reactive availability status |
isAvailable() | Simple boolean check if any transport is available |
getBrowserInfo() | Get browser compatibility information |
getProviderStatus() | Get configured and available providers |
promptInstall() | Show install prompt UI, resolves when ready |
webLlmReady(timeout?) | Wait for WebLLM to become available |
isAvailable()getBrowserInfo()getProviderStatus()checkAvailability()getCapabilities()hasCapability("image")hasCapability("embedding")getProvidersByCapability()Quick Start
Use checkAvailability() to get a complete status in one call:
Availability States
There are several states your application needs to handle:
| State | Description | User Action |
|---|---|---|
| Available | Extension installed and providers configured | Ready to use |
| No Providers | Extension installed but no providers set up | Configure a provider (add API key or enable local model) |
| Not Installed | Compatible browser but extension not installed | Install the WebLLM extension |
| Unsupported Browser | Browser doesn't support Chrome extensions | Switch browser or use gateway fallback |
Browser Compatibility
The getBrowserInfo() function returns detailed compatibility information:
Complete Availability Check
Here's a complete example that handles all availability states:
Showing User Prompts
The client includes a built-in install prompt that guides users through installation:
Checking Capabilities
Check if specific capabilities are available (e.g., image generation, embeddings):
React Hook
Use the useWebLLMStatus hook for reactive availability checking:
Fallback Options
When the extension isn't available, you have several fallback options:
Gateway Public Tokens
You can provide a pool of credits for users who don't have the extension installed. This is done through WebLLM Gateways with public access tokens:
Gateway Documentation
Mock Mode for Development
During development, you can use mock mode to test your UI without a real LLM:
Listening for Availability Changes
The extension fires a webllm:ready event when it becomes available:
API Reference
isAvailable()
Check if WebLLM is available (extension or daemon).
getBrowserInfo()
Get browser compatibility information.
getProviderStatus()
Check if providers are configured and which ones are available.
promptInstall()
Show a UI prompt to install the extension. Resolves when the extension becomes available.
webLlmReady(timeout?)
Wait for WebLLM to become available with an optional timeout.
Next Steps
- Quick Start - Make your first request
- Gateways - Set up fallback infrastructure
- Providers - Configure AI providers