How to Integrate Terax AI into Your Own Applications: The Complete Tauri 2 and React Guide

You can integrate Terax AI into your own applications by copying the TypeScript AI modules from the src/modules/ai/ directory and the corresponding Rust Tauri commands into a standard Tauri 2 + React 19 project, then consuming the useAiLiveBridge hook to stream AI responses via the Vercel AI SDK.

Terax AI is an open-source desktop application that delivers agentic AI workflows through a modular TypeScript SDK built on Tauri 2 and React 19. To integrate Terax AI into your own applications, you will reuse the core AI modules—which handle streaming inference, tool execution, and provider management—by importing them into your Tauri project and calling the same backend commands that power the original side-panel interface.

Prerequisites: Tauri 2 and React 19 Setup

Before integrating Terax AI, initialize a compatible Tauri 2 project with React TypeScript support. The Terax AI modules depend on Tauri's invoke bridge and the Vercel AI SDK, requiring specific package versions.

Run the following commands to scaffold your project:

# Create a fresh Vite React TypeScript project

pnpm create vite my-app --template react-ts
cd my-app

# Add Tauri 2 CLI and API

pnpm add -D @tauri-apps/cli @tauri-apps/api

# Generate Tauri-specific files (creates src-tauri/ directory)

pnpm tauri init

# Install the AI SDK dependencies used by Terax

pnpm add @vercel/ai @vercel/ai-react

This setup creates the necessary src-tauri/ directory for Rust backend commands and installs the peer dependencies required by the Terax AI modules.

Step 1: Copy the AI Core Modules

Terax exposes its intelligence through four key TypeScript files located in src/modules/ai/. Copy these files into your project, preserving their relative paths, to access the streaming bridge and native command wrappers.

File Path	Purpose
src/modules/ai/lib/native.ts	Low-level wrapper around Tauri invoke for AI, file system, git, and shell commands.
src/modules/ai/lib/useAiLiveBridge.ts	React hook that creates a live streaming connection to AI models, handling token chunks, retries, and cancellation.
src/modules/ai/tools/shell.ts	Helper to run short shell commands (e.g., npm test, git status) from within the AI workflow.
src/modules/ai/index.ts	Public re-exports that consolidate the API surface for your UI components.

These modules rely solely on @tauri-apps/api and the Vercel AI SDK, making them portable to any Tauri-based application.

Step 2: Configure the Rust Backend Commands

If you are building a native desktop application (rather than a web mock), you must copy the corresponding Rust commands from the original repository. The TypeScript native.ts file invokes specific commands that must exist in your src-tauri/src/ directory.

Copy the following Rust implementation file:

• src-tauri/src/commands/ai.rs – Implements ai_http_stream, ai_set_key, and shell_run_command.

Register these commands in your src-tauri/src/main.rs or lib entry point so Tauri can route the invoke calls from your frontend:

// In src-tauri/src/main.rs or lib.rs
mod commands;
use commands::ai::{ai_http_stream, ai_set_key, shell_run_command};

fn main() {
    tauri::Builder::default()
        .invoke_handler(tauri::generate_handler![
            ai_http_stream,
            ai_set_key,
            shell_run_command
        ])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

Without these backend commands, the frontend hooks will fail when attempting to communicate with AI providers.

Step 3: Initialize AI Provider Authentication

Terax stores API keys securely using the OS keychain, but for integration into your own application, you can set keys programmatically or rely on environment variables.

To set a provider key explicitly, use the ai_set_key command:

// src/utils/aiConfig.ts
import { invoke } from '@tauri-apps/api/core';

export async function configureOpenAi(key: string) {
  await invoke('ai_set_key', { 
    provider: 'openai', 
    key 
  });
}

If you skip explicit key setting, the useAiLiveBridge hook will automatically fallback to environment variables when available, though this is less secure for desktop applications.

Step 4: Implement the React Hook for Streaming

The useAiLiveBridge hook is the primary interface for AI interaction. It manages the connection to providers like OpenAI, Anthropic, Gemini, or Groq, and returns a live-updating response string.

Import and use the hook in your components:

// src/components/AiChat.tsx
import { useAiLiveBridge } from '@/modules/ai';
import { useState } from 'react';

export function AiChat() {
  const [prompt, setPrompt] = useState('');
  const { response, isStreaming, error, sendPrompt, cancel } = useAiLiveBridge({
    provider: 'openai',
    model: 'gpt-4o-mini',
  });

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    await sendPrompt(prompt);
    setPrompt('');
  };

  return (
    <div className="p-4">
      <form onSubmit={handleSubmit} className="flex gap-2">
        <input
          value={prompt}
          onChange={(e) => setPrompt(e.target.value)}
          placeholder="Ask Terax AI..."
          className="flex-grow rounded border p-2"
          disabled={isStreaming}
        />
        <button type="submit" disabled={isStreaming}>
          Send
        </button>
        {isStreaming && (
          <button type="button" onClick={cancel}>
            Cancel
          </button>
        )}
      </form>

      <div className="mt-4 whitespace-pre-wrap">
        {error && <span className="text-red-600">{error.message}</span>}
        {response}
      </div>
    </div>
  );
}

The hook returns isStreaming to indicate active generation and cancel to abort the request. Under the hood, it calls invoke('ai_http_stream', …) defined in src/modules/ai/lib/native.ts, which communicates with the Rust backend to manage the HTTP stream.

Step 5: Enable Shell Tool Integration (Optional)

To allow the AI to execute short shell commands—such as running tests or checking git status—import the shell tool from the copied modules:

import { runShellCommand } from '@/modules/ai/tools/shell';

async function runProjectLint() {
  try {
    const result = await runShellCommand('npm run lint');
    console.log(result.stdout);
    return result;
  } catch (error) {
    console.error('Command failed:', error);
  }
}

The runShellCommand function wraps invoke('shell_run_command', …) and integrates with Terax's approval gating system. In the original application, users must approve commands before execution; in your integration, you can maintain this safety feature or bypass it by modifying the invocation logic in native.ts.

Step 6: Build and Run Your Integrated Application

Once you have copied the modules, configured the Rust backend, and implemented the UI components, launch your application in development mode:

pnpm tauri dev

This command compiles the Rust backend and starts the Vite development server. The AI streaming should function immediately if your API keys are configured.

For production builds, ensure your src-tauri/ directory includes all necessary permissions and entitlements for making HTTP requests to AI provider endpoints.

Summary

• Copy four core files from src/modules/ai/ to access the streaming bridge, native wrappers, and shell tools.
• Implement Rust backend commands (ai_http_stream, ai_set_key, shell_run_command) in src-tauri/src/commands/ai.rs for native functionality.
• Use useAiLiveBridge to add streaming AI capabilities to any React component with automatic token chunk handling.
• Configure providers via ai_set_key or environment variables to connect to OpenAI, Anthropic, Gemini, Groq, or local LLMs via Ollama.
• Leverage shell tools to let AI agents introspect and modify your project files safely.

Frequently Asked Questions

Do I need to use Tauri to integrate Terax AI?

Yes, the Terax AI modules are specifically designed for Tauri 2 desktop applications. They rely on the invoke bridge to communicate with a Rust backend that handles HTTP streaming and secure key storage. While you could mock the invoke calls for a web-only prototype, the full functionality requires the Tauri runtime.

Can I use Terax AI with custom AI providers not included in the original codebase?

Yes, the architecture uses the Vercel AI SDK, which supports custom provider implementations. You can extend the native.ts file to add new provider configurations or modify the useAiLiveBridge hook to accept additional provider strings beyond the built-in OpenAI, Anthropic, Gemini, and Groq options.

How does the shell command execution maintain security?

The shell tool in src/modules/ai/tools/shell.ts connects to the shell_run_command backend, which includes an approval gating mechanism in the original Terax code. Before executing, the UI prompts users to approve potentially destructive commands. When integrating into your own application, you retain this safety check or implement your own validation layer before invoking the command.

What is the performance impact of using useAiLiveBridge for real-time streaming?

The hook implements efficient token-by-token updates using React state batching and request cancellation tokens. Because it communicates through Tauri's native bridge rather than a browser fetch API, it avoids CORS limitations and maintains stable connections even for long-running agentic workflows that require multiple tool calls.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}