Browser & Webview Runtimes

Run PraisonAI Agents inside browsers, Electron, Tauri, and React Native

PraisonAI Agents run anywhere JavaScript runs — browsers, Electron, Tauri webviews, and React Native — with zero extra setup.

Quick Start

The runtime is detected automatically — pass credentials directly on the Agent.

1. Browser / Electron renderer (auto-detected)

   The browser guard is enabled for you — no config needed.

   import { Agent } from 'praisonai';
   
   const agent = new Agent({
     instructions: "You are a helpful assistant",
     apiKey: import.meta.env.VITE_OPENAI_KEY,
   });
   
   await agent.chat("Hello from the browser!");

2. Tauri / native fetch bridge

   Pass a custom fetch to route requests through native code — the key stays out of the JS heap.

   import { Agent } from 'praisonai';
   import { invoke } from '@tauri-apps/api/core';
   
   const nativeFetch: typeof fetch = async (input, init) => {
     const body = await invoke<string>('openai_proxy', {
       url: String(input),
       init,
     });
     return new Response(body, { status: 200 });
   };
   
   const agent = new Agent({
     instructions: "You are the desktop assistant",
     fetch: nativeFetch,   // implies dangerouslyAllowBrowser
     // no apiKey here — the key lives in Rust
   });

3. Explicit override

   Force the browser guard on or off — useful in tests.

   import { Agent } from 'praisonai';
   
   const agent = new Agent({
     instructions: "You are helpful",
     apiKey: process.env.OPENAI_API_KEY,
     dangerouslyAllowBrowser: true,
   });

How It Works

The Agent detects the runtime and merges the right options before constructing the OpenAI SDK.

When to use which option

Pick the option that matches where your code runs and how sensitive the key is.

Configuration

Four knobs control credentials and transport across every runtime.

Precedence: an explicit dangerouslyAllowBrowser always wins — false even strips a pre-set flag. A custom fetch implies dangerouslyAllowBrowser: true, so a native bridge works even outside a webview.

Common Patterns

Tauri desktop app

Route every OpenAI request through a Rust command that owns the key.

import { Agent } from 'praisonai';
import { invoke } from '@tauri-apps/api/core';

const nativeFetch: typeof fetch = async (input, init) => {
  const body = await invoke<string>('openai_proxy', {
    url: String(input),
    init,
  });
  return new Response(body, { status: 200 });
};

const agent = new Agent({
  instructions: "You are the desktop assistant",
  fetch: nativeFetch,
});

await agent.chat("Summarize today's notes");

Electron renderer

Talk directly to OpenAI from the renderer — the guard is auto-added.

import { Agent } from 'praisonai';

const agent = new Agent({
  instructions: "You are the in-app assistant",
  apiKey: import.meta.env.VITE_OPENAI_KEY,
});

await agent.chat("Draft a release note");

React Native mobile app

navigator.product === 'ReactNative' is auto-detected.

import { Agent } from 'praisonai';

const agent = new Agent({
  instructions: "You are the mobile assistant",
  apiKey: MY_APP_CONFIG.openaiKey,
});

await agent.chat("What's on my agenda?");

Best Practices

Related