dev #4
121
packages/website/src/freeProviders.ts
Normal file
121
packages/website/src/freeProviders.ts
Normal file
@@ -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;
|
||||
@@ -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'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'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>
|
||||
|
||||
@@ -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'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>
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user