April 25, 2025
TLDR
This guide demonstrates how to integrate your Mage Pro environment with Visual Studio Code and Cursor. By implementing Tailscale VPN and Remote SSH connections, you'll gain the ability to develop and manage your data pipelines directly within your preferred code editor, enhancing your development workflow and productivity. The integration provides a coding experience with full access to your Mage Pro features while leveraging the advanced editing capabilities of modern code editors.
Table of Contents
Introduction to Mage Pro and VS Code integration
Downloading Tailscale VPN
Installing and configuring Tailscale
Creating an Auth Key in Tailscale
Adding the Auth Key in Mage Pro
Restarting the cluster
Verifying the connection to Tailscale
Setting up VS Code
Navigating to your user code path
Finalizing the integration
Real-time code synchronization
Conclusion
Introduction to Mage Pro and VS Code integration
Mage Pro’s integration with VS Code and Cursor enable developers to enhance their coding experience while accessing the powerful data pipeline features of Mage Pro. With this integration you can manage your projects from a familiar coding environment and collaborate across teams.
Benefits of integration
Enhanced development experience: Utilize the robust features of VS Code or Cursor while managing your Mage Pro projects.
Streamlined workflow: Access all your tools in one place, reducing the need to switch between different applications.
Improved collaboration: Share your code and collaborate with team members more effectively through integrated tools.
Downloading Tailscale VPN
To connect Mage Pro with VS Code or Cursor, the first step is to download Tailscale VPN. Tailscale provides a secure connection to your environment, ensuring that your data remains protected while you work.
Navigate to the Tailscale website, and hit the download button. Make sure to select the appropriate version for your operating system. Once the download is complete, proceed with the installation.
Installing and configuring Tailscale
Follow the in-app instructions to install Tailscale. The installation process is straightforward, and it will guide you through the necessary steps to get Tailscale running on your system. Once installed, you will need to configure the application to connect to your Mage Pro environment.
Creating an Auth Key in Tailscale
After Tailscale is installed, navigate to the admin console from the main page of their website. Log in to access the settings where you can create an Auth Key.
To generate the Auth Key, follow these steps:
Navigate to the Settings tab.
Click on Keys.
Select Generate Auth Key.
Click Generate Key.
Adding the Auth Key to Mage Pro
Once you have your Auth Key, the next step is to integrate it into your Mage Pro setup. Navigate back to your Mage Pro management cluster and follow these steps:
Select Edit to add variables.
Input your Auth Key into the TS_AUTH_KEY environment variable.
After entering the Auth Key, hit Save Changes. This step is crucial as it allows Mage Pro to authenticate with Tailscale.
Verifying connection to Tailscale
To apply the changes made to the environment variables, you will need to restart your Mage Pro cluster. This ensures that the new Auth Key is recognized and that your connection to Tailscale is established.
Once the cluster restarts, navigate back to your Tailscale admin panel. Here, you should see your cluster environment listed, typically label contains the name of your Mage Pro cluster. Retrieve the address from the address column and open a local terminal to run a command that verifies your connection. Use the following command, replacing PRIVATE_IP_ADDRESS with the actual private IP address from the Tailscale admin panel:
After executing this command, you should see a return indicating you are connected to your environment.
Setting up VS Code
With Tailscale configured and your connection verified, it's time to set up Visual Studio Code for integration with Mage Pro. First, ensure you have the Remote - SSH extension installed in VS Code. This extension is essential for connecting to your remote environment.
To install the extension, navigate to the Extensions view in VS Code, search for "Remote - SSH," and click Install. Once installed, you can start connecting to your Mage Pro environment.
Connecting to your host via SSH
Open the Command Palette in Visual Studio Code by pressing Ctrl+Shift+P (or Cmd+Shift+P on macOS). Type "Remote-SSH: Connect to Host" and select it.
You will need to enter your full username followed by the private IP address of your Mage Pro environment in the format username@PRIVATE_IP_ADDRESS, and then enter your password. The initial login details can be obtained from the team at Mage. After entering the details, click Connect.
Navigating to your user code path
Once connected, you will need to navigate to your user code path. The default path is typically set to /home/src/default/repo. If you've customized this path, use your specific directory.
In the dialog that appears, simply enter the path and click OK. Your Mage Pro files will begin to download into Visual Studio Code, providing you with immediate access to your project.
Finalizing the integration
At this point, your integration between Mage Pro and Visual Studio Code is nearly complete. Review your project files to ensure everything has downloaded correctly. This step is vital, as it confirms you have access to all necessary components of your Data Pipeline.
To ensure smooth operation, take a moment to familiarize yourself with the folder structure and files available in your workspace. This knowledge will enhance your development experience and streamline your workflow.
Real-time code synchronization
One of the key benefits of connecting Mage Pro with VS Code is the automatic synchronization between environments. When you edit code in VS Code, changes are reflected in your Mage Pro blocks without manual updates.
As you save changes in VS Code, they instantly propagate to your Mage Pro environment through the SSH connection. This two-way sync allows you to:
Make changes in VS Code and see them immediately in the Mage interface
Run and test your code immediately from Mage Pro
Collaborate with team members as changes made in the Mage UI appear in your VS Code editor
The SSH connection creates a unified development experience that combines VS Code's IDE capabilities with Mage Pro's pipeline orchestration features, speeding up development and reducing context-switching.
Conclusion
Congratulations! You have successfully connected your Mage Pro environment with VS Code, enhancing your development capabilities. The combination of VS Code's powerful editing features with Mage Pro's orchestration capabilities gives you the best of both worlds. You'll notice increased productivity as you transition between coding and data pipeline management within a unified workflow. Plus, your team members will appreciate the consistent development environment that makes collaboration straightforward and reduces onboarding time for new projects.
Want to learn more about Mage Pro? Book a demo today!
