Merge branch 'main' of https://github.com/e2b-dev/e2b

apps/docs/src/app/cli/commands/page.mdx

@@ -0,0 +1,99 @@
+# CLI Commands
+
+Build your own sandbox with our CLI. {{ className: 'lead' }}
+
+You append always use `--help` for more information about commands and options.
+
+## `build`
+
+Build sandbox template defined by `./e2b.Dockerfile` or `./Dockerfile` in root directory. By default the root directory is the current working directory. This command also creates `e2b.toml` config.
+
+```bash
+e2b build
+```
+
+### Options:
+
+<Properties>
+  <Property name="name" type="-n --name">
+    Specify name of sandbox template. You can use the name to start the sandbox in the SDK. The name must be lowercase and contain only letters, numbers, dashes and underscores.
+  </Property>
+  <Property name="path" type="-p --path">
+    Change root directory where command is executed to `path` directory
+  </Property>
+  <Property name="dockerfile" type="-d --dockerfile">
+    Specify path to Dockerfile. By default E2B tries to find `e2b.Dockerfile` or `Dockerfile` in root directory
+  </Property>
+</Properties>
+
+---
+
+## `init`
+
+Create basic E2B Dockerfile (`./e2b.Dockerfile`) in current directory. You can then run `e2b build` to build sandbox template from this Dockerfile
+
+```bash
+e2b template init
+```
+
+### Options:
+
+<Properties>
+  <Property name="path" type="-p --path">
+    Change root directory where command is executed to `path` directory
+  </Property>
+</Properties>
+
+---
+
+## `list`
+
+List your sandbox templates
+
+```bash
+e2b list
+```
+
+---
+
+## `login`
+
+Log in to CLI. It will save your access token in `~/.e2b` file.
+
+```bash
+e2b login
+```
+
+---
+
+## `logout`
+
+Log out from CLI. It will remove your accesstoken from `~/.e2b` file.
+
+```bash
+e2b logout
+```
+
+---
+
+## `shell`
+
+Connect terminal to sandbox. This command can be used to debug your sandbox template. It works as `docker run -it <image> bash` command.
+
+```bash
+e2b shell
+```
+
+### Options:
+
+<Properties>
+  <Property name="path" type="-p --path">
+    Change root directory where command is executed to `path` directory
+  </Property>
+</Properties>
+
+### Next steps
+
+1. [Create your first sandbox template](/sandbox/templates/overview)
+1. [Check out the official guides](/guides/custom-sandbox)
+{/* 1. [Follow the "Hello World" example](/guides/) */}

apps/docs/src/app/cli/installation/page.mdx

@@ -0,0 +1,30 @@
+# Installation
+
+You build and manage your sandbox templates with our CLI. {{ className: 'lead' }}
+
+The CLI is distributed as an [NPM package](https://www.npmjs.com/package/@e2b/sdk).
+
+## Download CLI
+
+You can install them using the following commands:
+
+```bash
+npm install -g @e2b/cli@latest
+```
+
+
+## Login
+
+You'll need to login to your account to use the CLI. It'll redirect you to the browser to authenticate.
+
+```bash
+e2b login
+```
+
+
+### Next steps
+
+1. [Create your first sandbox template](/sandbox/templates/overview)
+1. [Explore the CLI API](/CLI/commnads)
+1. [Check out the official guides](/guides/custom-sandbox)
+{/* 1. [Follow the "Hello World" example](/guides/) */}

apps/docs/src/app/guide/custom-sandbox/page.mdx

@@ -2,7 +2,11 @@ import Image from 'next/image'
 
 # Creating Custom Sandbox
 
-In this guide, we'll build a custom E2B sandbox with preinstalled dependencies and files.
+In this guide, we'll create a custom E2B sandbox.
+
+
+
+with preinstalled dependencies and files.
 Once the sandbox is built, we'll show how to spawn and control it with our SDK.
 
 ## Prerequisites

apps/docs/src/app/page.mdx

@@ -8,20 +8,23 @@ import { useSignIn } from '@/utils/useSignIn'
 
 <HeroPattern />
 
-# Sandbox for AI Apps & Apps
+# Sandbox for AI Apps & Agents
 
-E2B Sandbox is a secure sandboxed cloud environment made for AI agents and AI apps.
-Sandboxes allow AI agents and apps to have long running cloud secure environments. In these environments, large language models can use the same tools as humans do. {{ className: 'lead' }}
+The E2B Sandbox is a secure way to run your AI app. It is a long-running cloud environment where you can let any LLM (GPTs, Claude, local LLMs, etc) use tools exactly like you would do locally. {{ className: 'lead' }}
 
-## Use cases
-Under the hood, the sandbox is a general purpose machines powered by Ubuntu. Most of the things your AI app or agent can do locally can also be done in our sandboxes.
-Here are a few use cases:
+
+## How Sandboxes Work
+Under the hood, the sandboes are general purpose machines powered by Ubuntu. Learn more about all features and comparison to other services [here](/sandbox/overview).
+
+
+## What Can You Build with Sandboxes
+The sandboxes can do majority of the things your AI app or agent can do locally. A few popular use cases are:
 
 - **AI data analysis**
 - **Code interpreter**
 - **Run LLM-generated code**
-- **Coding copilots and agents**
-- **AI powered browsers in the cloud**
+- **Coding copilots**
+- **AI-powered browsers in the cloud**
 
 ## Quick start
 

apps/docs/src/app/sandbox/templates/overview/page.mdx

@@ -1,8 +1,11 @@
+import Image from 'next/image'
+import imgCustomSandbox from '@/images/custom-sandbox.png'
+
 # Custom Sandbox
 <Note>
 E2B Sandbox is a secure sandboxed cloud environment made for AI agents and AI apps. Sandboxes allow AI agents and apps to have long running cloud secure environments. In these environments, large language models can use the same tools as humans do.
 
-Read more [here](/sandbox/overview) about E2B Sandboxes
+Read more about E2B Sandboxes [here](/sandbox/overview).
 </Note>
 
 Custom sandboxes allows you to spawn a sandbox with a pre-defined environment by you and then control it with our SDK.
@@ -11,6 +14,14 @@ You can build a custom sandbox by creating the [Sandbox Template](/sandbox/templ
 
 Once you build your custom sandbox template, you can spawn multiple isolated sandboxes from it.
 
+<Image
+  src={imgCustomSandbox}
+  className="rounded max-w-full"
+  alt="Graphics explaining how custom sandbox works"
+  unoptimized
+/>
+
+
 ## How it works
 1. [Provide the sandbox template file](/sandbox/templates/template-file)
 1. [Build a sandbox template from it using our CLI](/guide/custom-sandbox#4-build-custom-sandbox)
@@ -26,7 +37,8 @@ Once you build your custom sandbox template, you can spawn multiple isolated san
 
       // Create new sandbox
       const sandbox = await Sandbox.create({
-        id: '<sandbox-template-id>', // You get sandbox ID from the CLI after you run `$ e2b build`
+        // You get sandbox ID from the CLI after you run `$ e2b build`
+        id: '<sandbox-template-id>',  // $HighlightLine
       })
 
       // Close sandbox once done
@@ -38,7 +50,8 @@ Once you build your custom sandbox template, you can spawn multiple isolated san
 
       # Create new sandbox
       sandbox = Sandbox(
-        id="<sandbox-template-id>", # You get sandbox ID from the CLI after you run `$ e2b build`
+        # You get sandbox ID from the CLI after you run `$ e2b build`
+        id="<sandbox-template-id>", # $HighlightLine
       )
 
       # Close sandbox once done

apps/docs/src/app/sandbox/templates/template-file/page.mdx

@@ -1,25 +1,36 @@
-# Template File
+import Image from 'next/image'
+import imgCustomSandbox from '@/images/custom-sandbox.png'
 
-The sandbox template file is a simple Dockerfile named `e2b.Dockerfile` that's used to build a custom sandbox. {{ className: 'lead' }}
+# Template File
 
-Follow [our guide](/guide/custom-sandbox) on how to create a template file to build your own custom sandbox.
+The template file is a Dockerfile named `e2b.Dockerfile`. The template file is used to define an environment for your custom sandbox. {{ className: 'lead' }}
 
 <Note>
+Follow our [guide](/guide/custom-sandbox) on how to create a custom sandbox.
+</Note>
+
+<Image
+  src={imgCustomSandbox}
+  className="rounded max-w-full"
+  alt="Graphics explaining how custom sandbox works"
+  unoptimized
+/>
+
+## `e2b.Dockerfile`
 The Dockerfile must be Debian based (e.g. Ubuntu). Only the following [Dockerfile commands](https://docs.docker.com/engine/reference/builder/) are supported:
   - `FROM`
   - `ADD`
   - `COPY`
   - `RUN`
   - `WORKDIR`
-</Note>
 
 
 ## Example
 
 The following example template file defines a Ubuntu-based sandbox with installed GitHub CLI.
 
 
-<CodeGroup isRunnable={false}>
+<CodeGroup isFileName title="e2b.Dockerfile" isRunnable={false}>
 ```sh
 # You can use most of the Debian-based base images
 FROM ubuntu:22.04

apps/docs/src/components/Code.tsx

@@ -4,7 +4,7 @@ import { Children, createContext, isValidElement, useContext, useEffect, useRedu
 import { Tab } from '@headlessui/react'
 import clsx from 'clsx'
 import { create } from 'zustand'
-import { LoaderIcon, PlayIcon } from 'lucide-react'
+import { LoaderIcon, PlayIcon, File } from 'lucide-react'
 
 import { CopyButton } from '@/components/CopyButton'
 import { useApiKey } from '@/utils/useUser'
@@ -17,9 +17,9 @@ import logoNode from '@/images/logos/node.svg'
 import logoPython from '@/images/logos/python.svg'
 
 export function getPanelTitle({
-                                title,
-                                language,
-                              }: {
+  title,
+  language,
+}: {
   title?: string;
   language?: string;
 }) {
@@ -33,11 +33,11 @@ export function getPanelTitle({
 }
 
 function CodePanel({
-                     children,
-                     code,
-                     lang,
-                     isRunnable = true,
-                   }: {
+  children,
+  code,
+  lang,
+  isRunnable = true,
+}: {
   children: React.ReactNode;
   code?: string;
   lang?: LangShort;
@@ -207,13 +207,15 @@ function CodePanel({
 }
 
 export function CodeGroupHeader({
-                                  title,
-                                  children,
-                                  selectedIndex,
-                                }: {
+  title,
+  children,
+  selectedIndex,
+  isFileName = false,
+}: {
   title: string;
   children: React.ReactNode;
   selectedIndex: number;
+  isFileName: boolean;
 }) {
   const hasTabs = Children.count(children) > 1
   if (!title && !hasTabs) return null
@@ -224,7 +226,17 @@ export function CodeGroupHeader({
       <div className="flex flex-col items-start">
         {title && (
           <div className="pl-2 mt-3">
-            <h3 className="font-xs font-medium text-brand-50">{title}</h3>
+            {isFileName ? (
+              <div className="flex items-center justify-start space-x-2">
+                <File
+                  size={18}
+                  strokeWidth={1}
+                />
+                <h3 className="text-sm text-brand-400 font-mono">{title}</h3>
+              </div>
+              ) : (
+              <h3 className="text-sm text-gray-500 text-brand-400">{title}</h3>
+            )}
           </div>
         )}
         {hasTabs && (
@@ -413,12 +425,14 @@ function useOutputReducer() {
 }
 
 export function CodeGroup({
-                            children,
-                            title,
-                            path,
-                            ...props
-                          }: React.ComponentPropsWithoutRef<typeof CodeGroupPanels> & {
+  children,
+  title,
+  isFileName,
+  path,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof CodeGroupPanels> & {
   title?: string;
+  isFileName?: boolean;
   path?: string; // For analytics
 }) {
   const hasTabs = Children.count(children) > 1
@@ -431,7 +445,11 @@ export function CodeGroup({
   const tabGroupProps = useTabGroupProps(languages)
 
   const header = (
-    <CodeGroupHeader title={title} selectedIndex={tabGroupProps.selectedIndex}>
+    <CodeGroupHeader
+      title={title}
+      selectedIndex={tabGroupProps.selectedIndex}
+      isFileName={isFileName}
+    >
       {children}
     </CodeGroupHeader>
   )