You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: packages/projects-docs/pages/learn/ai/boxy.mdx
+22-12Lines changed: 22 additions & 12 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -5,61 +5,71 @@ description: Introduction to Boxy the AI-powered coding companion
5
5
6
6
import { Callout } from'nextra-theme-docs'
7
7
8
-
9
8
# Meet Boxy
10
9
11
-
Boxy is an experimental AI-powered chat tool that is built directly into your editor. Boxy is aware of your code and can answer questions and make suggestions that consider best practices and conventions that are specific to your project.
10
+
<Calloutemoji="⚠️">Boxy will be deprecated on July 31, 2024.</Callout>
11
+
12
+
Boxy is an experimental AI-powered chat tool that is built directly into your editor. Boxy is aware of your code and can answer questions and make suggestions that consider best practices and conventions that are specific to your project.
12
13
13
14
14
15
15
16
## Boxy in the Editor
16
-
If you have granted AI permissions in the workspace settings. You will notice the newest addition to your team sitting next to your avatar.
17
17
18
-
18
+
If you have granted AI permissions in the workspace settings. You will notice the newest addition to your team sitting next to your avatar.
19
+
20
+
19
21
20
22
The easiest way to work with Boxy is to select a piece of code and choose a saved prompt. When you select the code, you will see a toolbar hover above the top line of the selected code. From there, you can either open the DevTool to chat with Boxy or run a saved prompt.
21
23
22
24
23
25
24
-
25
26
-**Edit** shows prompts related to refactoring code.
26
27
-**Ask** shows prompts related to chat actions.
27
28
- The **AI icon** opens a chat DevTool.
28
29
29
30
### Command Palette
30
-
Saved prompts are listed in the command palette. You can access them from the toolbar using `⌘ + ⇧ + H`.
31
-
32
-
From here, you can search for or select a prompt from the list. Alternatively, you can type a custom prompt, which Boxy will quickly respond to.
33
-
31
+
32
+
Saved prompts are listed in the command palette. You can access them from the toolbar using `⌘ + ⇧ + H`.
33
+
34
+
From here, you can search for or select a prompt from the list. Alternatively, you can type a custom prompt, which Boxy will quickly respond to.
35
+
34
36
When you ask Boxy to perform an action like `Document Code` or `Improve Readability` and you have code selected in the editor, Boxy will make suggestions directly in the file.
35
37
36
38
If you ask Boxy to `Explain Code` or `Consider Security`, the chat DevTool will automatically open with Boxy's response.
37
-
38
39
39
40
## Boxy Chat
41
+
40
42
Open a chat DevTool to have a conversation with Boxy. You can open a chat in two different ways:
43
+
41
44
- select the AI icon in the toolbar.
42
45
- open a new DevTool and select `Chat with Boxy`.
43
46
44
-
You can have multiple chats open at the same time. If you need to change topics but don't want to lose your progress in your last conversation, simply select `+` in the input to create a new chat.
47
+
You can have multiple chats open at the same time. If you need to change topics but don't want to lose your progress in your last conversation, simply select `+` in the input to create a new chat.
45
48
46
49
Below are a few tips and tricks that can help you make the most of your interactions with Boxy.
47
50
48
51
## Tips and Tricks
52
+
49
53
### Tips
54
+
50
55
**Keep chatting**
51
56
Boxy remembers your previous conversations and takes them into account when providing responses. For example, if you have asked Boxy to include the file path for the suggested code repeatedly in the past, it will include it in future responses.
52
57
53
58
**Request response formats**
54
-
Do you prefer that Boxy always provides suggestions in insertable snippets? Or do you prefer to see the code situated within the full file? Ask Boxy to `"always respond with ___"` to receive suggestions in the way you like.
59
+
Do you prefer that Boxy always provides suggestions in insertable snippets? Or do you prefer to see the code situated within the full file? Ask Boxy to `"always respond with ___"` to receive suggestions in the way you like.
55
60
56
61
**When in doubt, provide more context**
57
62
Boxy will give you what you ask for. They may make suggestions based on the way your frame your question. Boxy may have better responses when you ask them to consider specific files or libraries that may contain useful context for your question.
58
63
59
64
### Tricks
65
+
60
66
- use backticks for keywords or code segments
61
67
- use "again" to repeat your last prompt
62
68
63
69
## Commit suggestions
70
+
64
71
Say goodbye to nondescriptive or confusing commit messages. When you enable AI to work on repositories, Boxy will automatically generate commit messages based on the files changed in your branch. You can easily edit or remove these suggestions according to your preference.
65
72
73
+
## Boxy for Sandboxes
74
+
75
+
Boxy is available only on repositories and Devboxes. If you want the support of Boxy in your Sandbox, you can easily [convert your Sandbox](/tutorial/convert-browser-sandbox-cloud) using the options in the toolbar.
Copy file name to clipboardExpand all lines: packages/projects-docs/pages/learn/ai/faqs.mdx
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -21,4 +21,4 @@ Yes. Boxy is available in all plans.
21
21
22
22
No. Boxy is exclusively available in devboxes and repositories. However, you can easily [convert a Sandbox into a Devbox](/tutorial/convert-browser-sandbox-cloud) to get access to Boxy. This is available through the "Convert to Devbox" button at the top right of the Sandbox editor.
Copy file name to clipboardExpand all lines: packages/projects-docs/pages/learn/ai/getting-started.mdx
+3-9Lines changed: 3 additions & 9 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,19 +4,13 @@ description: Instructions for getting started with AI
4
4
---
5
5
6
6
# Getting Started
7
-
All CodeSandbox AI tools are available for Pro users. To enable these features, admins need to grant permissions in the workspace settings.
8
-
9
-
10
7
8
+
All CodeSandbox AI tools are available to Free and Pro users. To enable these features, admins need to grant permissions in the [workspace settings](https://codesandbox.io/t/permissions).
11
9
10
+
12
11
13
12
Once you grant AI permissions, CodeSandbox will send information about the event to OpenAI for analysis. Under no circumstances will we send any event data to OpenAI without explicit instruction to do so. We will only share selected event data with OpenAI after you toggle on these permissions. OpenAI does not use the event data shared via this feature to train its AI models. To learn more about our privacy agreement with OpenAI, check out our [Privacy page](https://codesandbox.io/legal/privacy).
14
13
15
14
## Running AI
16
-
Once permissions have been granted, you need to restart the VMs for the changes to take effect. You can do this by selecting `Restart Branch` in the main menu. If you are in a Devbox, the option will read `Restart Sandbox`.
17
-
18
-
## Boxy for Sandboxes
19
-
Boxy is available only on repositories and Devboxes. If you want the support of Boxy in your Sandbox, you can easily [convert your sandbox](/tutorial/convert-browser-sandbox-cloud) using the options in the toolbar.
20
-
21
-
22
15
16
+
Once permissions have been granted, you need to restart the VMs for the changes to take effect. You can do this by selecting `Restart Branch` in the main menu. If you are in a Devbox, the option will read `Restart Sandbox`.
Copy file name to clipboardExpand all lines: packages/projects-docs/pages/learn/editors/web-interface.mdx
+1-2Lines changed: 1 addition & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -17,12 +17,11 @@ In the Terminal panel, you can see all the running tasks, private terminals, and
17
17
18
18
While the layout is entirely customizable, the standard layout opens previews, and support tools like documentation and setup tools in the right editor panel.
19
19
20
-
21
20
## Tasks, Terminals and Previews
22
21
23
22
Preview ports, Tasks and shared terminals are controlled through the devtool extension in the sidebar.
Copy file name to clipboardExpand all lines: packages/projects-docs/pages/tutorial/convert-browser-sandbox-cloud.mdx
+11-30Lines changed: 11 additions & 30 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -5,56 +5,37 @@ description: Learn how to quickly convert CodeSandbox browser sandboxes into the
5
5
6
6
# Convert a Sandbox into a Devbox
7
7
8
-
CodeSandbox provides two different sandboxing environments you can use to quickly experiment with code, learn, prototype a project and share it with others: sandboxes and devboxes.
8
+
CodeSandbox provides two different sandboxing environments you can use to quickly experiment with code, learn, prototype a project and share it with others: Sandboxes and Devboxes.
9
9
10
10
Devboxes are part of our evolved CodeSandbox experience, so we now provide a way to easily convert existing browser sandboxes into this new experience.
11
11
12
12
## Why convert into a Devbox?
13
13
14
-
Cloud and browser sandboxes are valuable tools for web development projects, but they have critical differences regarding their capabilities and limitations.
14
+
Sandboxes and Devboxes are valuable tools for web development projects, but they have critical differences regarding their capabilities and limitations.
15
15
16
-
[Browser sandboxes](/learn/sandboxes/editors?tab=browser), also known as client-side sandboxes, run directly within the user's web browser. Because they rely on browser features to provide environments for running code, they are lightweight and easy to use. Still, they do not provide the same level of scalability and isolation as virtualized environments since they rely heavily on the browser.
16
+
[Sandboxes](/learn/sandboxes/editor-features) run directly within the user's web browser. Because they rely on browser features to provide environments for running code, they are lightweight and easy to use. Still, they do not provide the same level of scalability and isolation as virtualized environments since they rely heavily on the browser.
17
17
18
-
In contrast, [Devboxes](/learn/sandboxes/editors?tab=cloud) use [microVMs](/learn/environment/vm) to provide an isolated and secure environment for running code. These microVMs are lightweight and optimized for running web applications, and they provide a more consistent and predictable environment for running code than browser sandboxes.
18
+
In contrast, [Devboxes](/learn/devboxes/overview) use [VMs](/learn/environment/vm) to provide an isolated and secure environment for running code. These VMs are lightweight and optimized for running web applications, and they provide a more consistent and predictable environment for running code than Sandboxes.
19
19
20
-
As a result, Devboxes get rid of several [limitations of sandboxes](/faq#are-there-any-limitations-with-sandboxes), while offering additional benefits when managing and scaling infrastructure. Namely, Devboxes can be easily scaled up or down to accommodate project needs, offering more resource allocation and management flexibility.
20
+
As a result, Devboxes get rid of several [limitations of Sandboxes](/faq#are-there-any-limitations-with-sandboxes), while offering additional benefits when managing and scaling infrastructure. Namely, Devboxes can be easily scaled up or down to accommodate project needs, offering more resource allocation and management flexibility.
21
21
22
22
Additionally, Devboxes are collaborative by default, allowing for easier collaboration among team members, as developers can easily share their code and collaborate in real time. This sets CodeSandbox apart from other cloud development tools.
23
23
24
24
### Feature comparison
25
25
26
26
Besides the benefits presented above, there are some other noteworthy features that are only available in Devboxes:
However, Devboxes currently do not offer feature parity to Sandboxes. The following Sandboxes features are currently not available in Devboxes:
36
-
- deployment menu
37
-
- live sessions
38
-
39
-
## Convert into a Devbox via URL
40
-
41
-
There are several ways to convert a Sandbox into a Devbox. The first is from the URL.
42
-
43
-
Usually, Sandboxes start with `https://codesandbox.io/s/`. To convert into Devbox, you can replace the prefix with `https://codesandbox.io/p/sandbox/`. This will automatically open up a Devbox.
44
-
45
-
## Convert from the browser sandbox UI
46
-
47
-
There are a few prompts for converting a sandbox in the browser sandbox UI.
48
-
49
-
### Terminal tab
50
-
51
-
If you want to access the terminal in the browser sandbox UI, we suggest you convert it into a Devbox since the experience is much better there.
52
-
53
-
54
-
55
-
### Sidebar icons
56
-
57
-
In case you want to use some cloud-only features such as Docker, VS Code integration or AI, click the corresponding icon on the left sidebar. This will display a prompt allowing you to convert or fork the sandbox to get access to those features.
37
+
## Convert a Sandbox to a Devbox
58
38
59
-
39
+
You can convert most Sandboxes into a Devbox by clicking the "Convert to Devbox" button at the top right of the Sandbox editor.
60
40
41
+
0 commit comments