The JavaScript/TypeScript AI Ecosystem

Introduction

Every example so far has used Python, but the frontend and full-stack side of generative AI leans heavily on JavaScript and TypeScript — chat UIs need to stream tokens straight into a React component, and a Next.js API route is a natural place to call an LLM from. This lesson covers the two tools most used to do that.

A Real-Life Analogy First

Think of a restaurant's front-of-house waiter versus its back-of-house kitchen staff. The kitchen (Python, most of this course) focuses purely on producing the dish correctly. The waiter (JavaScript/TypeScript on the frontend) focuses on a completely different set of concerns: bringing food to the table promptly, refilling water without being asked, and updating the table the moment something is ready rather than making them wait in silence for the whole meal to be plated. Streaming a chat response token-by-token into a UI is exactly that "waiter" job — the words are ready before the full response is, and good UI shows them immediately instead of making the user stare at a blank screen.

Why JS/TS Has Its Own Ecosystem

A chat interface needs to display tokens as they stream in, handle React state updates efficiently, and often runs at the edge for low latency — problems specific to the frontend/full-stack world that a Python backend doesn't directly solve. JS/TS-native SDKs are built with exactly those concerns in mind.

The Vercel AI SDK

Use case: the Vercel AI SDK (the ai package) provides a unified interface across LLM providers plus React/Vue/Svelte hooks purpose-built for streaming chat UIs — useChat() alone handles message state, streaming, and re-renders that would otherwise take significant custom code.

npm install ai @ai-sdk/openai

Vercel AI SDK in Action

// app/api/chat/route.ts (Next.js API route)
import { openai } from '@ai-sdk/openai';
import { streamText } from 'ai';

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

  const result = streamText({
    model: openai('gpt-4o-mini'),
    messages,
  });

  return result.toDataStreamResponse();
}

// app/page.tsx (a React client component)
'use client';
import { useChat } from 'ai/react';

export default function Chat() {
  const { messages, input, handleInputChange, handleSubmit } = useChat();

  return (
    <div>
      {messages.map((m) => (
        <p key={m.id}><strong>{m.role}:</strong> {m.content}</p>
      ))}
      <form onSubmit={handleSubmit}>
        <input value={input} onChange={handleInputChange} />
      </form>
    </div>
  );
}

LangChain.js

Use case: LangChain.js mirrors the Python LangChain library from lesson 9 — prompt templates, provider-agnostic model wrappers, and LCEL-style chain composition — for projects that want the same orchestration patterns without leaving the JS/TS ecosystem.

npm install langchain @langchain/openai

import { ChatOpenAI } from '@langchain/openai';
import { ChatPromptTemplate } from '@langchain/core/prompts';

const model = new ChatOpenAI({ model: 'gpt-4o-mini', temperature: 0.3 });

const prompt = ChatPromptTemplate.fromMessages([
  ['system', 'You are a concise technical writer.'],
  ['user', 'Explain {topic} to a beginner in two sentences.'],
]);

const chain = prompt.pipe(model);
const result = await chain.invoke({ topic: 'database indexing' });
console.log(result.content);

Choosing Between Them

Common Mistakes

Best Practices

Frequently Asked Questions

Key Takeaways

Summary

The JS/TS side of this ecosystem is not a separate world from the Python examples earlier in this course — it is the same patterns (provider calls, chains, streaming) expressed in the language your frontend already speaks.