feat(website): show how to run LexAI on free provider tiers

Point visitors at Groq and OpenRouter for ongoing  API access, with per-provider setup on the docs page.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
john kevin asprec
2026-08-18 08:54:43 +08:00
parent efdae32ae1
commit 2b2bdeac7a
4 changed files with 427 additions and 1 deletions

View File

@@ -1,5 +1,6 @@
import { useEffect } from 'react';
import { Link } from 'react-router-dom';
import { FREE_PROVIDERS } from '../freeProviders';
import { CHROME_STORE, REPO, VSCODE_MARKETPLACE } from '../links';
function scrollToSection(id: string) {
@@ -17,6 +18,7 @@ export function DocsPage() {
const nav = [
['overview', 'Overview'],
['free', 'Free LLM setup'],
['chrome', 'Chrome'],
['vscode', 'VS Code'],
['cli', 'CLI'],
@@ -62,6 +64,91 @@ export function DocsPage() {
</ul>
</section>
<section className="docs-block" id="free">
<h2>Free LLM setup</h2>
<p>
LexAI is free — no subscription, no LexAI account. To use it at $0 ongoing, connect a
provider that offers a free API tier. Groq and OpenRouter are the most practical; Anthropic
and OpenAI offer small trial credits but not a permanent free API.
</p>
<h3>Recommended path</h3>
<ol>
<li>
Install LexAI (Chrome, VS Code, or CLI) — see <a href="#install">Install</a>.
</li>
<li>
Sign up for <a href="https://console.groq.com/keys" target="_blank" rel="noreferrer">Groq</a>{' '}
(no credit card) or{' '}
<a href="https://openrouter.ai/settings/keys" target="_blank" rel="noreferrer">
OpenRouter
</a>{' '}
(no card for free models).
</li>
<li>Create an API key on that provider&apos;s dashboard.</li>
<li>
In LexAI: choose the provider, paste the key, and set the model slug below (Chrome
Options → Model; VS Code Settings → Model; CLI{' '}
<code>LEXAI_MODEL</code>).
</li>
<li>Select text and run an action — requests go directly to your provider, not LexAI.</li>
</ol>
<h3>Providers</h3>
{FREE_PROVIDERS.map((provider) => (
<div key={provider.id} className="docs-provider">
<h4>{provider.name}</h4>
<p>{provider.summary}</p>
<ul>
<li>
<strong>Credit card:</strong> {provider.creditCard}
</li>
<li>
<strong>Limits:</strong> {provider.limits}
</li>
<li>
<strong>Suggested LexAI model:</strong> <code>{provider.lexaiModel}</code>
</li>
</ul>
<p>
<strong>Setup</strong>
</p>
<ol>
{provider.steps.map((step) => (
<li key={step}>{step}</li>
))}
</ol>
<div className="docs-meta">
<a className="btn btn-ghost" href={provider.signupUrl} target="_blank" rel="noreferrer">
Get API key
</a>
<a className="btn btn-ghost" href={provider.docsUrl} target="_blank" rel="noreferrer">
Provider docs
</a>
</div>
</div>
))}
<h3>CLI example (Groq, free tier)</h3>
<pre className="mono">{`# PowerShell
$env:LEXAI_API_KEY = "gsk_..."
$env:LEXAI_PROVIDER = "groq"
$env:LEXAI_MODEL = "llama-3.3-70b-versatile"
lexai prompt "rewrite this email to sound more professional"
# bash
export LEXAI_API_KEY=gsk_...
export LEXAI_PROVIDER=groq
export LEXAI_MODEL=llama-3.3-70b-versatile
lexai prompt "summarize this README"`}</pre>
<h3>CLI example (OpenRouter, free models)</h3>
<pre className="mono">{`export LEXAI_API_KEY=sk-or-...
export LEXAI_PROVIDER=openrouter
export LEXAI_MODEL=openrouter/free
lexai prompt "turn this bullet list into a user story"`}</pre>
<p>
Limits and trial amounts change. Check each provider&apos;s pricing and rate-limit pages
before relying on a free tier in production.
</p>
</section>
<section className="docs-block" id="chrome">
<h2>Chrome extension</h2>
<p>