ApiBeam

Convert your ChatGPT, Claude, or z.ai account into an API

A Chrome/Firefox extension that bridges your ChatGPT, Claude, or z.ai account to your applications through a simple REST API

Screencast.from.2026-05-05.23-23-49.mp4

🚀 Overview

ApiBeam is a powerful browser extension that transforms your ChatGPT, Claude, or z.ai account into a programmatic API. Instead of manually interacting with these web interfaces, ApiBeam allows you to:

Send API requests from your applications to your ChatGPT, Claude, or z.ai account
Receive structured responses in JSON format
Configure language-specific prompts for consistent API-like responses
Switch between ChatGPT, Claude, and z.ai providers with a single click
Maintain full control of your data (everything runs locally on your machine)

Perfect for: Developers who want to use ChatGPT, Claude, or z.ai as a backend service without API costs or API keys.

✨ Features

🔌 Simple REST API - Access ChatGPT, Claude, or z.ai via HTTP requests
🌍 Cross-Browser Support - Works on Chrome and Firefox (Manifest V3)
⚡ Real-time WebSocket Connection - Low-latency server-to-extension communication
🔒 Local & Private - All data stays on your machine, no third-party servers
🎯 Language-Specific Prompts - Configure responses for Node.js, Python, Go, Ruby, PHP
💾 Persistent Configuration - Save your settings locally
📊 Network Monitoring - Check connection speed and status in real-time
🔄 Auto-Reconnect - Automatic WebSocket reconnection with exponential backoff

📋 Requirements

Node.js >= 18.17.1
npm or yarn
Chrome or Firefox browser
Active ChatGPT, Claude, and/or z.ai account

🛠️ Installation & Setup

1. Clone the Repository

git clone https://github.com/NiteshSingh17/apibeam.git
cd apibeam

2. Install Dependencies

npm install
# or
yarn install

3. Development Build

Build for Chrome (default):

npm run dev
# or
npm run dev:chrome

Build for Firefox:

npm run dev:firefox

This will watch for changes and rebuild automatically.

4. Load Extension in Browser

Chrome

Open chrome://extensions
Enable Developer mode (top right)
Click Load unpacked
Select the dist_chrome folder

Firefox

Open about:debugging#/runtime/this-firefox
Click Load Temporary Add-on
Select any file from the dist_firefox folder (e.g., manifest.json)

🔧 Production Build

Build for Chrome

npm run build:chrome

Build for Firefox

npm run build:firefox

Output will be in dist_chrome/ or dist_firefox/

📚 How It Works

Architecture Flow

Your App (Client) 
    ↓
  HTTP Request
    ↓
ApiBeam Server (Middleware)
    ↓
  WebSocket Message
    ↓
Chrome Extension (Running on Your Computer)
    ↓
ChatGPT / Claude / z.ai Web Interface
    ↓
Response travels back through the same chain

Step-by-Step Process

Your Application sends an HTTP request to the ApiBeam server with a prompt
ApiBeam Server receives the request and broadcasts it via WebSocket
Chrome Extension receives the message and injects it into your AI provider (ChatGPT, Claude, or z.ai)
The provider processes the request and returns a response
Extension captures the response stream and sends it back through WebSocket
Server returns the structured response to your application

🔗 API Usage

Get Your API URL

Click the ApiBeam extension icon
Click Settings
Your unique API URL will be displayed (e.g., https://apibeam.bitsmall.in/app/abc123def456)

Configuration

Before making requests, configure your language and method:

Select your programming language (Node.js, Python, Go, Ruby, PHP)
Enter the library method/function name (e.g., client.chat.completions.create)
Click Save Configuration

Example Requests

Python with OpenAI Library

from openai import OpenAI

client = OpenAI(
    base_url="https://apibeam.bitsmall.in/app/YOUR_ROOM_ID",
    api_key="not-needed"
)

response = client.chat.completions.create(
    model="gpt-4",
    messages=[
        {"role": "user", "content": "What is Python?"}
    ]
)

print(response.choices[0].message.content)

JavaScript with OpenAI SDK

import OpenAI from "openai";

const client = new OpenAI({
  baseURL: "https://apibeam.bitsmall.in/app/YOUR_ROOM_ID",
  apiKey: "not-needed"
});

const message = await client.chat.completions.create({
  model: "gpt-4",
  messages: [
    { role: "user", content: "What is JavaScript?" }
  ]
});

console.log(message.choices[0].message.content);

⚙️ Configuration

Settings Panel

The extension provides a comprehensive settings panel where you can:

Select Programming Language: Choose from Node.js, Python, Go, Ruby, PHP
Set Method Name: Specify the API method being used
View Connection Status: Monitor if your extension is connected to the server
Check Network Speed: Real-time network performance metrics
Copy API URL: Easily copy your unique API endpoint

Storage

Settings are stored locally using Chrome's storage API:

Language preference
Method configuration
Room ID (unique identifier for your connection)
Custom API Base URL (if self-hosting)

🖥️ Self-Hosting the Backend

By default ApiBeam uses the hosted server at apibeam.bitsmall.in. If you want full control, you can run your own backend:

Clone and start the server:

git clone https://github.com/NiteshSingh17/apibeam-api-server.git
cd apibeam-api-server
yarn setup-and-start

Open the ApiBeam extension → Settings.
Under Custom API Base URL, click Edit and paste your server URL (e.g. http://localhost:3000), then click Save.

That's it — the extension will now route all requests through your own server.

📖 See the apibeam-api-server README for full server documentation.

🔒 Security & Privacy

✅ All your data stays on your machine

No ChatGPT messages are sent to external servers (except through your WebSocket connection)
The extension runs entirely locally
Your API Key is never exposed
Communications between extension and server are encrypted

⚠️ What you should know

Your ChatGPT session is visible in the extension
Keep your API URL private (treat it like an API key)
Run the extension on a trusted computer

🐛 Troubleshooting

Connection Issues

Problem: Extension shows "Disconnected"

Solution: Check if the ApiBeam server is running
Refresh the settings page
Restart the browser extension

ChatGPT Detection Failed

Problem: Extension can't find ChatGPT input field

Solution: Make sure you're on https://chatgpt.com
Ensure ChatGPT is fully loaded
Check browser console for errors

Claude / z.ai Detection Failed

Problem: Extension can't find the Claude or z.ai input field

Solution: Make sure you're on https://claude.ai or https://chat.z.ai
Ensure the page is fully loaded
Check browser console for errors

Response Parsing Errors

Problem: Responses are incomplete or malformed

Solution: Verify your language and method configuration
Check that your prompt is valid
Review the provider's response format

Network Speed Shows "Calculating..."

Problem: Network speed information isn't available

Solution: This depends on browser support for the Network Information API
Works best on Chrome/Edge, limited support on Firefox

📁 Project Structure

apibeam/
├── src/
│   ├── pages/
│   │   ├── background/       # Background service worker
│   │   ├── content/          # Content scripts (ChatGPT, Claude, z.ai)
│   │   │   └── components/
│   │   │       ├── chatgpt/  # ChatGPT provider integration
│   │   │       ├── claude/   # Claude provider integration
│   │   │       └── zai/      # z.ai provider integration
│   │   ├── popup/            # Extension popup UI
│   │   └── settings/         # Settings page
│   ├── locales/              # i18n translations
│   ├── assets/               # Static assets
│   └── global.d.ts           # Global type definitions
├── public/                   # Public assets
├── manifest.json             # Extension manifest
├── vite.config.base.ts       # Base Vite configuration
├── vite.config.chrome.ts     # Chrome-specific config
├── vite.config.firefox.ts    # Firefox-specific config
└── package.json

🛠️ Development Guide

Tech Stack

React 19 - UI framework
TypeScript - Type safety
Tailwind CSS 4 - Styling
Vite - Build tool
@crxjs/vite-plugin - Chrome extension bundling
Socket.IO - WebSocket communication

Adding New Pages

Create a new folder in src/pages/
Add index.html, index.tsx, and index.css
Update vite.config.base.ts to include it in rollupOptions.input
Add corresponding manifest entries

Building Custom Plugins

See custom-vite-plugins.ts for examples:

stripDevIcons - Remove dev icons from production builds
crxI18n - Handle internationalization

📦 Publishing

Chrome Web Store

Build the extension: npm run build:chrome
Create a zip file from dist_chrome/
Upload to Chrome Web Store Developer Dashboard

Firefox Add-ons

Build the extension: npm run build:firefox
Create a zip file from dist_firefox/
Submit to Firefox Add-ons

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

How to Contribute

Fork the repository
Create a feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

⚡ Quick Links

🎯 Roadmap

Support for other AI models (Claude, Gemini, etc.)
Request/response logging and analytics
Rate limiting and quota management
Team collaboration features
Mobile app support
Custom prompt templates

📞 Support

For issues, questions, or suggestions:

Check existing GitHub Issues
Create a new issue with detailed information
Include browser, OS, and error messages

🙏 Acknowledgments

Built with Vite
UI powered by React and Tailwind CSS
Icons from Lucide React
Real-time communication with Socket.IO

Name		Name	Last commit message	Last commit date
public		public
src		src
.eslintrc		.eslintrc
.gitignore		.gitignore
.nvmrc		.nvmrc
LICENSE		LICENSE
README.md		README.md
custom-vite-plugins.ts		custom-vite-plugins.ts
manifest.dev.json		manifest.dev.json
manifest.json		manifest.json
nodemon.chrome.json		nodemon.chrome.json
nodemon.firefox.json		nodemon.firefox.json
package.json		package.json
tsconfig.json		tsconfig.json
vite.config.base.ts		vite.config.base.ts
vite.config.chrome.ts		vite.config.chrome.ts
vite.config.firefox.ts		vite.config.firefox.ts
yarn.lock		yarn.lock

Latest commit

History

Folders and files

Repository files navigation