VibeFront Help

User guide for the AI-powered HTML editor

VibeFront is an AI-powered desktop HTML editor for Windows. It combines a code editor (AvalonEdit) with a live preview (WebView2), plus AI-powered HTML generation, proofreading, translation, and optimization.

Quick Start

Launch the app
After installing from the Microsoft Store, launch "VibeFront" from the Start menu. No account signup required.
Configure AI (recommended)
Go to AI → AI Settings and configure your preferred AI provider and API key. If you're new, we recommend Google Gemini (free).
Edit HTML
Write code and check the live preview. You can also ask AI to "create a contact form" for you.

AI Overview

VibeFront's AI features support 4 AI providers. Just configure one provider of your choice, and all AI features (HTML generation, templates, proofreading, translation, optimization, image-to-HTML) become available.

About API Keys
Your API key is stored only on your local PC (%LOCALAPPDATA%\VibeFront\ai_settings.json) and is never sent externally. It is only used when you actively use AI features, communicating directly with your chosen provider.

Recommended AI Models

Here are the recommended AI models for HTML editing with VibeFront.

Provider	Recommended Model	Strengths	Cost
Google Gemini	gemini-3.8-flash	VibeFront default. Fast, high quality, vision capable. Best place to start	Free tier
Google Gemini	gemini-3.1-pro-preview	Top performance (preview)	Paid tier only
OpenAI	gpt-6.1-sol	VibeFront default. Well-balanced, vision capable	Pay-per-use
OpenAI	gpt-6-luna	Fast, lowest cost	Pay-per-use
Anthropic	claude-opus-5-5	VibeFront default. Top performance, excellent at code generation	Pay-per-use
Anthropic	claude-sonnet-5-5	Fast, balanced, great at code generation	Pay-per-use
Ollama	qwen3:8b	Local, free, high quality	Free
Ollama	llama3.1:8b	Local, general purpose	Free
LM Studio	Qwen3-8B-GGUF	GUI-based, beginner-friendly	Free

AI Settings also offers GPT-6 Astra (most capable, higher cost), Claude Haiku 4.5 (ultra fast, low cost), and Gemini 3.5 Flash Lite (low cost, stable).

Recommendation for beginners
Google Gemini is the best choice to start. The free API key is easy to obtain, quality is high, and it supports image-to-HTML conversion. If privacy is a priority, Ollama (local LLM) is recommended.

Google Gemini Recommended

Google Gemini lets you use VibeFront's default model, Gemini 3.8 Flash, on its free tier, making it perfect for those new to AI.

How to get an API key

Go to Google AI Studio and sign in with your Google account.
Click "Get API key" in the left menu, then click the "Create API key" button.
Copy the displayed API key (a string starting with AIza...).
In VibeFront, go to AI → AI Settings, select "Google Gemini", paste the API key, and click "Save".

About the free tier
Gemini 3.8 Flash is available on the free tier. Request limits (per minute and per day) are set by Google and can change, so check the current values in Google AI Studio. Note that Gemini 3.1 Pro (Preview) is not included in the free tier (paid tier only).

OpenAI (ChatGPT)

OpenAI's GPT series is the most widely used AI model. It's paid, but produces high-quality HTML.

How to get an API key

Go to OpenAI Platform and create an account or sign in.
Go to the API keys page and click "Create new secret key".
Copy the displayed key (sk-...). This key won't be shown again, so save it somewhere safe.
In VibeFront's AI Settings, select "OpenAI", paste the key, and save.

About pricing
OpenAI API is pay-per-use. You'll need to add ~$5-$10 in credits to start. Selecting GPT-6 Luna (gpt-6-luna) in AI Settings is very affordable — typical HTML editing usage costs less than $1/month.

About organization verification
If your OpenAI organization is not verified, some models do not allow streamed (word-by-word) responses. VibeFront v1.3.0 then automatically switches to showing the whole response at once (it appears after generation finishes, so it takes a little longer). You can verify your organization in the OpenAI Platform organization settings.

Anthropic (Claude)

Anthropic's Claude excels particularly at code generation.

How to get an API key

Go to Anthropic Console and create an account.
Create a new key on the API Keys page and copy it.
In VibeFront's AI Settings, select "Anthropic (Claude)", paste the key, and save.

About pricing
The Anthropic API is pay-per-use. The default, Claude Opus 5.5, is the most capable model. To reduce costs, choose Claude Sonnet 5.5 or Claude Haiku 4.5 in AI Settings. Since v1.3.0, prompt caching is supported: when you send follow-up messages in the same conversation (within 5 minutes), the resent earlier conversation is billed at a lower rate (very short conversations are not cached).

Ollama (Local LLM) Free & Offline

Ollama lets you run AI models directly on your PC. No internet connection needed, and your data never leaves your machine. No API key required.

System requirements
8B parameter models (recommended): 8GB+ RAM. Much faster with a GPU. Works on CPU-only laptops too (slightly slower).

How to set up Ollama

Install Ollama
Download the Windows version from ollama.com/download and install it. Just follow the installer prompts.
Download an AI model
Open Command Prompt (or PowerShell) and run the following command:

ollama pull qwen3:8b

The first time will download several GB (Wi-Fi recommended). After download, you can use it completely offline.
Start Ollama
Ollama usually starts automatically after installation (you'll see its icon in the system tray). If not running, launch "Ollama" from the Start menu.
Configure in VibeFront
In VibeFront's AI → AI Settings, configure as follows:

Provider OpenAI Compatible

Base URL http://localhost:11434

Model ID qwen3:8b

API Key Leave empty
Test connection
Click the "Test Connection" button. If you see "Connection successful!", you're all set.

Recommended Ollama models

qwen3:8b Recommended

By Alibaba. Excellent at HTML/CSS code generation. High quality despite 8B size. Supports Japanese.

ollama pull qwen3:8b

llama3.1:8b

General-purpose model by Meta. Stable quality with multilingual support.

ollama pull llama3.1:8b

codellama:13b

Code-specialized model. Great at HTML code generation. Recommended if you have enough RAM (16GB+).

ollama pull codellama:13b

phi3:3.8b

Ultra-lightweight by Microsoft. Runs even on low-RAM PCs. Quality is lower than 8B models, but fast.

ollama pull phi3:3.8b

LM Studio (Local LLM) GUI, beginner-friendly

LM Studio is an app that lets you easily manage and run local LLMs with a graphical interface. Especially recommended if you're not comfortable with command-line tools.

How to set up LM Studio

Install LM Studio
Download from lmstudio.ai and install.
Download a model
Launch LM Studio and type "Qwen3 8B" in the search bar. Click the download button on a GGUF model. "Q4_K_M" is a good balanced choice.
Start the server
Click the "Local Server" tab → Select your downloaded model → Click "Start Server". You should see http://127.0.0.1:1234 displayed.
Configure in VibeFront
In VibeFront's AI Settings, configure as follows:

Provider OpenAI Compatible

Base URL http://localhost:1234

Model ID (Model name shown in LM Studio)

API Key Leave empty
Verify with connection test
Click "Test Connection" to verify. If successful, you're done!

Ollama vs LM Studio
Ollama: Command-line based. Lightweight and ideal for background operation. Better for technical users.
LM Studio: GUI-based. Model search, download, and startup all from a visual interface. Better for beginners.
Both are free, and the VibeFront configuration is nearly identical.

View Modes

VibeFront has 3 view modes. Switch between them using toolbar buttons or the View menu.

Split View (Default)

Code editor and preview side by side. Changes are reflected in real-time.

Code View

Code editor only. For when you want to focus on code.

Preview

Preview only. For checking the visual result. Select text in preview to jump to the corresponding source code.

Panels can be freely docked, floated, and rearranged using AvalonDock. Layout is saved automatically.

Emmet Expansion

Type Emmet abbreviations and press Tab to auto-expand into HTML.

Input	Expands to
`div`	`<div></div>`
`div.container`	`<div class="container"></div>`
`ul>li*3`	`<ul><li></li><li></li><li></li></ul>`
`nav>ul>li*5>a`	Navigation structure
`div#app>header+main+footer`	Page skeleton
`table>tr3>td4`	3-row, 4-column table
`input[type=email]`	`<input type="email">`
`p{Hello World}`	`<p>Hello World</p>`

Preview Sync

Select text in the preview to automatically jump to and highlight the corresponding code in the editor. Instantly answer "which code produces this text?"

Use responsive preview to instantly check mobile (375px), tablet (768px), and desktop (1200px) views. Switch via View menu → Responsive Preview.

Encoding

VibeFront supports the following encodings. Encoding is automatically detected when opening files.

UTF-8 / UTF-8 BOM — Standard for new HTML files
Shift-JIS — Japanese legacy HTML
EUC-JP — Japanese legacy HTML (Unix-based)
UTF-16 LE / BE — Windows text files

The current encoding is shown in the status bar. Click it to open the encoding change menu.

Keyboard Shortcuts

Action	Shortcut
New file	`Ctrl`+`N`
Open	`Ctrl`+`O`
Save	`Ctrl`+`S`
Save As	`Ctrl`+`Shift`+`S`
Undo	`Ctrl`+`Z`
Redo	`Ctrl`+`Y`
Bold	`Ctrl`+`B`
Italic	`Ctrl`+`I`
Underline	`Ctrl`+`U`
Find & Replace	`Ctrl`+`H`
AI Assistant	`Ctrl`+`Shift`+`A`
Emmet expand	`Tab`

FAQ

Q: Is the AI feature required?

No. Without AI configuration, you can still use all standard HTML editor features (code editing, preview, Emmet, themes, encoding support, etc.).

Q: Are AI API costs included in VibeFront's price?

No. AI provider API costs are separate. However, Google Gemini offers a free tier for Gemini 3.8 Flash, and local LLMs (Ollama/LM Studio) are completely free.

Q: Can I use image-to-HTML with local LLMs?

Most local LLMs don't support image recognition, so we recommend Google Gemini, OpenAI, or Anthropic for image-to-HTML conversion.

Q: Is my data sent externally?

Only when using AI features is your input text sent to your chosen AI provider. No other data (settings, file contents, etc.) is ever sent externally. With local LLMs, even AI usage keeps everything on your machine.

Q: Where are settings stored?

Stored in %LOCALAPPDATA%\VibeFront\. Paste this into Windows Explorer's address bar to open it.

Q: I see "The response was cut off because it reached the output limit"

The AI reached the maximum amount it can output at once, so the response is incomplete. Send "continue" in the chat to generate the rest, or split your request into smaller parts (for example, one section at a time instead of the whole page).

Q: The AI model I used before is no longer in the list

v1.3.0 updated the model list to each provider's latest models. If you had selected a retired or restricted model (such as GPT-4o or Gemini 2.0 Flash / 2.5), VibeFront automatically switches to its successor in the same price range. You can change the model in AI Settings at any time.

Q: I see "The AI declined to respond for safety reasons"

This appears when the AI provider's safety system declines the request. If it appears for an ordinary web design request, please rephrase your request and try again.

Q: What happens when the trial period ends? (download edition)

The download edition can be tried for 15 days. After the trial ends, you can still edit and preview HTML, but saving files and AI features require a license. The Microsoft Store edition has no such limitation.

Support

Bug Reports & Feature Requests

Report via support@mojosoft.biz. Both Japanese and English are welcome.

Contact

Email: support@mojosoft.biz

Web: https://mojosoft.biz/

X (Twitter): @mojosoft_biz

Provider	OpenAI Compatible
Base URL	`http://localhost:11434`
Model ID	`qwen3:8b`
API Key	Leave empty