Pipeline Types & Core Concepts
- Pipeline: Website | Frontend: React + Vite | Backend: - | Beschreibung: Statische Website - Pipeline: Responsive Web App | Frontend: React + Vite | Backend: FastAPI | Beschreibung: Fullstack Anwend
Project Types
XAIO supports different project types depending on what you want to build:
- Website — Static sites, landing pages, portfolios. Frontend only (React + Vite). Free plan.
- Web App — Full-stack applications with backend and database. Frontend (React + Vite) + Backend (FastAPI). Requires Web App Builder plan.
- Agent Flow — AI-powered automation workflows. Define agents, triggers, and actions. Requires Agent Flow plan.
How XAIO Works
1. Describe your idea — Type a prompt describing what you want to build. Be specific about design, features, and content.
2. AI generates a plan — XAIO analyzes your request and creates a structured plan. Review and confirm before generation starts.
3. Code generation — The AI agent writes your code file by file. You see a live preview updating in real-time as files are created.
4. Iterate with chat — After generation, use the chat to make changes. The AI understands your entire project context and makes targeted edits.
5. Publish — Deploy your project to *.xaio.app with a single click.
AI Chat
The AI chat is the primary way to interact with XAIO. You can:
- Describe new features or pages
- Ask for design changes (colors, layout, fonts)
- Upload images or documents as reference
- Ask the AI to generate custom images
- Debug issues by describing the problem
- Ask the AI to analyze existing code or images
Smart Model Routing
XAIO automatically routes your requests to the best AI model:
- Simple tasks (text changes, colors, CSS) — Fast, cost-efficient model
- Complex tasks (multi-file features, APIs, debugging) — Most capable model with extended thinking
This happens automatically — you don't need to configure anything. It saves significant AI Tasks on routine edits.
Project Type Conversion
You can convert a Website to a Web App (and back) directly in Project Settings. When upgrading to Web App, XAIO automatically initializes the backend. When downgrading, the backend is archived (not deleted) and can be restored later.
XAIO.md — Project Knowledge
Every project has a XAIO.md file that stores the design system, conventions, and important decisions. The AI creates it automatically after the first code generation and updates it when you make significant changes. XAIO.md persists across all chats — every new conversation respects the same design decisions.
You can view XAIO.md in the Files tab (XAIO.md sub-tab) or in Project Settings. To change it, ask the AI in the chat, e.g. "Update XAIO.md: switch primary color to #1e40af".
Live Preview
Every project has a live preview that updates in real-time as you or the AI make changes. The preview runs in an isolated workspace container with its own development server.
Design Mode
Click on any element in the preview to select it. XAIO shows you the source file and line number. You can then ask the AI to modify that specific element.
Publishing
Publish your project to yourname.xaio.app with one click. Web Apps include a managed backend and optional PostgreSQL database. Published sites get automatic HTTPS.
Media Library
Every project has a media library for images, videos, and other assets. You can:
- Upload files from your computer
- Use AI-generated images (marked with a "Generated" badge)
- Download assets
- Reference assets in your code
Integrations
- GitHub — Connect your repo for version control, branching, and pull requests
- PostgreSQL — Managed database for Web Apps with Dev/Prod environments
- Notifications — Get alerts via Email, Slack, Discord, or Telegram
- Local Connector — Edit code in your IDE while using XAIO's AI and preview