@mograblog/web-agent-loop

A fully functional, frontend-only AI agent loop with zero backend. Run autonomous AI agents entirely in the browser with local WebGPU models, Bring-Your-Own-Key cloud LLMs, and Model Context Protocol (MCP) tools.

Features

• 🌐 Frontend-Only: Runs 100% in the user's browser. Zero backend servers or proxy relays required.
• ⚡ WebGPU & Cloud LLMs: Run local open-weight models (Llama 3, Qwen, DeepSeek, Phi) on-device via WebLLM / WebGPU, or connect directly to OpenAI / Ollama.
• 🔌 Model Context Protocol (MCP): Discover and execute tools over HTTP/SSE, including Arcade.dev connectors, built-in sample tools, or custom endpoints.
• 💻 Localhost Coding Bridge: Optional local companion CLI (npx web-agent-bridge) that securely exposes file editing and terminal command execution to the browser agent.
• 📦 Dual Artifacts:
  • . Core headless TypeScript SDK
  • ./demo Drop-in Custom Element <web-agent-demo>
  • ./react React component wrapper with full JSX typings

Installation

npm install @mograblog/web-agent-loop

Quickstart

1. Headless TypeScript SDK

import { WebAgentLoop, createWebSearchTool } from '@mograblog/web-agent-loop';

const agent = new WebAgentLoop({
  provider: {
    type: 'openai',
    apiKey: 'YOUR_API_KEY',
    model: 'gpt-4o-mini'
  },
  systemPrompt: 'You are a helpful research assistant with access to web search.',
  tools: [createWebSearchTool()]
});

const result = await agent.run('What are the latest developments in WebGPU?');
console.log(result.response);

2. Drop-in Web Component Demo

Embed the full interactive playground anywhere with zero build configuration:

<script type="module">
  import '@mograblog/web-agent-loop/demo';
</script>

<web-agent-demo 
  title="AI Agent Playground" 
  theme="dark" 
  default-tab="sample">
</web-agent-demo>

3. React Component

import React from 'react';
import { WebAgentDemo } from '@mograblog/web-agent-loop/react';

export function AgentPlayground() {
  return (
    <div className="h-screen w-full">
      <WebAgentDemo theme="dark" defaultTab="bridge" />
    </div>
  );
}

4. Localhost Coding Bridge

Let the browser agent edit files and run terminal commands on your computer:

npx web-agent-bridge --dir ./my-project --port 3001

License

MIT © Guy Mograbi