Slicy Docs - AI Website Builder

Overview

Slicy is an AI-powered website builder. You describe what you want, and Slicy generates a full project: HTML / CSS / JS or React / TypeScript, file structure, live preview, and deployment options.

Chat-first workflow – talk to Slicy in natural language to describe your product or layout.
Multiple tech stacks – generate plain HTML/CSS/JS, React + Vite + Tailwind, or Python UI prototypes.
Code & design tools – file tree, Monaco code editor, live preview, design mode for point-and-click edits.
Project history – chats stored in Supabase, with in-session version history per chat.
Export & deploy – download ZIPs, deploy to Netlify, or push to GitHub with one flow.

Quick start

Create an account – Click Sign Up in the header, register with email/password or Google/GitHub. Verify your email if requested.
Start a new chat – On the left sidebar, click New Chat. The welcome screen appears with an input box and idea shortcuts.
Pick a tech stack – Use the HTML / React / Python dropdown under the input to choose how Slicy should structure your project.
Describe your site – Type a clear description (e.g. "A SaaS landing page with pricing table and FAQ") and press Enter or click the send icon.
Review preview & code – After generation finishes, open the Code tab to inspect files and use the Preview tab to see the site live.
Iterate – Ask follow-up prompts like "add a testimonials section" or "make the hero dark with purple accents".

Workspace tour

Left sidebar – New Chat, Search Chat, favourites, and chat history.
Top header – Brand, navigation (Features, Templates, Pricing, Docs), social links, auth buttons, and Deploy / GitHub actions when in a project.
Chat panel – Main conversation with Slicy; shows messages, streamed code summaries, file generation boxes, and reasoning sections (when enabled).
Code panel – Contains the file tree, Monaco editor, and preview panel. You can toggle full-screen and side-by-side layouts.
Design panel – Appears when you enable Design Mode. Lets you edit text, icons, images, and links visually.

AI chat & prompts

The chat is your main interface with Slicy.

Welcome screen presets – The small chips like Startup, App Landing, Course, etc. fill the input with well-written prompts.
More ideas – Click More Ideas to open the Prompt Library (hundreds of categorized prompt suggestions). Click a card to send that prompt.
Image input – Use the "+" button or drag & drop / paste images to include screenshots or designs. Slicy embeds them into the request.
Streaming – Responses stream in; you can stop generation using the send button while it's active.
File generation boxes – When Slicy creates files, you see a list of file chips. Click any chip to open that file in the Code tab.

Tech stack selection

Use the tech stack dropdown below the input to guide how Slicy structures your project.

HTML – Generates static HTML/CSS/JS projects. Best for landing pages and small sites.
React – Generates React + Vite projects (TypeScript, Tailwind, lucide-react imports handled automatically). Slicy can also auto-fix missing icon imports in React files.
Python – Generates Python-based prototypes (rendered by the Python preview renderer).
Persistence – Your last selected stack is saved per browser using the underlying prompt manager and theme manager, so new chats use the same stack.

Templates & prompt library

Slicy ships with a curated gallery of complete example projects.

Home templates strip – Scrollable cards on the welcome screen show featured templates with thumbnails.
Templates modal – Click Templates (header) or Browse All to open the full-screen templates explorer with search, categories, and featured templates.
Mix – In the modal, Mix loads the template's files into your current chat so you can adjust with new prompts.
Preview – View opens a preview-only view of the template in a separate popup.
Prompt Library – The More Ideas modal groups prompts by category (Business, Portfolio, Games, etc.) so you can quickly start a new project type.

Files & code editor

Once Slicy generates code, the Code tab unlocks the file tree and editor.

File tree – Shows all generated files and folders (config files like package.json, Tailwind config, etc. are hidden for clarity). You can expand/collapse, drag files between folders, and rename.
Add files & folders – Use Add file or Add folder to extend the project. Slicy keeps the state synced to the current chat.
Monaco editor – A VS Code–style editor with syntax highlighting and Ctrl/Cmd + S support. Pro users get full editing; Free plan may have read-only constraints.
Saving – Click the disk icon or press Ctrl/Cmd + S while focused on the editor to save changes and refresh the preview.
Streaming into files – During generation Slicy streams code directly into files; you see them update live in the editor.

Preview & mobile view

Live preview – The Preview tab renders the current project in an isolated iframe. Slicy picks an entry file automatically (Python, React, or HTML).
Refresh – Use the refresh button to re-render if you changed code manually.
Mobile preview – Toggle the phone icon to see your site in a mobile-sized viewport.
Routing support – Links inside the preview can trigger navigation events so Slicy knows which file to render (useful for multi-page React or HTML projects).
Side-by-side layout – Enable the side layout to have Code and Preview visible together and adjust the split using the internal resizer.

Design mode

Design Mode lets you visually edit the generated page inside the preview without writing code.

Enable – Click Design Mode. The preview becomes interactive and shows hover outlines on editable elements.
Select elements – Click text, spans, icons, images, or links. The right-hand design panel opens the appropriate editor (Text, Icon, Image, Link).
Edit text – Change headings or copy in the text editor; Slicy syncs these changes back to the underlying HTML files and refreshes Monaco/preview.
Edit icons – Browse or search the icon library, pick a replacement; Slicy updates icon classes and imports (for React).
Edit images – Upload an image, Slicy resizes it, stores it as a new file, updates src attributes, and rebuilds the file tree.
Edit links – Change href targets; Slicy updates matching links in the code.
Automatic version & sync – Design edits persist: Slicy syncs files and messages back to the backend and creates a new version snapshot.

Version history

Per-chat versions – Each chat keeps its own in-browser version list. Versions are stored in the session for that chat.
Creating versions – Slicy creates versions automatically for key events (such as design edits and explicit version actions). You may also have manual triggers via the Version button.
Viewing & restoring – Click Version History to open the popup. You see named versions (V1, V2, "Restore from V2", etc.) with timestamps. Restoring loads the files and messages, updates the UI, and creates a new version representing the restoration.
Cloud sync – After restore, Slicy pushes the new state to Supabase so your chat stays consistent across sessions.

Chats & history

Chat list – The sidebar lists all your chats ordered by last activity. Each chat shows a short title and last-updated time.
Favourites – Star important chats as favourites; they appear in a dedicated collapsible section.
Search chats – Use Search Chat to open a popup that searches across chat names and message content using Supabase.
Rename & delete – Rename chats to something meaningful; delete chats when you no longer need them (messages and associated data are removed from the backend).

Accounts & profile

Sign up / Sign in – Use email/password or OAuth (Google, GitHub). Email verification is enforced; unverified users see a verification popup.
Profile popup – Click your avatar in the header to open the profile popup with tabs for Overview, Settings, Billing, and Integrations.
Overview – Shows your name, email, and token usage (monthly and daily), with progress bars and reset timers.
Integrations – Connect Netlify and GitHub to enable one-click deployments. Once linked, status is shown here.
Sign out & account deletion – Sign out from the profile; advanced flows can also delete user data via the backend.

Plans & token limits

Slicy measures usage in tokens (roughly proportional to message size and code generated).

Pricing popup – The Pricing button opens a full-screen comparison between the Free and Pro plans.
Free plan – Limited daily/monthly tokens, Slicy branding on exported projects, read-only files, and a small number of image uploads per chat.
Pro plan – Much higher monthly token limit, no Slicy branding, editable code in the Monaco editor, more image uploads, and Pro-only templates.
Usage indicators – In the profile overview you can see how many tokens you have used and when your daily/monthly allowance resets.

Settings & preferences

Most personal preferences live in the Settings tab of the profile popup.

Theme – Choose Dark, Light, or Device mode. This affects both the app and the Monaco editor theme.
Default view during generation – Decide which tab (Preview or Code) Slicy focuses when new code is generated.
Messages in context – Control how many recent chat turns the AI sees (fewer = faster, more = more context for complex tasks).
Completion sound – Enable/disable the subtle chime when a response finishes streaming.

Download project

Download ZIP – Use the Download project buttons to export the current project as a ZIP containing all generated files and folders.
What's included – All code, assets, and (for React projects) generated configuration files such as package.json, Tailwind config, and Vite config.
Local development – For React projects, install dependencies and run npm run dev locally using the generated config.

Deploying to Netlify

Connect Netlify – Open the Deploy popup (from the header button). If you haven't connected Netlify yet, click Connect Netlify to complete OAuth.
Generate a project – Ensure your current chat has generated files; Slicy packages them into a ZIP for deployment.
Deploy – Click Deploy Now. Slicy uploads your ZIP to a Supabase Edge Function, which creates or updates a Netlify site.
View deployment – After a short delay, the popup shows your live URL, copy/share buttons, and a Redeploy option for future updates.
Domain management – Use Change Domain to jump directly to Netlify's domain settings for that site.

Deploying to GitHub

Connect GitHub – Click the GitHub button in the header or open the GitHub popup from a project. Authorize Slicy via OAuth.
Create repository – In the popup, specify repository name, default branch, and whether it should be private. Click Create Repo & Deploy.
Initial deployment – Slicy creates a repo, commits your project files, and records the repo/branch against the current chat.
Subsequent commits – When your project changes, open the popup again and use Create New Commit. You can customize the commit message.
View on GitHub – Use View Repository to open the repo in a new tab.

Domains

Slicy includes a domain helper to quickly check domain availability while you design your site.

Open domain search – Where available in your UI, use the domain search entry point (e.g. from profile or deploy flows) to open the Find Your Domain popup.
Search – Type a base name (e.g. mycoolapp). Slicy queries common TLDs and shows available options.
Use results – Pick a domain for use on Netlify or your own DNS provider; domain purchase/connection happens outside of Slicy.

Reasoning tokens

For compatible models, Slicy can surface the model's reasoning stream alongside normal responses.

What they are – Reasoning tokens are an additional channel from the model that explains intermediate steps in plain text.
Configuration – Environment variables control whether reasoning is enabled, the effort level or max reasoning tokens, and whether the reasoning text is shown.
UI – When enabled, Slicy renders reasoning beneath responses in a dedicated section, streaming in real time.
Costs – Reasoning tokens still count toward your usage, but they can make complex debugging and refactors easier to follow.

Keyboard shortcuts

Send message – Enter (Shift + Enter for new line).
Save code – Ctrl/Cmd + S while the Monaco editor is focused saves the current file and refreshes the preview.
Rename files/folders – In the file tree, press Enter on a selected item to start rename.