# Code Editor in the AI Studio > The AI Studio Code Editor in GHL Customer Care lets you edit and manage your project’s code without leaving the builder. - Source: https://docs.ghlcustomercare.com/docs/ai-employee/ai-studio/code-editor-in-the-ai-studio - Section: AI Employee / AI Studio - Reading time: 6 min - Images: 15, each explained below - Modified on Mon, 14 Sep at 8:44 AM --- The Code Editor in AI Studio gives you direct access to your project code without leaving the builder. You can edit files, search across your project, catch issues quickly, and review changes in real time from one workspace. This makes it easier to move from AI-generated output to manual refinement when you need more control over your project. **IMPORTANT**: AI Studio is available through **Labs**. Turn it on for your sub-account before using it.For more, refer to [Labs Features - Complete Overview](https://docs.ghlcustomercare.com/docs/agency-view/agency-settings/labs-features-complete-overview) --- --- **TABLE OF CONTENTS** - [What is the Code Editor in AI Studio?](#what-is-the-code-editor-in-ai-studio) - [Key Benefits of the Code Editor](#key-benefits-of-the-code-editor) - [Core Features of AI Studio Code Editor](#core-features-of-ai-studio-code-editor) - [Find & Replace](#find-and-replace) - [Global Project Search](#global-project-search) - [Instant Save & Live Preview](#instant-save-and-live-preview) - [Smart Error Detection](#smart-error-detection) - [Automatic Route Detection](#automatic-route-detection) - [Version History](#version-history) - [Unsaved Changes Protection](#unsaved-changes-protection) - [How to Use the Code Editor](#how-to-use-the-code-editor) - [Frequently Asked Questions](#frequently-asked-questions) - [Related Articles](#related-articles) --- ## **What is the Code Editor in AI Studio?** The AI Studio Code Editor is a built-in, CodeMirror‑powered coding environment inside the AI Studio builder. It lets you view, edit, and manage the code behind your AI-generated websites and web apps directly in GHL Customer Care, no external IDE or deploy step required! AI Studio generates a working project from your prompts (idea, URL, or reference design), and the Code Editor gives you precise control over TypeScript, JSX, CSS, JSON, and other files that power that experience. With the AI Studio Code Editor, you can iterate where you build: edit code, see instant updates in the live preview, and use AI to diagnose and fix errors as you go. ![What is the Code Editor in AI Studio? (image 1 of 15)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155069244414/original/kXx5ghVAJEdslDIL51SfyszTE62qT88bLw.jpeg) **What is the Code Editor in AI Studio? (image 1 of 15)** This screenshot appears in the "What is the Code Editor in AI Studio?" section of "Code Editor in the AI Studio". The text alongside this image reads: With the AI Studio Code Editor, you can iterate where you build: edit code, see instant updates in the live preview, and use AI to diagnose and fix errors as you go. Immediately after, the guide continues: Gain More Control: Make direct code-level updates when you need more precision than AI editing alone can provide. Make Granular Changes: Adjust specific text, styling, components, routes, or file behavior without reworking the entire…. - What this covers: With the AI Studio Code Editor, you can iterate where you build: edit code, see instant updates in the live preview, and use AI to diagnose and fix errors as you go. - Next: Gain More Control: Make direct code-level updates when you need more precision than AI editing alone can provide. Make Granular Changes: Adjust specific text, styling, components, routes, or file behavior without reworking the entire project. No Context Switching: Edit code directly in AI Studio without downloading files or leaving the platform. Fast Debugging: See errors as soon as they appear and use AI-powered “Try to fix” to generate suggested corrections. Safer Experimentation: Rely on built‑in version history to preview, bookmark, and roll back changes at any time. Smarter Navigation: Use Find & Replace and Global Project Search to jump instantly to the right file, line, or component. --- ## **Key Benefits of the Code Editor** - **Gain More Control**: Make direct code-level updates when you need more precision than AI editing alone can provide. - **Make Granular Changes**: Adjust specific text, styling, components, routes, or file behavior without reworking the entire project. - **No Context Switching:** Edit code directly in AI Studio without downloading files or leaving the platform. - **Fast Debugging:** See errors as soon as they appear and use AI-powered “Try to fix” to generate suggested corrections. - **Safer Experimentation:** Rely on built‑in version history to preview, bookmark, and roll back changes at any time. - **Smarter Navigation:** Use Find & Replace and Global Project Search to jump instantly to the right file, line, or component. --- ## **Core Features of AI Studio Code Editor** The Code Editor includes several built-in tools that make it easier to search project files, review changes, catch errors early, and manage updates with more confidence. Together, these features support a smoother editing experience for both quick fixes and more advanced code changes. ### **Find & Replace** Find & Replace helps you quickly locate and update text inside the current file using an editor-style search experience. This is especially useful when you need to rename components, update hardcoded copy, or refactor variable names consistently. With Find & Replace, you can: - Open Find & Replace with **Cmd/Ctrl + F** to search within the current file using a VS Code-style search experience. - Type your search term to highlight all matches in the file. - Use case-sensitive and whole-word options to avoid accidental partial matches. - Replace matches one-by-one or apply a bulk replace. ![Find & Replace (image 2 of 15)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155069155110/original/YzF2pYCCrDLG_SK1t1GPORBzb0RtjNbYrg.png) **Find & Replace (image 2 of 15)** This screenshot appears in the "Find & Replace" section of "Code Editor in the AI Studio". The text alongside this image reads: Open Find & Replace with Cmd/Ctrl + F to search within the current file using a VS Code-style search experience. Type your search term to highlight all matches in the file. Use case-sensitive and whole-word options to avoid accidental partial matches. Replace matches one-by-one or apply a bulk…. Immediately after, the guide continues: Global Project Search lets you search across your entire AI Studio project, not just the open file. This makes it easier to work across larger projects, reducing the time spent manually opening files. - Where to go: Open Find & Replace with Cmd/Ctrl + F to search within the current file using a VS Code-style search experience. Type your search term to highlight all matches in the file. Use case-sensitive and whole-word options to avoid accidental partial matches. Replace matches one-by-one or apply a bulk replace. - Controls: Cmd/Ctrl + F - Next: Global Project Search lets you search across your entire AI Studio project, not just the open file. This makes it easier to work across larger projects, reducing the time spent manually opening files. Full procedure: 1. Open Find & Replace with Cmd/Ctrl + F to search within the current file using a VS Code-style search experience. 2. Type your search term to highlight all matches in the file. 3. Use case-sensitive and whole-word options to avoid accidental partial matches. 4. Replace matches one-by-one or apply a bulk replace. ### **Global Project Search** Global Project Search lets you search across your entire AI Studio project, not just the open file. This makes it easier to work across larger projects, reducing the time spent manually opening files. Global Project Search gives you: - Project‑wide search results with each match grouped under its file. - Search results include unsaved changes in project files, so you can find matching content before saving your latest edits. - Highlighted matches so you can quickly scan relevant lines. - Line numbers for each result, making it easy to orient yourself in the file. - One‑click navigation to jump directly into the matching file and line in the Code Editor. ![Global Project Search (image 3 of 15)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155069155134/original/8jx3p1F16SVGzI6A-XMYJjHhzGdvend0TA.png) **Global Project Search (image 3 of 15)** This screenshot appears in the "Global Project Search" section of "Code Editor in the AI Studio". The text alongside this image reads: Project‑wide search results with each match grouped under its file. Search results include unsaved changes in project files, so you can find matching content before saving your latest edits. Highlighted matches so you can quickly scan relevant lines. Line numbers for each result, making it easy to…. Immediately after, the guide continues: Instant Save & Live Preview help you review changes quickly as you work. Instead of committing changes and waiting on a separate deploy step, you can update code and immediately see the effect in the builder’s preview. - What to click: Project‑wide search results with each match grouped under its file. Search results include unsaved changes in project files, so you can find matching content before saving your latest edits. Highlighted matches so you can quickly scan relevant lines. Line numbers for each result, making it easy to orient yourself in the file. One‑click navigation to jump directly into the matching file and line in the Code Editor. - Next: Instant Save & Live Preview help you review changes quickly as you work. Instead of committing changes and waiting on a separate deploy step, you can update code and immediately see the effect in the builder’s preview. Full procedure: 1. Project‑wide search results with each match grouped under its file. 2. Search results include unsaved changes in project files, so you can find matching content before saving your latest edits. 3. Highlighted matches so you can quickly scan relevant lines. 4. Line numbers for each result, making it easy to orient yourself in the file. 5. One‑click navigation to jump directly into the matching file and line in the Code Editor. ![Global Project Search (image 4 of 15)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155079921974/original/NrL0o618YJr2s98pylFR-GSX9o1GE_1qig.png) **Global Project Search (image 4 of 15)** This screenshot appears in the "Global Project Search" section of "Code Editor in the AI Studio". The text alongside this image reads: Project‑wide search results with each match grouped under its file. Search results include unsaved changes in project files, so you can find matching content before saving your latest edits. Highlighted matches so you can quickly scan relevant lines. Line numbers for each result, making it easy to…. Immediately after, the guide continues: Instant Save & Live Preview help you review changes quickly as you work. Instead of committing changes and waiting on a separate deploy step, you can update code and immediately see the effect in the builder’s preview. - What to click: Project‑wide search results with each match grouped under its file. Search results include unsaved changes in project files, so you can find matching content before saving your latest edits. Highlighted matches so you can quickly scan relevant lines. Line numbers for each result, making it easy to orient yourself in the file. One‑click navigation to jump directly into the matching file and line in the Code Editor. - Next: Instant Save & Live Preview help you review changes quickly as you work. Instead of committing changes and waiting on a separate deploy step, you can update code and immediately see the effect in the builder’s preview. Full procedure: 1. Project‑wide search results with each match grouped under its file. 2. Search results include unsaved changes in project files, so you can find matching content before saving your latest edits. 3. Highlighted matches so you can quickly scan relevant lines. 4. Line numbers for each result, making it easy to orient yourself in the file. 5. One‑click navigation to jump directly into the matching file and line in the Code Editor. ### **Instant Save & Live Preview** Instant Save & Live Preview help you review changes quickly as you work. Instead of committing changes and waiting on a separate deploy step, you can update code and immediately see the effect in the builder’s preview. Just click the **Save** button in the builder and the live preview updates in seconds. ![Instant Save & Live Preview (image 5 of 15)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155069244525/original/sQhSl1TN8X1ayqif66HIoLUYiPqfVz9INA.jpeg) **Instant Save & Live Preview (image 5 of 15)** This screenshot appears in the "Instant Save & Live Preview" section of "Code Editor in the AI Studio". The text alongside this image reads: Just click the Save button in the builder and the live preview updates in seconds. Immediately after, the guide continues: Smart Error Detection helps you catch build and preview startup issues while working in the Code Editor. If a project change prevents the preview from starting successfully, AI Studio surfaces the build error in chat so you can review the…. - How to confirm: Just click the Save button in the builder and the live preview updates in seconds. - Controls: Save - Next: Smart Error Detection helps you catch build and preview startup issues while working in the Code Editor. If a project change prevents the preview from starting successfully, AI Studio surfaces the build error in chat so you can review the issue and use **Try to fix** to attempt a correction. ### **Smart Error Detection** Smart Error Detection helps you catch build and preview startup issues while working in the Code Editor. If a project change prevents the preview from starting successfully, AI Studio surfaces the build error in chat so you can review the issue and use **\*\*Try to fix\*\*** to attempt a correction. How to use Smart Error Detection: 1. **Review the Build Error and Start the AI Fix ** If a code change causes the build or live preview to fail, a \*\*Build unsuccessful\*\* message appears in the chat. Click \*\*Details\*\* to review the error, then click \*\*Try to fix\*\* to have AI analyze the issue and attempt a correction. ![Step 1 of 2: Review the Build Error and Start the AI Fix If a code change causes…](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155069245598/original/sZh2bMgMFY9pzMsYIe23CI5qmxQQpSAWmw.jpeg) **Step 1 of 2: Review the Build Error and Start the AI Fix If a code change causes…** This screenshot accompanies step 1 of 2 in the "Smart Error Detection" section of "Code Editor in the AI Studio". At this point in the walkthrough you review the Build Error and Start the AI Fix If a code change causes the build or live preview to fail, a **Build unsuccessful** message appears in the chat. Click **Details** to review the error, then click **Try to fix** to have AI analyze the issue and attempt a correction. The next step is to review the AI Fix and Rebuilt Preview AI analyzes the error, updates the project files, and posts a follow-up message explaining the fix. After a successful fix, AI Studio automatically rebuilds the preview using the updated project files. Review the refreshed preview to confirm that the issue is resolved. - What to click: Review the Build Error and Start the AI Fix If a code change causes the build or live preview to fail, a **Build unsuccessful** message appears in the chat. Click **Details** to review the error, then click **Try to fix** to have AI analyze the issue and attempt a correction. - Controls: **Try to fix**, Review the AI Fix and Rebuilt Preview - Next: Review the AI Fix and Rebuilt Preview AI analyzes the error, updates the project files, and posts a follow-up message explaining the fix. After a successful fix, AI Studio automatically rebuilds the preview using the updated project files. Review the refreshed preview to confirm that the issue is resolved. Full procedure: 1. Review the Build Error and Start the AI Fix If a code change causes the build or live preview to fail, a **Build unsuccessful** message appears in the chat. Click **Details** to review the error, then click **Try to fix** to have AI analyze the issue and attempt a correction. <- this image 2. Review the AI Fix and Rebuilt Preview AI analyzes the error, updates the project files, and posts a follow-up message explaining the fix. After a successful fix, AI Studio automatically rebuilds the preview using the updated project files. Review the refreshed preview to confirm that the issue is resolved. ![Step 1 of 2: Review the Build Error and Start the AI Fix If a code change causes…](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155080877713/original/Qt7pTyeDYCWUQy-ASD_34dkgGoFk5IMlpA.png) **Step 1 of 2: Review the Build Error and Start the AI Fix If a code change causes…** This screenshot accompanies step 1 of 2 in the "Smart Error Detection" section of "Code Editor in the AI Studio". At this point in the walkthrough you review the Build Error and Start the AI Fix If a code change causes the build or live preview to fail, a **Build unsuccessful** message appears in the chat. Click **Details** to review the error, then click **Try to fix** to have AI analyze the issue and attempt a correction. The next step is to review the AI Fix and Rebuilt Preview AI analyzes the error, updates the project files, and posts a follow-up message explaining the fix. After a successful fix, AI Studio automatically rebuilds the preview using the updated project files. Review the refreshed preview to confirm that the issue is resolved. - What to click: Review the Build Error and Start the AI Fix If a code change causes the build or live preview to fail, a **Build unsuccessful** message appears in the chat. Click **Details** to review the error, then click **Try to fix** to have AI analyze the issue and attempt a correction. - Controls: **Try to fix**, Review the AI Fix and Rebuilt Preview - Next: Review the AI Fix and Rebuilt Preview AI analyzes the error, updates the project files, and posts a follow-up message explaining the fix. After a successful fix, AI Studio automatically rebuilds the preview using the updated project files. Review the refreshed preview to confirm that the issue is resolved. Full procedure: 1. Review the Build Error and Start the AI Fix If a code change causes the build or live preview to fail, a **Build unsuccessful** message appears in the chat. Click **Details** to review the error, then click **Try to fix** to have AI analyze the issue and attempt a correction. <- this image 2. Review the AI Fix and Rebuilt Preview AI analyzes the error, updates the project files, and posts a follow-up message explaining the fix. After a successful fix, AI Studio automatically rebuilds the preview using the updated project files. Review the refreshed preview to confirm that the issue is resolved. 2. **Review the AI Fix and Rebuilt Preview** AI analyzes the error, updates the project files, and posts a follow-up message explaining the fix. After a successful fix, AI Studio automatically rebuilds the preview using the updated project files. Review the refreshed preview to confirm that the issue is resolved. ![Step 2 of 2: Review the AI Fix and Rebuilt Preview AI analyzes the error, updates…](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155069245620/original/D7Abi3hNI3NozNG0ZHB5E4KrVHwW2YOByw.jpeg) **Step 2 of 2: Review the AI Fix and Rebuilt Preview AI analyzes the error, updates…** This screenshot accompanies step 2 of 2 in the "Smart Error Detection" section of "Code Editor in the AI Studio". At this point in the walkthrough you review the AI Fix and Rebuilt Preview AI analyzes the error, updates the project files, and posts a follow-up message explaining the fix. After a successful fix, AI Studio automatically rebuilds the preview using the updated project files. Review the refreshed preview to confirm that the issue is resolved. - How to confirm: Review the AI Fix and Rebuilt Preview AI analyzes the error, updates the project files, and posts a follow-up message explaining the fix. After a successful fix, AI Studio automatically rebuilds the preview using the updated project files. Review the refreshed preview to confirm that the issue is resolved. - Controls: Review the AI Fix and Rebuilt Preview, **Try to fix** Full procedure: 1. Review the Build Error and Start the AI Fix If a code change causes the build or live preview to fail, a **Build unsuccessful** message appears in the chat. Click **Details** to review the error, then click **Try to fix** to have AI analyze the issue and attempt a correction. 2. Review the AI Fix and Rebuilt Preview AI analyzes the error, updates the project files, and posts a follow-up message explaining the fix. After a successful fix, AI Studio automatically rebuilds the preview using the updated project files. Review the refreshed preview to confirm that the issue is resolved. <- this image ### **Automatic Route Detection** Automatic Route Detection helps keep your project structure organized when you add new routes in code. This reduces manual follow-up work and makes it easier to manage navigation inside the project. When a new route is created in code, it appears automatically in the route selector. ### **Version History** Version history gives you a safer editing workflow by preserving prior states of your project. This makes it easier to review changes, compare updates and recover from mistakes without starting over. Every time you save your code, a new version is created. To access Version History, click the **Clock** icon in the top of the builder. ![Version History (image 9 of 15)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155069232991/original/85ABgYZVaAnnGsNjO4wHQg9bNTQSNoyAsg.png) **Version History (image 9 of 15)** This screenshot appears in the "Version History" section of "Code Editor in the AI Studio". The text alongside this image reads: To access Version History, click the Clock icon in the top of the builder. Immediately after, the guide continues: AI Studio warns you before you leave with unsaved code changes, helping prevent lost work. If you attempt to leave with unsaved code changes, a warning pops up so you can save your work before exiting. - What to click: To access Version History, click the Clock icon in the top of the builder. - Controls: Clock - Next: AI Studio warns you before you leave with unsaved code changes, helping prevent lost work. If you attempt to leave with unsaved code changes, a warning pops up so you can save your work before exiting. ### **Unsaved Changes Protection** AI Studio warns you before you leave with unsaved code changes, helping prevent lost work. If you attempt to leave with unsaved code changes, a warning pops up so you can save your work before exiting.  ![Unsaved Changes Protection (image 10 of 15)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155069155186/original/1iZJJiswl1Eo2QPR4FntitUrOJvtHCM0tw.png) **Unsaved Changes Protection (image 10 of 15)** This screenshot appears in the "Unsaved Changes Protection" section of "Code Editor in the AI Studio". The text alongside this image reads: AI Studio warns you before you leave with unsaved code changes, helping prevent lost work. If you attempt to leave with unsaved code changes, a warning pops up so you can save your work before exiting. Immediately after, the guide continues: Using the AI Studio Code Editor starts with an AI-generated project and gives you more control over how that project looks and behaves. Once your project is created, you can open the Code area to make direct updates, review them in…. - How to confirm: AI Studio warns you before you leave with unsaved code changes, helping prevent lost work. If you attempt to leave with unsaved code changes, a warning pops up so you can save your work before exiting. - Next: Using the AI Studio Code Editor starts with an AI-generated project and gives you more control over how that project looks and behaves. Once your project is created, you can open the Code area to make direct updates, review them in preview, and publish when everything is ready. --- ## **How to Use the Code Editor** Using the AI Studio Code Editor starts with an AI-generated project and gives you more control over how that project looks and behaves. Once your project is created, you can open the Code area to make direct updates, review them in preview, and publish when everything is ready. Follow these steps to get started with the Code Editor: #### **Step 1:** Open the Code Editor Open the AI Studio project you want to update. In the project workspace, click **Code** to access the Code Editor. ![Step 1: Open the Code Editor (image 11 of 15)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155069245850/original/aONKKuT8FuJSJGUDd5emU_x3S6VkHHmGlw.jpeg) **Step 1: Open the Code Editor (image 11 of 15)** This screenshot appears in the "Step 1: Open the Code Editor" section of "Code Editor in the AI Studio". The text alongside this image reads: Open the AI Studio project you want to update. In the project workspace, click Code to access the Code Editor. Immediately after, the guide continues: Open the file you want to edit from the file tree, then make your code changes directly in the editor. Use Find & Replace or Global Project Search if you need help locating the right content or file. - Where to go: Open the AI Studio project you want to update. In the project workspace, click Code to access the Code Editor. - Controls: Code - Next: Open the file you want to edit from the file tree, then make your code changes directly in the editor. Use Find & Replace or Global Project Search if you need help locating the right content or file. #### **Step 2:** Select the file and update the code Open the file you want to edit from the file tree, then make your code changes directly in the editor. Use **Find & Replace** or **Global Project Search** if you need help locating the right content or file. ![Step 2: Select the file and update the code (image 12 of 15)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155069245929/original/s6l_cdmVjN1HH-qyIWFb7wEVsQWCYCaXXQ.jpeg) **Step 2: Select the file and update the code (image 12 of 15)** This screenshot appears in the "Step 2: Select the file and update the code" section of "Code Editor in the AI Studio". The text alongside this image reads: Open the file you want to edit from the file tree, then make your code changes directly in the editor. Use Find & Replace or Global Project Search if you need help locating the right content or file. Immediately after, the guide continues: Click Save to apply your updates and refresh the latest preview. - Where to go: Open the file you want to edit from the file tree, then make your code changes directly in the editor. Use Find & Replace or Global Project Search if you need help locating the right content or file. - Controls: Find & Replace, Global Project Search - Next: Click Save to apply your updates and refresh the latest preview. #### **Step 3:** Save your changes Click **Save** to apply your updates and refresh the latest preview. ![Step 3: Save your changes (image 13 of 15)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155069245951/original/sA-rZ8LWNLqZTLL9lR6t3ga5mB4WtiosWg.jpeg) **Step 3: Save your changes (image 13 of 15)** This screenshot appears in the "Step 3: Save your changes" section of "Code Editor in the AI Studio". The text alongside this image reads: Click Save to apply your updates and refresh the latest preview. Immediately after, the guide continues: Check the preview to confirm that the content, layout, and functionality appear as expected. - How to confirm: Click Save to apply your updates and refresh the latest preview. - Controls: Save - Next: Check the preview to confirm that the content, layout, and functionality appear as expected. #### **Step 4:** Review the preview & fix any errors Check the preview to confirm that the content, layout, and functionality appear as expected. If a build error appears after saving, click **Details** to review the issue, then click **Try to fix** to let AI attempt a correction.  After AI successfully fixes the issue, AI Studio automatically rebuilds the preview with the updated project files so you can review the result. ![Step 4: Review the preview & fix any errors (image 14 of 15)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155069245974/original/sB3zbuetxMS-OLBc28ujFADehYHy-QbtLQ.jpeg) **Step 4: Review the preview & fix any errors (image 14 of 15)** This screenshot appears in the "Step 4: Review the preview & fix any errors" section of "Code Editor in the AI Studio". The text alongside this image reads: After AI successfully fixes the issue, AI Studio automatically rebuilds the preview with the updated project files so you can review the result. Immediately after, the guide continues: Once your changes look correct and your project is ready, publish the project to make the updates live. - What this covers: After AI successfully fixes the issue, AI Studio automatically rebuilds the preview with the updated project files so you can review the result. - Controls: Details, Try to fix - Next: Once your changes look correct and your project is ready, publish the project to make the updates live. #### **Step 5:** Publish your project Once your changes look correct and your project is ready, publish the project to make the updates live. For more information, see [Publishing an AI Studio Project](https://docs.ghlcustomercare.com/docs/ai-employee/ai-studio/ai-studio-in-ghl-customer-care) ![Step 5: Publish your project (image 15 of 15)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155069246094/original/5v01VBaFlFmXZAbsxIs6YDhwvMvonL6k4Q.jpeg) **Step 5: Publish your project (image 15 of 15)** This screenshot appears in the "Step 5: Publish your project" section of "Code Editor in the AI Studio". The text alongside this image reads: For more information, see Publishing an AI Studio Project. Immediately after, the guide continues: Q: Do I have to use the Code Editor to benefit from AI Studio? - What this covers: For more information, see Publishing an AI Studio Project - Next: Q: Do I have to use the Code Editor to benefit from AI Studio? --- ## **Frequently Asked Questions** **Q: Do I have to use the Code Editor to benefit from AI Studio?** No. AI Studio can generate complete pages and flows from your prompts without any manual coding. The Code Editor is for users who want deeper control over layout, styling, logic, or integrations beyond what the chat and visual builder provide. **Q: Which languages and file types does the AI Studio Code Editor support?** The Code Editor is CodeMirror-powered and supports editing TypeScript, JSX, CSS, JSON, and other text-based project files used inside AI Studio. **Q: Does the Code Editor auto-save my work?** Changes to your code are saved when you click **Save**. AI Studio will warn you before leaving with unsaved code changes, helping reduce the risk of losing work. **Q: Do edits in the Code Editor immediately affect my live, public site?** No. Saving updates the live preview but your public site depends on publishing the AI Studio project. Review the preview first, then publish when you are ready for the changes to go live. --- ## **Related Articles** - [AI Studio in GHL Customer Care](https://docs.ghlcustomercare.com/docs/ai-employee/ai-studio/ai-studio-in-ghl-customer-care) - [Connect Forms and Calendars in AI Studio](https://docs.ghlcustomercare.com/docs/ai-employee/ai-studio/connect-forms-and-calendars-in-ai-studio) - [AI Product Pricing](https://docs.ghlcustomercare.com/docs/ai-employee/ai-employee/ai-product-pricing) - [Advanced SEO Support in AI Studio](https://docs.ghlcustomercare.com/docs/ai-employee/ai-studio/advanced-seo-support-in-ai-studio) --- Documentation for GHL Customer Care. Support: support@ghlcustomercare.com