Free LLM APIs for JavaScript & TypeScript: Fetch, Streaming & SDKs

You do not need heavy external packages to query OpenAI-compatible free endpoints in modern Node.js or browser environments:

``javascript async function askGroq(prompt) { const response = await fetch("https://api.groq.com/openai/v1/chat/completions", { method: "POST", headers: { "Authorization": Bearer ${process.env.GROQ_API_KEY}`, "Content-Type": "application/json" }, body: JSON.stringify({ model: "llama-3.3-70b-versatile", messages: [{ role: "user", content: prompt }], temperature: 0.3 }) });

const data = await response.json(); return data.choices[0].message.content; } ```

Stream token chunks in real-time to your React frontend using Web Streams API:

```typescript // app/api/chat/route.ts import { OpenAI } from 'openai';

const groq = new OpenAI({ baseURL: 'https://api.groq.com/openai/v1', apiKey: process.env.GROQ_API_KEY, });

export async function POST(req: Request) { const { messages } = await req.json();

const stream = await groq.chat.completions.create({ model: 'llama-3.3-70b-versatile', messages, stream: true, });

const encoder = new TextEncoder(); const readable = new ReadableStream({ async start(controller) { for await (const chunk of stream) { const text = chunk.choices[0]?.delta?.content || ''; controller.enqueue(encoder.encode(text)); } controller.close(); }, });

return new Response(readable, { headers: { 'Content-Type': 'text/plain; charset=utf-8' }, }); } ```

The Vercel AI SDK provides high-level UI hooks (useChat, useCompletion). You can plug in free Google AI Studio or Groq backends directly:

```typescript import { createGoogleGenerativeAI } from '@ai-sdk/google'; import { streamText } from 'ai';

const google = createGoogleGenerativeAI({ apiKey: process.env.GEMINI_API_KEY, });

export async function POST(req: Request) { const { prompt } = await req.json();

const result = await streamText({ model: google('gemini-2.0-flash'), prompt, });

return result.toDataStreamResponse(); } ```