AISandbox: A TypeScript repository from Shubhamai

Something like Figma, but for designing AI systems.

Homepage | Documentation | API Reference

About

AISandbox is a node-based editor that allows creating an architecture of multiple models with inputs and outputs to perform a range of tasks. Think of Figma but for designing AI systems graphically.

Features

Graphical Editor - Create a graph of models, with inputs and outputs.
REST API - Run the graph as an API, with a single click.
Self Hosted - Entire application can be self-hosted.
Dashboard - Manage your projects, and view usage statistics.

Documentation

Documentation | API Reference

To run the graph as an API, the code is programmatically generated in the UI, but here's a sample code

from aisandbox import execute_project

project_id: str = "91392237-fc87-48b4-b83c-59c6ce0aad9d"

api_key: str = "ais-4ad62b20-74ab-4f55-a5df-856007db6261"


inputs = [{"id": "TextInputNode-dU-gccjt6igEbAVFnYs4x", "data": {"text": "Hello!"}}]

output = execute_project(project_id, api_key, inputs)

print(output.json())

Tech Stack

Front end

Nextjs 13 as the web framework.
shadcn ui for the UI components.
reactflow for the node editor.
Lucide for icons.
zustand for state management.
TailwindCSS - CSS Framework

Backend

Supabase for user authentication and serves as the main database.
OpenAI and Replicate to run most of the models.
Upstash - Rate Limiting, Caching.

Infrastructure

The site is deployed on Verce.

Directory Structure

├── app - The main web app
│   ├── api - API routes
│   ├── components - React components
│   |   ├── dashboard - Dashboard components
│   |   ├── landing - Landing page components
│   |   ├── nodes - Contains components for all the nodes
|   |   ├── editor - Contains components for the main editor
│   |   ├── ui - Shadcn UI components
|   ├── fonts - Fonts
│   ├── lib - Utility functions. Redis, Stripe, Supabase clients.
│   ├── state - Zustand stores
|   ├── utils - Utility functions
├── examples - Contains example code for python.
├── packages - Contains library code for python.
├── pages - The documentation website (https://aisandbox.com/docs).
├── public - Static files

Self Hosting

To self-host this application ( at least some of it ), follow the steps :

Fill up the following API keys in .env.example, then rename it to .env.
Make an account of supabase, and create the following DBs with types provided in
Run pnpm dev.

Acknowledgements

Thanks to Resend, Skiff, Supabase and Figma for site UI, design and landing page inspirations.
Thanks to Sniffnet, nextjs-subscription-payments, tinygrad for readme, code structure.

Shubhamai/AISandbox