/sandbox

A cloud-based code editing environment with an AI copilot and real-time collaboration.

Primary LanguageTypeScriptMIT LicenseMIT

Sandbox 📦🪄

Screenshot 2024-05-31 at 8 33 56 AM

Sandbox is an open-source cloud-based code editing environment with custom AI code autocompletion and real-time collaboration.

Check out the Twitter thread with the demo video!

Check out this guide made by @jamesmurdza on setting it up locally!

Running Locally

Frontend

Install dependencies

cd frontend
npm install

Add the required environment variables in .env (example file provided in .env.example). You will need to make an account on Clerk and Liveblocks to get API keys.

Then, run in development mode

npm run dev

Backend

The backend consists of a primary Express and Socket.io server, and 3 Cloudflare Workers microservices for the D1 database, R2 storage, and Workers AI. The D1 database also contains a service binding to the R2 storage worker. Each open sandbox instantiates a secure Linux sandboxes on E2B, which is used for the terminal and live preview.

You will need to make an account on E2B to get an API key.

Socket.io server

Install dependencies

cd backend/server
npm install

Add the required environment variables in .env (example file provided in .env.example)

Project files will be stored in the projects/<project-id> directory. The middleware contains basic authorization logic for connecting to the server.

Run in development mode

npm run dev

This directory is dockerized, so feel free to deploy a container on any platform of your choice! I chose not to deploy this project for public access due to costs & safety, but deploying your own for personal use should be no problem.

Cloudflare Workers (Database, Storage, AI)

Directories:

  • /backend/database: D1 database
  • /backend/storage: R2 storage
  • /backend/ai: Workers AI

Install dependencies

cd backend/database
npm install

cd ../storage
npm install

cd ../ai
npm install

Read the documentation to learn more about workers.

For each directory, add the required environment variables in wrangler.toml (example file provided in wrangler.example.toml). For the AI worker, you can define any value you want for the CF_AI_KEY -- set this in other .env files to authorize access.

Run in development mode

npm run dev

Deploy to Cloudflare with Wrangler

npx wrangler deploy

Contributing

Thanks for your interest in contributing! Review this section before submitting your first pull request. If you need any help, feel free to reach out to @ishaandey_.

Please prioritize existing issues, but feel free to contribute new issues if you have ideas for a feature or bug that you think would be useful.

Structure

frontend/
├── app
├── assets
├── components
└── lib
backend/
├── server
├── database/
│   ├── src
│   └── drizzle
├── storage
└── ai
Path Description
frontend The Next.js application for the frontend.
backend/server The Express websocket server.
backend/database API for interfacing with the D1 database (SQLite).
backend/storage API for interfacing with R2 storage. Service-bound to /backend/database.
backend/ai API for making requests to Workers AI .

Development

Fork this repo

You can fork this repo by clicking the fork button in the top right corner of this page.

Clone repository

git clone https://github.com/<your-username>/sandbox.git
cd sandbox

Create a new branch

git checkout -b my-new-branch

Commit convention

Before you create a Pull Request, please check that you use the Conventional Commits format

It should be in the form category(scope or module): message in your commit message from the following categories:

  • feat / feature: all changes that introduce completely new code or new features

  • fix: changes that fix a bug (ideally you will additionally reference an issue if present)

  • refactor: any code related change that is not a fix nor a feature

  • docs: changing existing or creating new documentation (i.e. README, docs for usage of a lib or cli usage)

  • chore: all changes to the repository that do not fit into any of the above categories

    e.g. feat(editor): improve tab switching speed

Tech stack

Frontend

Backend