Quickstart updates (#65)

* Add link for dashboard to API key

* Update claude model and prompt

* Add dynamically updated libraries in code-interpreter

* Add loading of .env to code examples

* Syntax errors + missing dotenv imports

* more fixes + edited sbx.upload example

* add sandbox spawn for connect example

* fix sandbox/connect highlights

* removing dotenv import from code snippets

* move libraries info from component

* last dotenv remove

* unified single quotes for imports

* Remove/unify dotenv imports

* fix spaces + code snippet

Author: RatArt

docs/code-interpreting/analyze-data-with-ai.mdx

@@ -140,12 +140,16 @@ These are the columns:
 - 'vote_average': float number between 0 and 10 that's representing viewers voting average
 - 'vote_count': int for how many viewers voted
 
-I want to better understand how the vote average has changed over the years. Write Python code that analyzes the dataset based on my request and produces right chart accordingly`
+Write Python code that creates a line chart showing how vote_average changed over the years.
+Do NOT print or explore the data. Just create the visualization directly.
+
+CRITICAL: Your code MUST end with this exact line to display the plot:
+display(plt.gcf())`
 
 const anthropic = new Anthropic()
 console.log('Waiting for the model response...')
 const msg = await anthropic.messages.create({
-  model: 'claude-3-5-sonnet-20240620',
+  model: 'claude-haiku-4-5-20251001',
   max_tokens: 1024,
   messages: [{ role: 'user', content: prompt }],
 })
@@ -154,8 +158,8 @@ const msg = await anthropic.messages.create({
 ```python Python
 from anthropic import Anthropic
 
-prompt = '''
-I have a CSV file about movies. It has about 10k rows. It's saved in the sandbox at {datasetPathInSandbox.path}.
+prompt = f'''
+I have a CSV file about movies. It has about 10k rows. It's saved in the sandbox at {dataset_path_in_sandbox.path}.
 These are the columns:
 - 'id': number, id of the movie
 - 'original_language': string like "eng", "es", "ko", etc
@@ -167,11 +171,15 @@ These are the columns:
 - 'vote_average': float number between 0 and 10 that's representing viewers voting average
 - 'vote_count': int for how many viewers voted
 
-I want to better understand how the vote average has changed over the years. Write Python code that analyzes the dataset based on my request and produces right chart accordingly'''
+Write Python code that creates a line chart showing how vote_average changed over the years.
+Do NOT print or explore the data. Just create the visualization directly.
+
+CRITICAL: Your code MUST end with this exact line to display the plot:
+display(plt.gcf())'''
 
 anthropic = Anthropic()
 msg = anthropic.messages.create(
-  model='claude-3-5-sonnet-20240620',
+  model='claude-haiku-4-5-20251001',
   max_tokens=1024,
   messages=[
     {"role": "user", "content": prompt}
@@ -189,7 +197,7 @@ Update the initialization of the Anthropic client to include the tool use like t
 <CodeGroup>
 ```js JavaScript & TypeScript highlight={5-20}
 const msg = await anthropic.messages.create({
-  model: 'claude-3-5-sonnet-20240620',
+  model: 'claude-haiku-4-5-20251001',
   max_tokens: 1024,
   messages: [{ role: 'user', content: prompt }],
   tools: [
@@ -212,7 +220,7 @@ const msg = await anthropic.messages.create({
 ```
 ```python Python highlight={7-19}
 msg = anthropic.messages.create(
-  model='claude-3-5-sonnet-20240620',
+  model='claude-haiku-4-5-20251001',
   max_tokens=1024,
   messages=[
     {"role": "user", "content": prompt}
@@ -304,7 +312,10 @@ async function runAIGeneratedCode(aiGeneratedCode: string) {
   }
 }
 ```
-```python Python highlight={7-12,15-17,20-23}
+```python Python highlight={1-2,7-12,15-17,20-23}
+import sys
+import base64
+
 def run_ai_generated_code(ai_generated_code: str):
     print('Running the code in the sandbox....')
     execution = sbx.run_code(ai_generated_code)
@@ -381,14 +392,14 @@ async function runAIGeneratedCode(aiGeneratedCode: string) {
       // Save the png to a file
       // The png is in base64 format.
       fs.writeFileSync(`chart-${resultIdx}.png`, result.png, { encoding: 'base64' })
-      console.log('Chart saved to chart-${resultIdx}.png')
+      console.log(`Chart saved to chart-${resultIdx}.png`)
       resultIdx++
     }
   }
 }
 
 const prompt = `
-I have a CSV file about movies. It has about 10k rows. It's saved in the sandbox at ${datasetPathInSandbox.path}.
+I have a CSV file about movies. It has about 10k rows. It's saved in the sandbox at ${dataset_path_in_sandbox.path}.
 These are the columns:
 - 'id': number, id of the movie
 - 'original_language': string like "eng", "es", "ko", etc
@@ -400,12 +411,16 @@ These are the columns:
 - 'vote_average': float number between 0 and 10 that's representing viewers voting average
 - 'vote_count': int for how many viewers voted
 
-I want to better understand how the vote average has changed over the years. Write Python code that analyzes the dataset based on my request and produces right chart accordingly`
+Write Python code that creates a line chart showing how vote_average changed over the years.
+Do NOT print or explore the data. Just create the visualization directly.
+
+CRITICAL: Your code MUST end with this exact line to display the plot:
+display(plt.gcf())`
 
 const anthropic = new Anthropic()
 console.log('Waiting for the model response...')
 const msg = await anthropic.messages.create({
-  model: 'claude-3-5-sonnet-20240620',
+  model: 'claude-haiku-4-5-20251001',
   max_tokens: 1024,
   messages: [{ role: 'user', content: prompt }],
   tools: [
@@ -495,13 +510,16 @@ These are the columns:
 - 'vote_average': float number between 0 and 10 that's representing viewers voting average
 - 'vote_count': int for how many viewers voted
 
-I want to better understand how the vote average has changed over the years.
-Write Python code that analyzes the dataset based on my request and produces right chart accordingly"""
+Write Python code that creates a line chart showing how vote_average changed over the years.
+Do NOT print or explore the data. Just create the visualization directly.
+
+CRITICAL: Your code MUST end with this exact line to display the plot:
+display(plt.gcf())"""
 
 anthropic = Anthropic()
 print("Waiting for model response...")
 msg = anthropic.messages.create(
-  model='claude-3-5-sonnet-20240620',
+  model='claude-haiku-4-5-20251001',
   max_tokens=1024,
   messages=[
     {"role": "user", "content": prompt}

docs/code-interpreting/analyze-data-with-ai/pre-installed-libraries.mdx

@@ -2,35 +2,8 @@
 title: "Pre-installed libraries"
 ---
 
-The sandbox comes with a [set of pre-installed Python libraries](https://github.com/e2b-dev/code-interpreter/blob/main/template/requirements.txt) for data analysis
-but you can [install additional packages](/docs/quickstart/install-custom-packages):
-- `aiohttp` (v3.9.3)
-- `beautifulsoup4` (v4.12.3)
-- `bokeh` (v3.3.4)
-- `gensim` (v4.3.2)
-- `imageio` (v2.34.0)
-- `joblib` (v1.3.2)
-- `librosa` (v0.10.1)
-- `matplotlib` (v3.8.3)
-- `nltk` (v3.8.1)
-- `numpy` (v1.26.4)
-- `opencv-python` (v4.9.0.80)
-- `openpyxl` (v3.1.2)
-- `pandas` (v1.5.3)
-- `plotly` (v5.19.0)
-- `pytest` (v8.1.0)
-- `python`-docx (v1.1.0)
-- `pytz` (v2024.1)
-- `requests` (v2.26.0)
-- `scikit-image` (v0.22.0)
-- `scikit-learn` (v1.4.1.post1)
-- `scipy` (v1.12.0)
-- `seaborn` (v0.13.2)
-- `soundfile` (v0.12.1)
-- `spacy` (v3.7.4)
-- `textblob` (v0.18.0)
-- `tornado` (v6.4)
-- `urllib3` (v1.26.7)
-- `xarray` (v2024.2.0)
-- `xlrd` (v2.0.1)
-- `sympy` (v1.12)
+import { Requirements } from '/snippets/SandboxPackages.jsx';
+
+The sandbox comes with a <a href="https://github.com/e2b-dev/code-interpreter/blob/main/template/requirements.txt">set of pre-installed Python libraries</a> for data analysis but you can <a href="/docs/quickstart/install-custom-packages">install additional packages</a>
+
+<Requirements />

docs/code-interpreting/supported-languages/javascript.mdx

@@ -12,7 +12,7 @@ The E2B Code Interpreter supports TypeScript, top-level await, ESM-style imports
 
 <CodeGroup>
 ```js JavaScript & TypeScript
-import { Sandbox } from "@e2b/code-interpreter";
+import { Sandbox } from '@e2b/code-interpreter';
 
 // Create a new sandbox
 const sbx = await Sandbox.create();

docs/commands.mdx

@@ -17,7 +17,6 @@ console.log(result)
 from e2b_code_interpreter import Sandbox
 
 sandbox = Sandbox.create()
-
 result = sandbox.commands.run('ls -l')
 print(result)
 ```

docs/commands/background.mdx

@@ -23,7 +23,7 @@ const command = await sandbox.commands.run('echo hello; sleep 10; echo world', {
 // Kill the command
 await command.kill()
 ```
-```python Python
+```python Python highlight={6}
 from e2b_code_interpreter import Sandbox
 
 sandbox = Sandbox.create()

docs/commands/streaming.mdx

@@ -11,6 +11,7 @@ or the `on_stdout`, `on_stderr` callbacks to the `commands.run()` method in Pyth
 import { Sandbox } from '@e2b/code-interpreter'
 
 const sandbox = await Sandbox.create()
+
 const result = await sandbox.commands.run('echo hello; sleep 1; echo world', {
   onStdout: (data) => {
     console.log(data)

docs/filesystem/read-write.mdx

@@ -10,6 +10,7 @@ You can read files from the sandbox filesystem using the `files.read()` method.
 <CodeGroup>
 ```js JavaScript & TypeScript
 import { Sandbox } from '@e2b/code-interpreter'
+
 const sandbox = await Sandbox.create()
 const fileContent = await sandbox.files.read('/path/to/file')
 ```
@@ -28,6 +29,7 @@ You can write single files to the sandbox filesystem using the `files.write()` m
 <CodeGroup>
 ```js JavaScript & TypeScript
 import { Sandbox } from '@e2b/code-interpreter'
+
 const sandbox = await Sandbox.create()
 
 await sandbox.files.write('/path/to/file', 'file content')
@@ -37,7 +39,7 @@ from e2b_code_interpreter import Sandbox
 
 sandbox = Sandbox.create()
 
-await sandbox.files.write('/path/to/file', 'file content')
+sandbox.files.write('/path/to/file', 'file content')
 ```
 </CodeGroup>
 
@@ -48,6 +50,7 @@ You can also write multiple files to the sandbox.
 <CodeGroup>
 ```js JavaScript & TypeScript
 import { Sandbox } from '@e2b/code-interpreter'
+
 const sandbox = await Sandbox.create()
 
 await sandbox.files.write([
@@ -60,7 +63,7 @@ from e2b_code_interpreter import Sandbox
 
 sandbox = Sandbox.create()
 
-await sandbox.files.write_files([
+sandbox.files.write_files([
     { "path": "/path/to/a", "data": "file content" },
     { "path": "another/path/to/b", "data": "file content" }
 ])

docs/filesystem/upload.mdx

@@ -70,7 +70,7 @@ import requests
 sandbox = Sandbox.create(timeout=12_000, secure=True)
 
 # Create a pre-signed URL for file upload with a 10 second expiration
-signed_url = sbx.upload_url(path="demo.txt", user="user", use_signature_expiration=10_000)
+signed_url = sandbox.upload_url(path="demo.txt", user="user", use_signature_expiration=10_000)
 
 form_data = {"file":"file content"}
 requests.post(signed_url, data=form_data)
@@ -81,9 +81,6 @@ requests.post(signed_url, data=form_data)
 
 <CodeGroup>
 ```js JavaScript & TypeScript
-const fs = require('fs');
-const path = require('path');
-
 import { Sandbox } from '@e2b/code-interpreter'
 
 const sandbox = await Sandbox.create()
@@ -114,7 +111,7 @@ const readDirectoryFiles = (directoryPath) => {
 };
 
 // Usage example
-const files = readDirectoryContents('/local/dir');
+const files = readDirectoryFiles('/local/dir');
 console.log(files); 
 // [
 //   { path: '/local/dir/file1.txt', data: 'File 1 contents...' },
@@ -151,11 +148,11 @@ def read_directory_files(directory_path):
 files = read_directory_files("/local/dir")
 print(files)
 # [
-#  {"'path": "/local/dir/file1.txt", "data": "File 1 contents..." },
+#  {"path": "/local/dir/file1.txt", "data": "File 1 contents..." },
 #   { "path": "/local/dir/file2.txt", "data": "File 2 contents..." },
 #   ...
 # ]
 
-sandbox.files.write(files)
+sandbox.files.write_files(files)
 ```
 </CodeGroup>

docs/filesystem/watch.mdx

@@ -29,7 +29,7 @@ const handle = await sandbox.files.watchDir(dirname, async (event) => {
 await sandbox.files.write(`${dirname}/my-file`, 'hello')
 ```
 ```python Python highlight={7,12-16}
-from e2b_code_interpreter import Sandbox
+from e2b_code_interpreter import Sandbox, FilesystemEventType
 
 sandbox = Sandbox.create()
 dirname = '/home/user'
@@ -43,7 +43,7 @@ sandbox.files.write(f"{dirname}/my-file", "hello")
 events = handle.get_new_events()
 for event in events:
   print(event)
-  if event.type == FilesystemEventType.Write:
+  if event.type == FilesystemEventType.WRITE:
     print(f"wrote to file {event.name}")
 ```
 </CodeGroup>
@@ -78,7 +78,7 @@ const handle = await sandbox.files.watchDir(dirname, async (event) => {
 await sandbox.files.write(`${dirname}/my-folder/my-file`, 'hello')
 ```
 ```python Python highlight={7,9}
-from e2b_code_interpreter import Sandbox
+from e2b_code_interpreter import Sandbox, FilesystemEventType
 
 sandbox = Sandbox.create()
 dirname = '/home/user'
@@ -92,7 +92,7 @@ sandbox.files.write(f"{dirname}/my-folder/my-file", "hello")
 events = handle.get_new_events()
 for event in events:
   print(event)
-  if event.type == FilesystemEventType.Write:
+  if event.type == FilesystemEventType.WRITE:
     print(f"wrote to file {event.name}")
 ```
 </CodeGroup>

docs/legacy/code-interpreter/examples.mdx

@@ -107,7 +107,7 @@ plt.show()
 
 <CodeGroup isRunnable={false}>
 ```js JavaScript & TypeScript
-import { CodeInterpreter } from "@e2b/code-interpreter";
+import { CodeInterpreter } from '@e2b/code-interpreter';
 
 code = `
 import time