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

> Integrate Terax AI into your applications with this Tauri 2 and React guide. Copy AI modules and Rust commands, then use the useAiLiveBridge hook for streaming AI responses.

- Repository: [Crynta/terax-ai](https://github.com/crynta/terax-ai)
- Tags: how-to-guide
- Published: 2026-07-06

---

**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:

```bash

# 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`](https://github.com/crynta/terax-ai/blob/main/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`](https://github.com/crynta/terax-ai/blob/main/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`](https://github.com/crynta/terax-ai/blob/main/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`](https://github.com/crynta/terax-ai/blob/main/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`](https://github.com/crynta/terax-ai/blob/main/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`](https://github.com/crynta/terax-ai/blob/main/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`](https://github.com/crynta/terax-ai/blob/main/src-tauri/src/main.rs) or lib entry point so Tauri can route the `invoke` calls from your frontend:

```rust
// 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:

```typescript
// 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:

```tsx
// 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`](https://github.com/crynta/terax-ai/blob/main/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:

```typescript
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`](https://github.com/crynta/terax-ai/blob/main/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:

```bash
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`](https://github.com/crynta/terax-ai/blob/main/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`](https://github.com/crynta/terax-ai/blob/main/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`](https://github.com/crynta/terax-ai/blob/main/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.