Use AI chat inside your front-end editor.

What is CodVerter AI Chat?

CodVerter AI Chat is a coding assistant built directly into the AI Web Editor. You can ask it to build new HTML, CSS and JavaScript, fix bugs, improve design, explain code, answer programming questions, and continue work already inside your editor.

The important difference is context. Instead of copying code into a separate chat window, CodVerter can work with your editor code and your project workflow.

Getting started with AI Chat

1. Open the AI Web Editor.
2. Click the AI Chat icon in the left side rail.
3. Write what you want to build, fix, explain, or improve.
4. Choose the right Code Context before sending.
5. Review the answer and apply changes when you are ready.

Choosing what code the AI should read

Code Context controls which code is sent together with your prompt. This is one of the most important settings in CodVerter AI Chat.

Prompt examples that work well

Build something new

Improve the current editor code

Fix bugs

Ask a general programming question

Applying AI changes safely

When CodVerter returns code or safe targeted fixes, you can review the answer before applying it. For editor updates, the AI currently works mainly with the core editor files: index.html, styles.css, and scripts.js.

• Use Apply changes to editor and files when you want to update the project from the AI answer.
• Use Undo last editor replace if a replacement did not produce the result you wanted.
• For bug checks, CodVerter may suggest small, focused fixes rather than rewriting the whole project.
• Large redesigns and structural changes are usually returned as code to review, not as tiny automatic patches.

Working with Project Files

Project Files help you organize real front-end work instead of keeping everything in one temporary snippet. The main editor files are index.html, styles.css, and scripts.js.

Available file areas

• Html - extra HTML pages.
• Scripts - JavaScript files.
• Styles - CSS files.
• Other - text based files such as JSON, XML, CSV and TXT.
• Images - uploaded image assets.
• Common - common helper files.

Multi-page convention

Keep shared layout and styling in styles.css and shared logic in scripts.js. For pages inside the Html folder, reference shared files with relative paths:

This makes your project behave more like a normal website when you preview it or download it later.

Uploading and using images

You can upload images into the project and use them inside your HTML and CSS. You can also drag or paste an image into the AI Chat when you want the AI to analyze it or generate related code.

• Open Project Files and use the Images folder.
• Drag and drop image files into the file tree when supported.
• Use image properties to copy the asset URL or inspect image details.
• Drag an image file from Project Files into the HTML editor to insert a ready-to-use tag.

Saving and sharing your project

CodVerter supports local saving and cloud saving. Cloud saving lets you continue your project later and share a view-only link with other people.

• Save Locally - download or save the project locally.
• Save to Cloud & Share - save the project and create a shareable link.
• Save Changes to Cloud - update an existing saved project.
• Copy view link - copy a link that other people can open in their browser.

Sharing a project with someone else

After your project is saved to the cloud, CodVerter shows a Copy view link button near the project name at the top of the editor.

1. Save the project to the cloud.
2. Click Copy view link near the project name.
3. Send the copied link to another person by email, chat, or any other channel.
4. The person who opens the link can view the project and its output.

Publishing: Public Work vs Web App

Changing layout and preview

The editor includes HTML, CSS and JavaScript tabs with a live preview panel. You can change the workspace layout depending on what you are doing.

• Horizontal View - default split view.
• Vertical View - editor and output stacked vertically.
• Editor Only - focus on code.
• Output Only - focus on preview.
• Reset Window Layout - restore the layout.
• Run in a New Tab - open the result separately.
• Refresh - refresh the live preview.

Editing and formatting code

CodVerter includes editor tools for common coding tasks.

• Undo and Redo.
• Compress Code.
• Beautify Code.
• Insert Lorem Ipsum text.
• Copy to Clipboard.
• Clear selected editors.
• Comment or uncomment selected code.
• Adjust editor font size from the bottom bar.

Searching and replacing code

Use Search Editor or Ctrl+F to find and replace text in the active editor.

• Switch between Find and Replace.
• Use case-sensitive search.
• Match whole words only.
• Move between previous and next matches.
• Use Replace or Replace all.
• Reuse search history when available.

Using the HTML Elements Toolbox

The toolbox helps you insert common HTML elements faster. You can browse by category, search, double-click an item, or drag it into the editor.

• Text content.
• Inline text semantics.
• Table content.
• Forms.
• Content sectioning.
• Image and multimedia.
• Document metadata.
• Scripting.
• Embedded content.

Testing responsive layouts with the Output Calibrator

The Output Calibrator helps you test how the preview behaves at different sizes and common device dimensions.

• Set output width and height in pixels.
• Set output size in inches.
• Choose common devices.
• Filter devices or sort them by manufacturer or alphabetically.
• Use advanced settings such as pixels per inch and device ratio.

Models, usage, and prepaid wallet

CodVerter can use different AI models depending on availability, limits and your account. The chat shows usage indicators so you can understand your current AI budget and prepaid wallet status.

Prepaid wallet

Prepaid credit lets you keep using AI without committing to a monthly subscription. It is useful when you want flexible AI usage for coding sessions, experiments, or occasional project work.

Usage indicators

• Main AI budget indicator.
• Prepaid wallet indicator when wallet credit is available.
• Free call limit indicator for free usage.
• Detailed usage view when you click the usage indicators.

AI Chat settings

The chat settings help you control how the AI works with your editor.

• Language - choose the preferred AI response language when available.
• Code Context - choose what code is sent with your prompt.
• Auto-injection - control whether AI code can be inserted automatically when applicable.
• Prompt font size - adjust the input size.
• Enter to send - choose how Enter behaves.
• Single-file solution - request a simpler response focused on index.html, styles.css and scripts.js.
• Search chat - search inside the conversation.
• Clear chat - clear the current chat when needed.