Boxy

CodeSandbox's latest innovation, Boxy, transforms AI from a distant promise into an immediate development companion. By merging Together AI's capabilities with its own robust cloud infrastructure, CodeSandbox has created a plug-and-play AI assistant that speaks the developer's language. This comprehensive guide explores how Boxy refactors code, generates solutions, and amplifies collaboration—while keeping its footprint minimal, with zero spin-up time required.

Integrating AI into Code Development

CodeSandbox's AI integration allows users to experiment with AI-generated code directly through the platform. Through a partnership with Together AI, the company has developed an AI playground accessible via specific sandbox URLs. The AI assistant, called Boxy, provides context-aware code generation, refactoring, and optimization tools that work seamlessly within the CodeSandbox environment.

The AI system operates on CodeSandbox's cloud infrastructure, leveraging the platform's comprehensive suite of development tools and services. Users can test AI capabilities without any additional setup, benefiting from instant access to code interpretation and generation features. The assistant communicates with developers through a dedicated chat interface within the development tools panel, offering real-time assistance with code optimization, bug identification, and security enhancements.

In its initial release, Boxy supports Next.js applications and GitHub repository imports, allowing developers to test AI-driven features within familiar development workflows. The platform's AI capabilities are available through the CodeSandbox Pro subscription, providing users with advanced features such as multi-language support, real-time search improvements, and enhanced collaboration tools.

Boxy Features and Functionality

The Boxy AI assistant enables developers to write, refactor, review, and annotate code with unparalleled efficiency. The assistant operates with zero spin-up time and requires no additional setup, immediately accessing all necessary development tools through CodeSandbox's comprehensive cloud infrastructure.

Within the development environment, Boxy communicates through a dedicated chat interface within the DevTools panel, providing real-time assistance for code optimization, bug identification, and security enhancements. The assistant analyzes the full project context, offering features that include:

Code Refactoring and Optimization

Developers can leverage Boxy's AI capabilities to refactor code directly from the user interface, streamlining the development process. The assistant analyzes codebases to identify potential improvements, applying changes to enhance readability and maintainability.

Code Generation and Explanation

The AI system provides contextually relevant explanations for code functionality and generation. When developers input code snippets or describe functionality requirements, Boxy generates appropriate code, explaining its implementation and reasoning behind the generated solution.

Collaborative Review and Feedback

For code review processes, Boxy introduces several enhancements:

• A PR review panel that tracks review states and maintains detailed reviewer lists

• Two-way GitHub integration for seamless pull request management

• File-level change views that highlight specific modifications

• AI-generated review messages to provide automated feedback

• Direct review submission through the CodeSandbox interface, eliminating the need to switch between development tools and version control platforms

Language and Tool Integration

The assistant supports multiple development environments and tools:

• Official LSP support for Go, including a new Go template

• Enhanced VS Code integration with updated task handling and extension management features

• Tailwind CSS support with automatic class name autocomplete and enhanced linting

• Improved markdown view mode that opens files in new tabs for side-by-side comparison

• Updated Angular CLI template as the default for new projects

These features demonstrate Boxy's commitment to providing developers with a fully integrated, context-aware coding assistant that enhances productivity across multiple development workflows.

Development Environment Enhancements

Enhanced VS Code Integration

A major overhaul of the VS Code integration significantly improves stability while introducing several new features:

• Native sandbox support within VS Code

• Improved task handling and extension management through .vscode/extensions.json

• A revamped command palette that now uses VS Code equivalents, with enhanced performance via quick picker functionality

The updated integration supports additional commands like "Ask Boxy..." and "Run task...", streamlining development workflows.

Development Tools Panel

Significant improvements to the DevTools panel provide developers with more control and visibility:

• Default display size reduced to 40% width, with automatic hiding if content is empty

• Instantaneous search results through improvements in the Pitcher client and streaming technology

• Automatic file previews in the web editor when toggling view modes

• Context-aware code generation, refactoring, and optimization tools through the Boxy chat interface

• Multi-language support and real-time search improvements

Additional Language Support

The platform now features official Language Server Protocol (LSP) support for the Go programming language, complete with a new Go template. This expansion into Go development is complemented by improvements in other areas:

• Advanced tailwind.css support through automatic class name autocomplete and enhanced linting

• Improved markdown view mode that opens files in new tabs for side-by-side comparison

• Updated Angular CLI template serving as the default for new projects (ng.new)

These enhancements demonstrate CodeSandbox's commitment to providing a comprehensive developer environment that integrates seamlessly with popular tools and frameworks.

Collaboration and Code Review

AI Commit Generation

Developers using the platform benefit from improved commit functionality that generates both title and description. When creating pull requests, these details are pre-filled based on recent commits, streamlining the PR process.

Pull Request Review Process

The platform introduces several enhancements specifically for managing pull requests:

• A dedicated review panel tracks reviewer states and maintains detailed lists

• Two-way GitHub integration enables seamless pull request management

• File-level change views provide granular modifications

• AI-generated review messages offer automated feedback

• Direct submission functionality allows reviews to be completed through the CodeSandbox interface, eliminating the need to switch between development tools and version control systems

Developer Experience

The code review workflow has been optimized through several technical improvements:

• Enhanced search performance using new Pitcher client and streaming technology

• Automatic file previews in the web editor when toggling view modes

• Context-aware assistance with code generation, refactoring, and optimization through the Boxy chat interface

• Improved multi-language support across the development environment

Additional Language Support and Tools

Tailwind CSS development has been enhanced with automatic class name autocomplete and improved linting features. Hover previews display color highlighting for better visual feedback during development. The platform has also improved its markdown view mode, allowing CMD + click on "toggle view mode" to open files in new tabs for side-by-side comparisons.

Angular CLI integration has been updated, with the latest version serving as the default template for new projects created with ng.new. The platform now includes official Language Server Protocol (LSP) support for the Go programming language, complete with a new Go template. Additional Go development features include native sandbox support within VS Code, improved task handling through .vscode/extensions.json, and enhanced command palette functionality with quick picker technology.

In the code editor, automatic file previews are now available in the web editor when toggling view modes. The platform's AI capabilities have been refined to automatically determine user input type for improved code generation. Additional enhancements include improved search performance using new Pitcher client technology and streaming improvements. The platform now displays the DevTools panel at 40% width by default and ensures it only appears when content is present, preventing automatic display.

During the development process, users can toggle preview automatic opening in the web editor. The Boxy AI assistant continues to provide context-aware assistance for code generation, refactoring, and optimization through the new chat interface within DevTools. Users retain full control over AI functionality via workspace settings, which allow enabling or disabling AI features for specific Devboxes and repositories.