Tabre

Tabre is a dynamic web-based platform designed for defining and testing API endpoints with ease. It allows users to:

• Define APIs using a concise declarative JSON format.
• Test APIs directly within browser tabs for seamless execution.
• Integrate with ChatGPT to leverage API definitions efficiently.
• Transform and chain API calls with advanced preprocessing capabilities.
• Utilize browser context (such as cookies and localStorage) within API requests, ensuring that sensitive data remains secure within the original tab.

Getting Started

To see Tabre in action, access the demo. For local development, the initial setup involves cloning the repository and installing dependencies using Yarn.

Features

Tabre stands out with several key features:

• Developed using React 19 and TypeScript for robust performance.
• Utilizes Material UI components styled with Emotion for an engaging user experience.
• Supports Markdown with KaTeX for mathematical rendering.
• Integrates with OpenAI, enhancing functionality through AI-driven capabilities.
• Offers a sophisticated API definition system that simplifies managing API structures.

Project Structure

The organization of the project is as follows:

tabre/
├── src/                     # Source files
│   ├── assets/              # Static assets (images, fonts, etc.)
│   ├── components/          # React components
│   ├── constants/           # Constants and configurations
│   ├── extensions/          # Custom request query string builders
│   ├── hooks/               # Custom React hooks
│   ├── types/               # TypeScript type definitions
│   ├── utils/               # Utility functions
│   ├── App.tsx              # Main application component
│   ├── main.tsx             # Application entry point
│   ├── index.css            # Global styles
│   └── vite-env.d.ts        # Vite environment types
├── public/                  # Static assets and API definitions
│   └── domain.com/          # Domain-specific API endpoints
│       ├── single-step/     # Single-step API endpoints
│       └── multiple-steps/  # Multi-step API endpoints
├── docs/                    # Documentation
│   └── API.md               # API definition guide
...

API Definition System

Tabre's API definition system empowers users to:

• Transform input parameters through other API calls with preprocessing.
• Define custom request handling, including query string builders and request methods.
• Parse responses using a configuration-based approach or custom JavaScript.
• Inject tab context to enhance API interactions using cookies and local storage, ensuring data integrity.

For comprehensive guidance on creating API definitions, refer to the API.md documentation.