https://github.com/sanand0/bootstrap-llm-provider
Let users pick their OpenAI compatible API provider (e.g. OpenRouter, Ollama) via a Bootstrap modal
https://github.com/sanand0/bootstrap-llm-provider
library llm
Last synced: 5 months ago
JSON representation
Let users pick their OpenAI compatible API provider (e.g. OpenRouter, Ollama) via a Bootstrap modal
- Host: GitHub
- URL: https://github.com/sanand0/bootstrap-llm-provider
- Owner: sanand0
- License: mit
- Created: 2025-07-20T11:44:47.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2025-09-25T16:08:39.000Z (9 months ago)
- Last Synced: 2026-02-14T03:14:06.664Z (5 months ago)
- Topics: library, llm
- Language: HTML
- Homepage: https://sanand0.github.io/bootstrap-llm-provider/
- Size: 36.1 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Bootstrap LLM Provider
[](https://www.npmjs.com/package/bootstrap-llm-provider)
[](https://getbootstrap.com/)
[](https://opensource.org/licenses/MIT)
[](https://bundlephobia.com/package/bootstrap-llm-provider)
Let users pick their OpenAI compatible API provider (e.g. OpenRouter, Ollama) via a Bootstrap modal
## Installation
Add this to your script:
```js
import { geminiConfig, openaiConfig } from "bootstrap-llm-provider";
```
To use via CDN, add this to your HTML file:
```html
{
"imports": {
"bootstrap-llm-provider": "https://cdn.jsdelivr.net/npm/bootstrap-llm-provider@1"
}
}
```
To use locally, install via `npm`:
```bash
npm install bootstrap-llm-provider
```
... and add this to your HTML file:
```html
{
"imports": {
"bootstrap-llm-provider": "./node_modules/bootstrap-llm-provider/dist/bootstrap-llm-provider.js"
}
}
```
## Usage
```js
import { geminiConfig, openaiConfig } from "https://cdn.jsdelivr.net/npm/bootstrap-llm-provider@1.2";
// Basic Config - Opens a model and asks user for provider details
const { baseUrl, apiKey, models } = await openaiConfig();
// API key is optional if your provider doesn't require one
// Always Show Modal - even if user has provided information before
const { baseUrl, apiKey, models } = await openaiConfig({ show: true });
// Custom Base URLs (datalist)
const { baseUrl, apiKey, models } = await openaiConfig({
defaultBaseUrls: ["https://api.openai.com/v1", "https://openrouter.com/api/v1"],
});
// Base URL Options (select)
const { baseUrl, apiKey, models } = await openaiConfig({
baseUrls: [
{ url: "https://api.openai.com/v1", name: "OpenAI" },
{ url: "https://openrouter.com/api/v1", name: "OpenRouter" },
],
// baseUrls overrides defaultBaseUrls
});
// Custom Storage - store in sessionStorage.llmProvider
const { baseUrl, apiKey, models } = await openaiConfig({ storage: sessionStorage, key: "llmProvider" });
// Custom Labels
const { baseUrl, apiKey, models } = await openaiConfig({
title: "Pick a provider",
baseUrlLabel: "Your URL",
apiKeyLabel: "Your Key",
buttonLabel: "Save",
});
// Help HTML
const { baseUrl, apiKey, models } = await openaiConfig({
help: '
Get your key from here
',
show: true,
});
// Gemini Config - defaults to Google endpoint + three proxy hosts
const gemini = await geminiConfig();
console.log(gemini.baseUrl, gemini.apiKey, gemini.models);
// Gemini Proxy example (forces proxy base URL and opens modal)
const proxyResult = await geminiConfig({
defaultBaseUrls: ["https://aipipe.org/geminiv1beta"],
show: true,
});
// => { baseUrl: "https://aipipe.org/geminiv1beta", apiKey: "...", models: ["gemini-1.5-flash", ...] }
```
[](demo.html ":include")
## API
```js
async function openaiConfig({
storage: localStorage, // where to store, e.g. sessionStorage
key: "bootstrapLLMProvider_openaiConfig", // key name for storage
defaultBaseUrls: ["https://api.openai.com/v1"], // array of URL strings for user to pick from
baseUrls: undefined, // array of { url, name } objects
show: false, // true will force prompt even if config exists
help: "", // HTML rendered at top of modal
title: "OpenAI API Configuration", // modal dialog title
baseUrlLabel: "API Base URL", // base URL label
apiKeyLabel: "API Key", // api key label
buttonLabel: "Save & Test", // submit button label
})
// Returns: { baseUrl, apiKey, models: string[] }
```
```js
async function geminiConfig({
storage: localStorage,
key: "bootstrapLLMProvider_geminiConfig",
defaultBaseUrls: [
"https://generativelanguage.googleapis.com/v1beta",
"https://aipipe.org/geminiv1beta",
"https://llmfoundry.straive.com/gemini/v1beta",
"https://llmfoundry.straivedemo.com/gemini/v1beta",
],
baseUrls: undefined,
show: false,
help: "",
title: "Google Gemini API Configuration",
baseUrlLabel: "Gemini API Base URL",
apiKeyLabel: "API Key or Token",
buttonLabel: "Save & Test",
})
// Returns: { baseUrl, apiKey, models: string[] }
```
- `geminiConfig` auto-detects Google's native host vs. proxies and sends the right auth headers:
- `https://generativelanguage.googleapis.com` receives the `x-goog-api-key`
- Other
- the provided proxy URLs receive `Authorization: Bearer `
- Responses from `{ models: [...] }` or `{ data: [...] }` are normalized and return bare model names (with `models/` stripped)
- If there's no valid config, or `show` is true, it displays a Bootstrap modal with:
- Base URL input with datalist of `defaultBaseUrls`, or a select of `baseUrls`
- API key input, may be empty, prefilled from storage if present
- `help` HTML inserted at the top if provided
- On submit, it:
1. Fetches `${baseUrl}/models` using the API key
2. On success, save `{ baseUrl, apiKey }` to storage under `key`; return `{ baseUrl, apiKey, models }`
3. On failure, throws an Error
- `baseUrls` overrides `defaultBaseUrls` if both are provided
- If config exists, it skips the prompt, fetches models and returns
## Development
```bash
git clone https://github.com/sanand0/bootstrap-llm-provider.git
cd bootstrap-llm-provider
npm install
npm run lint && npm run build && npm test
npm publish
git commit . -m"$COMMIT_MSG"; git tag $VERSION; git push --follow-tags
```
## Design decisions
- Return `baseUrl` but retain `baseURL` for compatibility and popularity. [ChatGPT](https://chatgpt.com/share/68d55d4a-92fc-800c-8ff3-db5ff423797e)
## Release notes
- [1.4.0](https://npmjs.com/package/bootstrap-llm-provider/v/1.4.0): 25 Sep 2025. Add `geminiConfig` for Gemini endpoints
- [1.3.1](https://npmjs.com/package/bootstrap-llm-provider/v/1.3.1): 31 Jul 2025. Standardized package.json & README.md
- [1.2.0](https://npmjs.com/package/bootstrap-llm-provider/v/1.2.0): 28 Jul 2025. Optional `help` HTML parameter
- [1.1.0](https://npmjs.com/package/bootstrap-llm-provider/v/1.1.0): 25 Jul 2025. Optional API key, `baseUrls` select, `baseUrl` renamed (returns `baseURL` for compatibility)
- [1.0.0](https://npmjs.com/package/bootstrap-llm-provider/v/1.0.0): 20 Jul 2025. Initial release
## License
[MIT](LICENSE)