How to Integrate LLMs into Your JavaScript Stack: A Practical Guide

npm install ai @ai-sdk/openai @ai-sdk/anthropic @ai-sdk/google

// app/api/generate/route.ts
import { generateText } from 'ai';
import { openai } from '@ai-sdk/openai';

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

  const { text } = await generateText({
    model: openai('gpt-4o'),
    prompt: prompt,
  });

  return Response.json({ text });
}

// app/api/chat/route.ts
import { streamText } from 'ai';
import { anthropic } from '@ai-sdk/anthropic';

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

  const result = streamText({
    model: anthropic('claude-3-5-sonnet-20241022'),
    system: 'You are a helpful assistant.',
    messages,
  });

  return result.toUIMessageStreamResponse();
}

// app/page.tsx
'use client';

import { useChat } from '@ai-sdk/react';

export default function Chat() {
  const { messages, input, handleInputChange, handleSubmit, status } = useChat({
    api: '/api/chat',
  });

  return (
    <div>
      {messages.map(message => (
        <div key={message.id}>
          <strong>{message.role}: </strong>
          {message.parts.map((part, i) => {
            if (part.type === 'text') return <span key={i}>{part.text}</span>;
            // Handle images, tool calls, etc.
          })}
        </div>
      ))}
      <form onSubmit={handleSubmit}>
        <input
          value={input}
          onChange={handleInputChange}
          disabled={status !== 'ready'}
          placeholder="Send a message..."
        />
      </form>
    </div>
  );
}

import { generateObject } from 'ai';
import { z } from 'zod';

const { object } = await generateObject({
  model: openai('gpt-4o'),
  schema: z.object({
    sentiment: z.enum(['positive', 'neutral', 'negative']),
    confidence: z.number().min(0).max(1),
    keyTopics: z.array(z.string()),
  }),
  prompt: 'Analyze the sentiment of this customer review: ...',
});

// object is fully typed!
console.log(object.sentiment); // 'positive'

// Using the AI Gateway (no per-provider SDKs needed)
const result = await generateText({
  model: 'anthropic/claude-opus-4.6', // or 'openai/gpt-5.4', 'google/gemini-3-flash'
  prompt: 'Hello!',
});

npm install langchain @langchain/openai @langchain/community

import { PromptTemplate } from '@langchain/core/prompts';
import { ChatOpenAI } from '@langchain/openai';
import { StringOutputParser } from '@langchain/core/output_parsers';
import { RunnableSequence } from '@langchain/core/runnables';

const model = new ChatOpenAI({ modelName: 'gpt-4o' });
const prompt = PromptTemplate.fromTemplate(
  'Write a {tone} product description for {product}. Target audience: {audience}.'
);

const chain = RunnableSequence.from([prompt, model, new StringOutputParser()]);

const result = await chain.invoke({
  tone: 'enthusiastic',
  product: 'wireless noise-cancelling headphones',
  audience: 'frequent travelers',
});

import { RecursiveCharacterTextSplitter } from '@langchain/textsplitters';
import { OpenAIEmbeddings } from '@langchain/openai';
import { MemoryVectorStore } from 'langchain/vectorstores/memory';

// Split documents into chunks
const splitter = new RecursiveCharacterTextSplitter({ chunkSize: 1000 });
const documents = await splitter.splitDocuments(loadedDocs);

// Create vector store
const vectorStore = await MemoryVectorStore.fromDocuments(
  documents,
  new OpenAIEmbeddings()
);

// Retrieve relevant context
const relevantDocs = await vectorStore.similaritySearch('user question', 3);

import { wrapAISDK } from 'langsmith/wrappers/vercel-ai-sdk';
import { generateText } from 'ai';

const wrappedGenerateText = wrapAISDK({ generateText });

// All calls to generateText are now traced to LangSmith
const result = await wrappedGenerateText({ model, prompt });

//  Initialize session as soon as user intent is identified
const session = await LanguageModel.create({
  initialPrompts: [
    { role: 'system', content: 'You are a helpful assistant specialized in code reviews.' }
  ]
});

// Later, when the user triggers the feature
const review = await session.prompt(`Review this code:\n\n${code}`);

//  Don't: Creates cold start delay of several seconds
button.onclick = async () => {
  const session = await LanguageModel.create();
  const result = await session.prompt(prompt);
};

//  Do: Create a baseline session and clone it
const baseSession = await LanguageModel.create({
  initialPrompts: [{ role: 'system', content: 'You are a technical editor...' }],
});

// Clone for each task – inherits all instructions
const task1 = await baseSession.clone();
const response1 = await task1.prompt("Review this draft...");

// Destroy clones when done to free memory
task1.destroy();

const schema = {
  type: 'object',
  properties: {
    isCodeIssue: { type: 'boolean' },
    severity: { enum: ['low', 'medium', 'high'] }
  }
};

const result = await session.prompt(`Analyze this code:\n\n${code}`, {
  responseConstraint: schema,
});

const parsed = JSON.parse(result);
console.log(parsed.severity);

import * as smd from 'streaming-markdown';

const sanitizer = new Sanitizer({
  allowElements: ['p', 'strong', 'em', 'code', 'a'],
  allowAttributes: { 'href': ['a'] }
});

const buffer = new DocumentFragment();
const parser = smd.parser_new(buffer);

// Stream chunks through markdown parser
smd.parser_write(parser, chunk);

// Sanitize and render
const cleanFragment = sanitizer.sanitize(buffer);
container.replaceChildren(cleanFragment);

import { pipeline } from '@xenova/transformers';

// Load model (cached after first download)
const generator = await pipeline('text-generation', 'onnx-community/Llama-3.2-1B-Instruct');

// Run inference locally
const result = await generator('Explain WebGPU in simple terms:', {
  max_new_tokens: 256,
  temperature: 0.7,
});

import { CreateMLCEngine } from '@mlc-ai/web-llm';

const engine = await CreateMLCEngine('Llama-3.2-1B-Instruct-q4f32_1');
const reply = await engine.chat.completions.create({
  messages: [{ role: 'user', content: 'What is WebGPU?' }],
});

import { pipe, promptInjection, pii, keyword } from 'open-guardrail';

const result = await pipe(
  promptInjection({ action: 'block' }),
  pii({ entities: ['email', 'phone'], action: 'mask' }),
  keyword({ denied: ['hack', 'exploit'], action: 'block' })
).run(userInput);

if (!result.passed) {
  console.log('Blocked:', result.action);
}

import { GuardrailsModule } from '@hazeljs/guardrails';

@HazelModule({
  imports: [
    GuardrailsModule.forRoot({
      redactPIIByDefault: true,
      blockInjectionByDefault: true,
      blockToxicityByDefault: true,
    }),
  ],
})
export class AppModule {}

// Use with @AITask for automatic guardrails
@GuardrailInput()
@GuardrailOutput()
@AITask({ provider: 'openai', model: 'gpt-4' })
async chat(@Body() body: { message: string }) {
  return body.message;
}

import { AirClient } from '@arcede/air-sdk';

const client = new AirClient({ apiKey: process.env.AIR_API_KEY });

// One API call, regardless of workflow complexity
const capability = await client.browseCapabilities('amazon.com');
await client.executeCapability(capability, 'search for noise-cancelling headphones');

import { wrapAISDK } from 'langsmith/wrappers/vercel-ai-sdk';
import { generateText, streamText } from 'ai';

const wrapped = wrapAISDK({
  generateText,
  streamText,
});

// All calls are now automatically traced to LangSmith
const result = await wrapped.generateText({ model, prompt });