⚡ ARH — AI API Testing Ground, Dual Arena & Agent Sandbox

A minimalist, universal, stateless playground, dual-AI benchmarking arena, and autonomous execution environment to test, validate, and chat with 22+ AI providers instantly.

🌟 What is ARH?

ARH (API Testing Ground & Agent Sandbox) is a developer-first AI playground designed to test API keys across any major foundation model provider without setup friction, backend databases, or complex configurations.

Paste an API key from Groq, OpenAI, Anthropic, Gemini, NVIDIA NIM, DeepSeek, OpenRouter, Together, Fireworks, Perplexity, Cerebras, Token Router, BazaarLink, NRouter, Experiential Labs, Mistral, Cohere, xAI, Hugging Face, or Ollama — ARH instantly detects the provider, validates credentials, discovers live models, and launches a real-time streaming chat session with autonomous code execution and file previews.

With ARH 2.0, you can switch into the Dual AI Workspace to pit two models against each other side-by-side or watch them converse autonomously in a WhatsApp-style messenger interface with directional send actions and an encrypted client-side Key Vault.

🚀 Key Capabilities & Features

1. ⚔️ Dual AI Workspace & Side-by-Side Arena

Sliding Capsule Switcher: Smooth animated toggle between Single Chat (/) and Dual AI Workspace (/dual) with non-destructive state preservation.
Two Independent AI Slots: AI 1 (Blue) and AI 2 (Pink) maintain isolated providers, API keys, models, system instructions, and temperature parameters.
Three-Way Directed Composer:
- ◀ Left Arrow (Blue): Send to AI 1 only.
- ▲ Up Arrow (Purple): Broadcast to both AIs simultaneously with concurrent, non-blocking streaming.
- ▶ Right Arrow (Pink): Send to AI 2 only.
WhatsApp / Messenger-Style UI:
- Left-aligned AI 1 chat bubbles (mr-auto, blue glow and dark slate background).
- Right-aligned AI 2 chat bubbles (ml-auto, pink glow and dark plum background).
- Centered moderator/user instructions with targeted badges (To Both AIs, To AI 1, To AI 2).
Autonomous AI-to-AI Conversation Engine:
- Automatically prompts AI 1 to kick off the conversation.
- Alternates turns automatically (AI 1's response feeds as context to AI 2, and vice-versa).
- Full playback controls: Start, Pause, Resume, Stop, and configurable Turn Limit (default 10 turns).
Dynamic Model Discovery per Slot:
- Queries live /models endpoints dynamically for each slot.
- Dynamic capability filter tabs (Chat, Vision, Reasoning, Free Models, Embeddings, Audio, All Models).
- Live API cache invalidation and Refresh button.
- Custom Model ID entry to benchmark private or unlisted fine-tuned models.

2. 🔐 Client-Side API Key Vault & Storage Manager

Storage Target Flexibility: Choose between ephemeral session storage (sessionStorage) or persistent local storage (localStorage).
1-Click Quick Connect: Rapidly attach saved keys to Single Chat, AI 1, or AI 2 without retyping.
Masked Credential Security: Visual masking protects keys against shoulder-surfing (gsk_...7890).
Portable Backups: Export and import encrypted JSON backups of your saved key profiles.

3. 🔍 Instant Key Pattern Detection

Heuristic regex engine identifies distinct key signatures in real-time as you type or paste (xpl_ for Experiential Labs, gsk_ for Groq, nvapi- for NVIDIA NIM, AIzaSy for Google Gemini, sk-ant- for Anthropic, sk-or- for OpenRouter, sk-proj- for OpenAI, etc.).
Categorizes confidence levels (high, medium, low) with transparent rationale and multi-candidate manual selection for ambiguous keys.

4. 🤖 Autonomous Agent Mode (In-Flight Tool Calling Loop)

True Agentic Harness: Models that support function/tool calling (OpenAI GPT-4o, Groq LLaMA 3.3/3.1, Claude 3.5, Gemini 1.5/2.0) are equipped with the execute_python tool.
ReAct Execution Loop: The model emits a tool call, the app pauses generation, executes the script in the client-side Pyodide sandbox, extracts any generated files, feeds the results (stdout, stderr, file list) back into the conversation context with { role: 'tool' }, and prompts the model to verify its output before writing the final response.
Fail-Safe Fallback: If a provider or custom endpoint does not support tool schemas, ARH automatically falls back to direct chat mode with post-generation detection.

5. 🐍 Client-Side WebAssembly Python Sandbox (Pyodide)

Runs Python 3 inside an isolated browser Web Worker powered by WebAssembly (Wasm) and an in-memory virtual filesystem (MEMFS).
Preloaded Document & Data Libraries: Supports python-docx (docx), openpyxl, pandas, matplotlib, reportlab, pydantic, and sympy.
Autonomous File Extraction: When scripts call doc.save('report.docx'), wb.save('data.xlsx'), plt.savefig('chart.png'), or open('data.csv', 'w'), generated binary files are automatically extracted into browser Blob URLs with download cards.
Manual Execution: Every code block features an interactive "Run in Sandbox" button with live status pills and logs drawers.

6. 📂 Right-Side In-Browser File Preview Drawer ("Sider")

Slide-over drawer on the right side of the screen for instant, zero-software previewing of chat artifacts:
- 📄 PDFs (.pdf): Native embedded browser PDF reader with zoom, search, and page navigation.
- 📝 Word Documents (.docx, .doc): Lazy-loaded Mammoth.js engine rendering styled paper document layouts with headings, styled tables, lists, and images.
- 📊 Excel Spreadsheets (.xlsx, .xls, .csv, .tsv): Lazy-loaded SheetJS workbook parser with multi-sheet tabs (Sheet1, Sheet2), sticky column headers (A, B, C...), row indices, search/cell filtering, and gridlines.
- 🌐 HTML (.html, .htm): Dual-view toggle between sandboxed visual iframe preview and syntax-highlighted source code.
- 🖼️ Images (.png, .jpg, .jpeg, .svg, .webp, .gif): Interactive canvas with Zoom In (+), Zoom Out (-), Reset (100%), and transparency checkerboard.
- 💻 Code & Text (.txt, .md, .json, .py, .sql): Syntax-highlighted text reader with line numbers and 1-click copy.
- Fullscreen Toggle: Expand the preview drawer across the full viewport with one click.

7. 🧠 Reasoning & Thinking Model Support

Separate visual thinking drawers for reasoning models (DeepSeek-R1, Cerebras, Nemotron, OpenAI o1/o3-mini).
Automatically parses <think> XML blocks or separate SSE reasoning streams (delta.reasoning_content) with collapsible accordion display and duration metrics.

8. 🎙️ Voice Input (Speech-to-Text)

Integrated Web Speech API microphone input with real-time audio pulsing indicators and automatic punctuation.

9. 🛡️ Zero-Persistence Ephemeral Security

No databases. No telemetry. No server logs.
Your API key and conversation history live strictly in runtime memory by default.
Closing or refreshing the tab completely wipes all credentials from existence unless saved to the opt-in client-side Key Vault.
Automatic key masking (sk-proj-...1a2b) protects your screen from shoulder-surfing.

10. 🌐 Adaptive Connection Architecture

Direct Browser Transport: For providers with open CORS (Groq, OpenRouter, Hugging Face, Together), requests stream directly from your browser to the provider’s endpoint.
Stateless Proxy Fallback: For enterprise APIs that restrict browser CORS (NVIDIA NIM and OpenAI), ARH routes requests through a lightweight, stateless proxy (built into Vite for local dev and Vercel Edge Functions for production).

11. 🔍 Developer Mode & Inspector

Dedicated >_ Dev Mode drawer.
Inspect raw HTTP requests, sanitized headers (secrets masked), response bodies, status codes, and latency breakdowns for every call.

🧠 Supported Providers Matrix

ARH includes built-in adapters and model normalization for 22 industry providers:

Provider	Key Signature	Connection Mode	Dynamic Models	Live Streaming	Tool Calling / Agent
Groq	`gsk_...`	Direct Browser	✅ Yes	✅ Yes	✅ Yes
Google Gemini	`AIzaSy...`	Direct (Query Auth)	✅ Yes	✅ Yes	✅ Yes
Anthropic Claude	`sk-ant-api03-...`	Direct (Caveat Header)	✅ Yes	✅ Yes	✅ Yes
OpenRouter	`sk-or-v1-...`	Direct Browser	✅ Yes	✅ Yes	✅ Yes
NVIDIA Build (Free Endpoint)	`nvapi-...`	Proxy Fallback (CORS)	✅ Dynamic (`/v1/models`)	✅ Yes	✅ Yes
OpenAI	`sk-proj-...` / `sk-...`	Proxy Fallback (CORS)	✅ Yes	✅ Yes	✅ Yes
DeepSeek	`sk-...` (32 hex)	Proxy Fallback (CORS)	✅ Yes	✅ Yes	✅ Yes
Together AI	`64-hex key`	Direct Browser	✅ Yes	✅ Yes	✅ Yes
Fireworks AI	`fw_...`	Direct Browser	✅ Yes	✅ Yes	✅ Yes
Cerebras	`csk-...`	Direct Browser	✅ Yes	✅ Yes	✅ Yes
Token Router	`vk_live_...`	Proxy Fallback (CORS)	✅ Yes	✅ Yes	✅ Yes
BazaarLink	`sk-bl-...`	Direct Browser	✅ Yes	✅ Yes	✅ Yes
NRouter	`sk-nrouter-...`	Proxy Fallback (CORS)	✅ Yes	✅ Yes	✅ Yes
Experiential Labs	`xpl_...` (40 hex)	Direct / Proxy	✅ Yes	✅ Yes	✅ Yes
Perplexity AI	`pplx-...`	Proxy Fallback (CORS)	✅ Fallback	✅ Yes	✅ Fallback
xAI (Grok)	`xai-...`	Direct Browser	✅ Yes	✅ Yes	✅ Yes
Mistral AI	`32-char key`	Direct Browser	✅ Yes	✅ Yes	✅ Yes
Cohere	`40-char key`	Direct Browser	✅ Yes	✅ Yes	✅ Yes
Hugging Face	`hf_...`	Direct Browser	✅ Yes	✅ Yes	✅ Yes
Moonshot (Kimi)	`sk-...`	Proxy Fallback (CORS)	✅ Yes	✅ Yes	✅ Yes
Custom / Ollama	`http://...`	Direct Localhost	✅ Yes	✅ Yes	✅ Yes

🟢 NVIDIA Build & Free Endpoint Models

ARH features full native integration with NVIDIA Build (https://build.nvidia.com), supporting its curated catalog of Free Endpoint models:

Base URL: https://integrate.api.nvidia.com/v1
Dynamic Model Discovery: GET https://integrate.api.nvidia.com/v1/models queries all available live models at runtime.
Chat Endpoint: POST https://integrate.api.nvidia.com/v1/chat/completions
Authentication: Authorization: Bearer nvapi-...
Authoritative Model IDs: Model IDs are strictly preserved from the NVIDIA API response (e.g. openai/gpt-oss-20b, meta/llama-3.3-70b-instruct, meta/llama-3.2-90b-vision-instruct, nvidia/nemotron-3-super-120b-a12b). Model IDs are never artificially prefixed or altered.
Model Capability Classification: Models are categorized across chat, vision, reasoning, embedding, audio, translation, safety, autonomous-driving, and optimization.
Chat Filtered Selector: The primary chat model selector exposes only chat-capable models, with category tabs (Chat, Vision, Reasoning, Embeddings, Audio, Translation, Safety, All) and live dynamic refresh.
Rate Limit & Error Handling: Gracefully maps HTTP 401/403, 404 (with exact model ID), and 429 ("NVIDIA Free Endpoint rate limit reached. Please wait and try again.").

🏗️ Architecture & Network Flow

                           ┌────────────────────────┐
                           │      User Browser      │
                           │       ARH Web UI       │
                           └───────────┬────────────┘
                                       │
                      ┌────────────────┴────────────────┐
                      │ Capsule Mode: [ Chat | Dual ]   │
                      └────────────────┬────────────────┘
                                       │
                ┌──────────────────────┴──────────────────────┐
                │                                             │
         Single AI Chat                                Dual AI Workspace
                │                                             │
      ┌─────────┴─────────┐                         ┌─────────┴─────────┐
      │  Single Key Auth  │                         │ AI 1 (Blue Slot)  │
      │  & Model Catalog  │                         │ AI 2 (Pink Slot)  │
      └─────────┬─────────┘                         │ Key Vault Connect │
                │                                   └─────────┬─────────┘
                │                                             │
                │                                    3-Way Directional
                │                                   Send Composer (◀ ▲ ▶)
                │                                   or Auto Talk Engine
                │                                             │
                ▼                                             ▼
        ┌─────────────────────────────────────────────────────────────┐
        │                 Connection Strategy Resolver                │
        └──────────────┬───────────────────────────────┬──────────────┘
                       │                               │
                CORS Supported                  CORS Restricted
                       │                               │
                       ▼                               ▼
             ┌──────────────────┐            ┌──────────────────┐
             │ Direct Transport │            │  Stateless Proxy │
             │  (Browser Fetch) │            │ (Vite / Vercel)  │
             └─────────┬────────┘            └─────────┬────────┘
                       │                               │
                       ▼                               ▼
             ┌──────────────────────────────────────────────────┐
             │                 AI Provider API                  │
             │          (Groq, OpenAI, Anthropic, NIM)          │
             └─────────────────────────┬────────────────────────┘
                                       │
                           Tool Call / Code Emitted
                                       │
                                       ▼
                     ┌──────────────────────────────────┐
                     │Pyodide WebAssembly Sandbox (Wasm)│
                     │ (MEMFS, docx, openpyxl, pandas)  │
                     └─────────────────┬────────────────┘
                                       │
                           Extracted Artifacts & Logs
                                       │
                                       ▼
                     ┌──────────────────────────────────┐
                     │ Right-Side Preview Drawer Sider  │
                     │ (PDF, Word, Excel, HTML, Images) │
                     └──────────────────────────────────┘

🛠️ Local Development

Prerequisites

Node.js 18+ (Node 20+ recommended)
npm, pnpm, or yarn

Installation

# 1. Clone the repository
git clone https://github.com/aruchith08/api-key-tester-chatbot.git
cd api-key-tester-chatbot

# 2. Install dependencies
npm install

# 3. Start development server
npm run dev

Visit http://localhost:5173 in your browser.

🧪 Automated Testing

ARH includes a comprehensive automated test suite comprising 1,218 tests passing with 100% reliability:

# Run all automated test suites
npm test

Test Coverage Summary:

Provider Detection Heuristics: 20 tests verifying prefixes, hex lengths, and edge cases.
Provider Synchronization: 8 regression tests verifying zero race conditions on input switching.
OpenAI-Compatible Adapter: 14 tests for payload formatting, endpoint resolution, and normalization.
Google Gemini Adapter: 11 tests covering system instruction, multipart image payload, and role mapping.
Anthropic Claude Adapter: 9 tests verifying header compliance and message structure.
Error Normalization: 14 tests checking status codes (401, 403, 429, 500, network blocks).
Streaming SSE Parsing: 24 tests covering token deltas, usage metadata, reasoning chunks, and think tags.
Transport & Strategy: 21 tests validating connection mode determination and truth layers.
Python Code Detection & Heuristics: 15 tests verifying file-saving patterns across libraries.
Autonomous Agent Tools & ReAct Harness: 26 tests verifying tool schemas, argument parsers, multi-turn tool message formatting, streaming tool call aggregation, and preview drawer state management.
DualChat Workspace & State Isolation: Tests verifying strict slot independence, single-chat transcript preservation, non-destructive capsule switching, 3-way send targeting, independent slot error tolerance, and auto-chat turn alternation and pausing.
API Key Storage & Key Vault: Tests verifying localStorage vs sessionStorage targets, masked key generation, CRUD operations, and JSON backup export/import.
Live Integration Testing: Conditional test harnesses for environment variables.

☁️ Deploying to Vercel

ARH is pre-configured for one-click deployment to Vercel:

Option 1: Vercel CLI

npm install -g vercel
vercel

Option 2: GitHub Integration

Push this repository to GitHub.
Go to Vercel Dashboard and select Import Git Repository.
Vercel automatically detects the Vite configuration:
- Framework Preset: Vite
- Build Command: npm run build
- Output Directory: dist
Click Deploy.

Note: ARH includes api/proxy.ts running on the Vercel Edge Runtime, allowing CORS-restricted APIs (like NVIDIA NIM and OpenAI) to function seamlessly in production without requiring third-party proxies.

🔒 Security & Privacy Statement

Client-Side First: Your API keys are kept entirely within your local browser memory by default.
Zero Backend Storage: ARH does not have a database, user tracking, or third-party analytical cookies.
Ephemeral Sessions: Refreshing the browser or clearing the state destroys all active credentials and chat contents unless saved to the opt-in client-side Key Vault.
Open Source: All network requests, adapters, and sandboxes are transparent and open for inspection in src/providers and src/sandbox.

📄 License

MIT License. Feel free to use, modify, and distribute for private or commercial testing.

Name		Name	Last commit message	Last commit date
api		api
docs		docs
public		public
scripts		scripts
src		src
tests		tests
.gitignore		.gitignore
.oxlintrc.json		.oxlintrc.json
README.md		README.md
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
run-vite.js		run-vite.js
screenshot .png		screenshot .png
screenshot.png		screenshot.png
tailwind.config.js		tailwind.config.js
tsconfig.app.json		tsconfig.app.json
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vercel.json		vercel.json
vite.config.ts		vite.config.ts

Navigation Menu

Repository navigation

About

Repository files navigation

⚡ ARH — AI API Testing Ground, Dual Arena & Agent Sandbox

🌟 What is ARH?

🚀 Key Capabilities & Features

1. ⚔️ Dual AI Workspace & Side-by-Side Arena

2. 🔐 Client-Side API Key Vault & Storage Manager

3. 🔍 Instant Key Pattern Detection

4. 🤖 Autonomous Agent Mode (In-Flight Tool Calling Loop)

5. 🐍 Client-Side WebAssembly Python Sandbox (Pyodide)

6. 📂 Right-Side In-Browser File Preview Drawer ("Sider")

7. 🧠 Reasoning & Thinking Model Support

8. 🎙️ Voice Input (Speech-to-Text)

9. 🛡️ Zero-Persistence Ephemeral Security

10. 🌐 Adaptive Connection Architecture

11. 🔍 Developer Mode & Inspector

🧠 Supported Providers Matrix

🟢 NVIDIA Build & Free Endpoint Models

🏗️ Architecture & Network Flow

🛠️ Local Development

Prerequisites

Installation

🧪 Automated Testing

Test Coverage Summary:

☁️ Deploying to Vercel

Option 1: Vercel CLI

Option 2: GitHub Integration

🔒 Security & Privacy Statement

📄 License

About

Releases

Packages

Contributors

Languages

Latest commit

History

Folders and files

Repository files navigation

⚡ ARH — AI API Testing Ground, Dual Arena & Agent Sandbox

🌟 What is ARH?

🚀 Key Capabilities & Features

1. ⚔️ Dual AI Workspace & Side-by-Side Arena

2. 🔐 Client-Side API Key Vault & Storage Manager

3. 🔍 Instant Key Pattern Detection

4. 🤖 Autonomous Agent Mode (In-Flight Tool Calling Loop)

5. 🐍 Client-Side WebAssembly Python Sandbox (Pyodide)

6. 📂 Right-Side In-Browser File Preview Drawer ("Sider")

7. 🧠 Reasoning & Thinking Model Support

8. 🎙️ Voice Input (Speech-to-Text)

9. 🛡️ Zero-Persistence Ephemeral Security

10. 🌐 Adaptive Connection Architecture

11. 🔍 Developer Mode & Inspector

🧠 Supported Providers Matrix

🟢 NVIDIA Build & Free Endpoint Models

🏗️ Architecture & Network Flow

🛠️ Local Development

Prerequisites

Installation

🧪 Automated Testing

Test Coverage Summary:

☁️ Deploying to Vercel

Option 1: Vercel CLI

Option 2: GitHub Integration

🔒 Security & Privacy Statement

📄 License

About

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages