AI Code Editor (Canvas)
AI Code Editor is a powerful tool designed to enhance your coding experience by integrating advanced AI capabilities directly into your development workflow. It allows you to generate, execute, and debug code efficiently, with real-time previews for web pages and HTML emails. This documentation provides a step-by-step guide on how to use the Bind AI Code Editor effectively.
Features
AI-Powered Code Generation: Generate code using natural language prompts.
Real-Time Code Execution: Execute Python and Java code directly within the editor.
GitHub Integration: Sync your GitHub repositories for personalized code suggestions.
Live Web Page Previews: Instantly preview HTML code in a live environment.
How to Use the Bind AI Code Editor
1. Accessing the Code Editor
To access the Bind AI Code Editor, follow these steps:
Navigate to the Bind AI, click on the “Code Generator” option in the top navigation menu.
Or, Click on the "<>" icon in the Right side navigation, which will directly open the code editor.
Or, Click on this URL: https://copilot.getbind.co/chat/code-generation
The Code Editor will appear on the right side of the screen.
2. Generating Code
Generate Code with AI prompts
Use natural language prompts to generate code. For example, type “Write a Python script to extract names from email addresses.”
The AI will generate the code and display it in the editor.
The editor supports syntax highlighting for various programming languages, making it easier to read and debug your code.
3. Running Code
Once your code is ready, click the “Run” button at the top of the editor.
The output will appear in the console below the editor, showing results, errors, or logs.
Note: Bind AI currently supports executing code/scripts that do not require importing external modules.
4. GitHub Integration
Connecting your codebase to get relevant code suggestions
Click on the “📎” icon or “Connect Data” in the left sidebar navigation.
Authenticate your GitHub account and select the repositories you want to sync.
Bind AI will create embeddings for your codebase, allowing for personalized code suggestions.
5. Previewing Web Pages
First, Generate HTML Code
Use prompts to generate HTML code. For example, “Create a single HTML file with JavaScript included in it.”
Edit the code as necessary in the editor.
Currently only HTML code is supported for previewing web pages.
Sample Prompt: Create a single HTML file for a modern, visually appealing web application for a real estate marketplace. The app should utilize Tailwind CSS components.
Previewing the Web Page
First, click the “Run” button to generate a temporary URL for the web page.
Click on the “Preview” tab at the top of the editor to see how the page appears in a live environment.
Interact with the web page in the preview pane to test links, forms, and other dynamic elements.
Once you have tested the code, you can copy the code and paste it in your codebase, or external applications which support html pages.
We will soon be allowing full web application creation (using react etc) and deploying to Vercel and Netlify. Please email us on sam@getbind.co if you are interested in the waitlist.
Last updated