# AI Code Editor (Canvas)

[AI Code Editor](https://copilot.getbind.co/chat/code-generation) 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](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**

* You can read [step by step instructions for Github integration here](integrations/github)
* 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.&#x20;
* Watch this demo video: [https://www.loom.com/share/2216a2804642437a8c1457272f1951d1?sid=138232da-c11b-44dc-9b36-42dc8795ce90](https://www.loom.com/share/2216a2804642437a8c1457272f1951d1?sid=138232da-c11b-44dc-9b36-42dc8795ce90)
* 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.

\


