--- title: "Browser Examples" description: "Run elizaOS agents client-side with React, Next.js, and vanilla HTML" --- Run AI agents entirely in the browser. No server required for basic functionality. These examples use in-browser databases and pattern matching to work offline. ## Overview | Example | Framework | Directory | Features | | ------- | ------------ | ---------------------- | ---------------------------------- | | HTML | Vanilla JS | `examples/html/` | Zero dependencies, CRT terminal UI | | React | React + Vite | `examples/react/` | Full React app with PGLite | | Next.js | Next.js 14 | `examples/next/` | SSR + API routes | --- ## Quick Start ```bash cd examples/html # Open index.html in your browser, or: python -m http.server 8000 # Visit http://localhost:8000 ``` ```bash cd examples/react bun install bun dev # Visit http://localhost:5173 ``` ```bash cd examples/next bun install OPENAI_API_KEY="your-key" bun dev # Visit http://localhost:3000 ```` --- ## HTML Example The simplest browser implementation. Pure HTML, CSS, and JavaScript with a beautiful retro CRT terminal interface. **Features:** - Zero build step required - Classic ELIZA pattern matching - localStorage persistence - Retro phosphor green aesthetic - Works completely offline ```html ELIZA - elizaOS Browser Demo
``` --- ## React Example Full React application with PGLite for in-browser PostgreSQL-compatible storage. **Features:** - Full elizaOS AgentRuntime - PGLite database (IndexedDB backend) - Classic ELIZA plugin (no API keys) - Retro CRT terminal styling - Persistent conversation history ```typescript // eliza-runtime.ts import { AgentRuntime, stringToUuid } from "@elizaos/core"; import { elizaClassicPlugin } from "@elizaos/plugin-eliza-classic"; import { plugin as sqlPlugin } from "@elizaos/plugin-sql"; let runtime: AgentRuntime | null = null; export async function getRuntime(): Promise { if (runtime) return runtime; runtime = new AgentRuntime({ character: { name: "Eliza", bio: "A Rogerian psychotherapist simulation.", }, plugins: [sqlPlugin, elizaClassicPlugin], }); await runtime.initialize(); return runtime; } ``` ```tsx // App.tsx import { useState, useEffect, useRef } from "react"; import { getRuntime } from "./eliza-runtime"; import type { AgentRuntime } from "@elizaos/core"; import { ModelType } from "@elizaos/core"; interface Message { sender: "user" | "eliza"; text: string; } export default function App() { const [messages, setMessages] = useState([]); const [input, setInput] = useState(""); const [loading, setLoading] = useState(false); const [runtime, setRuntime] = useState(null); useEffect(() => { getRuntime().then(setRuntime); }, []); const sendMessage = async () => { if (!input.trim() || !runtime || loading) return; const userMessage = input.trim(); setInput(""); setMessages((prev) => [...prev, { sender: "user", text: userMessage }]); setLoading(true); try { const response = await runtime.useModel(ModelType.TEXT_LARGE, { prompt: userMessage, }); setMessages((prev) => [ ...prev, { sender: "eliza", text: String(response) }, ]); } catch (error) { console.error("Error:", error); } finally { setLoading(false); } }; return (
{messages.map((msg, i) => (
{msg.sender === "user" ? "YOU" : "ELIZA"}: {msg.text}
))} {loading &&
ELIZA is typing...
}
setInput(e.target.value)} onKeyPress={(e) => e.key === "Enter" && sendMessage()} placeholder="Tell me what's troubling you..." disabled={!runtime || loading} />
); } ``` --- ## Next.js Example Full-stack Next.js application with server-side rendering and API routes. **Features:** - SSR for fast initial load - API routes for server-side processing - OpenAI integration (requires API key) - Streaming responses ```typescript // app/api/chat/route.ts import { NextResponse } from "next/server"; import { AgentRuntime } from "@elizaos/core"; import { openaiPlugin } from "@elizaos/plugin-openai"; import { plugin as sqlPlugin } from "@elizaos/plugin-sql"; let runtime: AgentRuntime | null = null; async function getRuntime() { if (runtime) return runtime; runtime = new AgentRuntime({ character: { name: "Eliza", bio: "A helpful AI assistant.", secrets: { OPENAI_API_KEY: process.env.OPENAI_API_KEY, }, }, plugins: [sqlPlugin, openaiPlugin], }); await runtime.initialize(); return runtime; } export async function POST(request: Request) { const { message } = await request.json(); const runtime = await getRuntime(); // Stream response const encoder = new TextEncoder(); const stream = new ReadableStream({ async start(controller) { await runtime.messageService?.handleMessage( runtime, createMessage(message), async (content) => { if (content?.text) { controller.enqueue(encoder.encode(content.text)); } return []; }, ); controller.close(); }, }); return new Response(stream, { headers: { "Content-Type": "text/plain; charset=utf-8" }, }); } ``` --- ## Browser Compatibility | Feature | Chrome | Firefox | Safari | Edge | | ------------------ | ------ | ------- | ------ | ---- | | ES Modules | ✅ | ✅ | ✅ | ✅ | | Import Maps | ✅ | ✅ | ✅ | ✅ | | WASM | ✅ | ✅ | ✅ | ✅ | | IndexedDB (PGLite) | ✅ | ✅ | ✅ | ✅ | | localStorage | ✅ | ✅ | ✅ | ✅ | --- ## Plugin Comparison | Plugin | Requires API | Offline | Response Time | | ---------------------- | ------------ | ------- | ------------- | | `plugin-eliza-classic` | ❌ | ✅ | ~1ms | | `plugin-openai` | ✅ | ❌ | ~500-2000ms | | `plugin-anthropic` | ✅ | ❌ | ~500-2000ms | --- ## Next Steps Deploy to AWS, GCP, Vercel, or Cloudflare Build AI-powered games