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>

packages/website/src/freeProviders.ts

@@ -0,0 +1,121 @@
+export type FreeTierBadge = 'best' | 'no-card' | 'trial';
+
+export type FreeProvider = {
+  id: 'groq' | 'openrouter' | 'anthropic' | 'openai';
+  name: string;
+  badge?: FreeTierBadge;
+  badgeLabel?: string;
+  summary: string;
+  creditCard: string;
+  limits: string;
+  lexaiModel: string;
+  signupUrl: string;
+  docsUrl: string;
+  steps: string[];
+};
+
+export const FREE_PROVIDER_BADGES: Record<FreeTierBadge, string> = {
+  best: 'Best free option',
+  'no-card': 'No card needed',
+  trial: 'Trial credits',
+};
+
+/** How to use LexAI at $0 — provider free tiers as of 2026. Limits change; verify on each site. */
+export const FREE_PROVIDERS: FreeProvider[] = [
+  {
+    id: 'groq',
+    name: 'Groq',
+    badge: 'best',
+    badgeLabel: 'Best free option',
+    summary:
+      'Ongoing free API access with no credit card. Rate limits apply, but there is no per-token charge on the free tier — ideal for daily writing help and light coding assist.',
+    creditCard: 'Not required',
+    limits: 'Rate-limited (roughly 30 requests/min; daily caps vary by model). Check the Groq console for your org.',
+    lexaiModel: 'llama-3.3-70b-versatile',
+    signupUrl: 'https://console.groq.com/keys',
+    docsUrl: 'https://console.groq.com/docs/overview',
+    steps: [
+      'Create a Groq account at console.groq.com — no payment method needed.',
+      'Generate an API key under API Keys.',
+      'In LexAI Options (Chrome), Settings (VS Code), or LEXAI_PROVIDER=groq (CLI): choose Groq, paste the key.',
+      'Optional: set model to llama-3.1-8b-instant for faster, lighter requests on tighter limits.',
+    ],
+  },
+  {
+    id: 'openrouter',
+    name: 'OpenRouter',
+    badge: 'no-card',
+    badgeLabel: 'No card needed',
+    summary:
+      '25+ models at $0 per token via the :free suffix or the openrouter/free router. One API key covers many models — good for experimenting before you commit to a host.',
+    creditCard: 'Not required for free models',
+    limits:
+      'About 20 requests/min. ~50 free requests/day without credits; ~1,000/day after a one-time $10 credit purchase (credits never expire).',
+    lexaiModel: 'openrouter/free',
+    signupUrl: 'https://openrouter.ai/settings/keys',
+    docsUrl: 'https://openrouter.ai/docs/guides/routing/model-variants/free',
+    steps: [
+      'Sign up at openrouter.ai and create an API key.',
+      'In LexAI, choose OpenRouter and paste the key.',
+      'Set model to openrouter/free (auto-picks a free model) or a specific slug such as meta-llama/llama-3.3-70b-instruct:free.',
+      'Optional: add $10 in credits once to raise the daily free-model cap to ~1,000 requests — still $0 per token on free routes.',
+    ],
+  },
+  {
+    id: 'anthropic',
+    name: 'Anthropic',
+    badge: 'trial',
+    badgeLabel: 'Trial credits',
+    summary:
+      'New Console accounts receive a small one-time API credit (often around $5) with no card required to claim. Enough to try Claude-powered writing and Code Assist before prepaid billing.',
+    creditCard: 'Not required to claim starter credit',
+    limits: 'One-time credit balance; then pay-as-you-go. Use Haiku models to stretch the trial further.',
+    lexaiModel: 'claude-3-5-haiku-20241022',
+    signupUrl: 'https://console.anthropic.com/',
+    docsUrl: 'https://docs.anthropic.com/en/api/getting-started',
+    steps: [
+      'Create an account at console.anthropic.com and claim the new-user API credit.',
+      'Create an API key under API Keys.',
+      'In LexAI, choose Anthropic, paste the key, and keep the default Haiku model for lowest cost.',
+      'When credits run out, add prepaid balance or switch to Groq or OpenRouter for ongoing free usage.',
+    ],
+  },
+  {
+    id: 'openai',
+    name: 'OpenAI',
+    badge: 'trial',
+    badgeLabel: 'Limited trial',
+    summary:
+      'No permanent free API tier. Some new accounts still receive a short-lived trial credit; otherwise a minimum prepaid purchase is required. Mentioned for completeness — Groq or OpenRouter are better $0 paths.',
+    creditCard: 'Required for ongoing use; trial availability varies',
+    limits: 'Trial credits (if offered) expire after a few months. Prepaid billing from about $5 minimum after trial.',
+    lexaiModel: 'gpt-4o-mini',
+    signupUrl: 'https://platform.openai.com/api-keys',
+    docsUrl: 'https://platform.openai.com/docs/guides/rate-limits',
+    steps: [
+      'Create an account at platform.openai.com and check Billing for any trial balance.',
+      'If trial credit is available, create an API key and use it in LexAI with provider OpenAI.',
+      'Prefer gpt-4o-mini to conserve tokens during evaluation.',
+      'For sustained free usage, use Groq or OpenRouter instead — OpenAI is pay-as-you-go after any trial.',
+    ],
+  },
+];
+
+export const LEXAI_FREE_HIGHLIGHTS = [
+  {
+    title: 'LexAI is always $0',
+    body: 'No LexAI subscription, account, or backend. You only connect a provider API key you control.',
+  },
+  {
+    title: 'Same key, three apps',
+    body: 'Chrome extension, VS Code / Cursor, and CLI Prompt Builder all use the same supported providers.',
+  },
+  {
+    title: 'Start with Groq or OpenRouter',
+    body: 'Both offer real ongoing free API access without a credit card — enough for grammar fixes, rewrites, and light Code Assist.',
+  },
+  {
+    title: 'Your key stays local',
+    body: 'Keys are encrypted in Chrome, stored in VS Code Secret Storage, or read from env in the CLI — never sent to LexAI.',
+  },
+] as const;

packages/website/src/pages/DocsPage.tsx

@@ -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>

packages/website/src/pages/HomePage.tsx

@@ -1,5 +1,6 @@
 import { Link, useNavigate } from 'react-router-dom';
 import { LogoMark } from '../components/LogoMark';
+import { FREE_PROVIDERS, FREE_PROVIDER_BADGES, LEXAI_FREE_HIGHLIGHTS } from '../freeProviders';
 import { CHROME_STORE, REPO, VSCODE_MARKETPLACE } from '../links';
 
 function openDocsSection(navigate: ReturnType<typeof useNavigate>, id: string) {
@@ -57,7 +58,8 @@ export function HomePage() {
           <h1>Skip Grammarly and Copilot subscriptions</h1>
           <p className="hero-lead">
             Writing help on any webpage. Coding assist in VS Code or Cursor. You bring the API key —
-            LexAI has no account, no servers, and no fee.
+            LexAI has no account, no servers, and no fee. Use Groq or OpenRouter for ongoing free
+            API access.
           </p>
           <div className="cta-row">
             <a className="btn btn-primary" href={CHROME_STORE} target="_blank" rel="noreferrer">
@@ -104,6 +106,66 @@ export function HomePage() {
         </div>
       </section>
 
+      <section className="section" id="free">
+        <div className="wrap">
+          <p className="section-kicker">Use it free</p>
+          <h2>LexAI costs nothing — your provider can too</h2>
+          <p className="section-lead">
+            LexAI never charges a subscription. Connect a free-tier API key from a supported provider
+            and get Grammarly-style writing help and Copilot-style coding assist without paying
+            Grammarly or Copilot.
+          </p>
+          <ul className="free-highlights">
+            {LEXAI_FREE_HIGHLIGHTS.map((item) => (
+              <li key={item.title}>
+                <strong>{item.title}</strong>
+                <p>{item.body}</p>
+              </li>
+            ))}
+          </ul>
+          <div className="provider-grid">
+            {FREE_PROVIDERS.map((provider) => (
+              <article key={provider.id} className="provider-card">
+                <div className="provider-card-head">
+                  <strong>{provider.name}</strong>
+                  {provider.badge ? (
+                    <span className={`provider-badge provider-badge-${provider.badge}`}>
+                      {provider.badgeLabel ?? FREE_PROVIDER_BADGES[provider.badge]}
+                    </span>
+                  ) : null}
+                </div>
+                <p>{provider.summary}</p>
+                <dl className="provider-meta">
+                  <div>
+                    <dt>Credit card</dt>
+                    <dd>{provider.creditCard}</dd>
+                  </div>
+                  <div>
+                    <dt>LexAI model</dt>
+                    <dd>
+                      <code>{provider.lexaiModel}</code>
+                    </dd>
+                  </div>
+                </dl>
+                <a
+                  className="more"
+                  href={provider.signupUrl}
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  Get API key →
+                </a>
+              </article>
+            ))}
+          </div>
+          <p className="free-footnote">
+            Rate limits and trial amounts change — verify on each provider&apos;s site. Full setup
+            steps are in{' '}
+            <Link to="/docs#free">Free LLM setup</Link>.
+          </p>
+        </div>
+      </section>
+
       <section className="section" id="features">
         <div className="wrap">
           <p className="section-kicker">Product</p>

packages/website/src/styles.css

@@ -373,6 +373,162 @@ a.package-card {
   color: var(--muted);
 }
 
+/* Free tier section */
+.free-highlights {
+  display: grid;
+  gap: 0;
+  list-style: none;
+  margin: 0 0 2rem;
+  padding: 0;
+}
+
+@media (min-width: 700px) {
+  .free-highlights {
+    grid-template-columns: 1fr 1fr;
+    column-gap: 3rem;
+  }
+}
+
+.free-highlights li {
+  padding: 1rem 0;
+  border-top: 1px solid var(--line);
+}
+
+.free-highlights strong {
+  display: block;
+  margin-bottom: 0.25rem;
+  font-size: 0.95rem;
+}
+
+.free-highlights p {
+  margin: 0;
+  color: var(--muted);
+  font-size: 0.92rem;
+}
+
+.provider-grid {
+  display: grid;
+  gap: 0.75rem;
+}
+
+@media (min-width: 700px) {
+  .provider-grid {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+.provider-card {
+  display: flex;
+  flex-direction: column;
+  gap: 0.55rem;
+  padding: 1.2rem 1.15rem 1.25rem;
+  border-radius: var(--radius);
+  background: var(--surface);
+  border: 1px solid var(--line);
+}
+
+.provider-card-head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.provider-card strong {
+  font-size: 0.98rem;
+  font-weight: 600;
+}
+
+.provider-card > p {
+  margin: 0;
+  flex: 1;
+  color: var(--muted);
+  font-size: 0.9rem;
+}
+
+.provider-badge {
+  display: inline-block;
+  padding: 0.15rem 0.45rem;
+  border-radius: 4px;
+  font-size: 0.68rem;
+  font-weight: 600;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+}
+
+.provider-badge-best {
+  background: #eef2ff;
+  color: var(--indigo-deep);
+}
+
+.provider-badge-no-card {
+  background: #ecfdf5;
+  color: #047857;
+}
+
+.provider-badge-trial {
+  background: #fef9ec;
+  color: #92400e;
+}
+
+.provider-meta {
+  display: grid;
+  gap: 0.45rem;
+  margin: 0;
+  font-size: 0.82rem;
+}
+
+.provider-meta dt {
+  margin: 0;
+  font-weight: 600;
+  color: var(--ink);
+}
+
+.provider-meta dd {
+  margin: 0.1rem 0 0;
+  color: var(--muted);
+}
+
+.provider-card .more {
+  font-weight: 500;
+  font-size: 0.82rem;
+  color: var(--indigo);
+  text-decoration: none;
+}
+
+.provider-card .more:hover {
+  color: var(--indigo-deep);
+}
+
+.free-footnote {
+  margin: 1.25rem 0 0;
+  font-size: 0.88rem;
+  color: var(--muted);
+}
+
+.docs-provider {
+  margin-top: 1.5rem;
+  padding-top: 1.25rem;
+  border-top: 1px solid var(--line);
+}
+
+.docs-provider:first-of-type {
+  margin-top: 0.75rem;
+}
+
+.docs-provider h4 {
+  margin: 0 0 0.35rem;
+  font-size: 1rem;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  color: var(--ink);
+  text-transform: none;
+}
+
+.docs-provider > p {
+  margin: 0 0 0.5rem;
+}
+
 /* Inner pages (Contribute, Community) */
 .page {
   padding: 2.75rem 0 4.5rem;