Your first project
A walkthrough from a blank workspace to a deployed preview with export-ready code, in about four minutes.
Open the workspace
Sign in at mythos.new with Google, GitHub, or email. Every new account ships with 5 free credits — enough for one scaffold plus one edit, which is exactly what this tutorial covers.
After sign-in you land in an empty workspace. The sidebar on the left fills up as you create projects.
Pick a stack
Every project starts from one of two scaffolds. They are battle-tested starters, not theoretical templates:
- Vite + React 18 — fastest HMR, ideal for landing pages, marketing sites, interactive prototypes.
- Next.js 15 — App Router, Server Components, built for content-heavy sites and apps with routes.
Pick one at project creation. You can not switch later — create a new project instead. Both scaffolds ship with TypeScript strict, Tailwind v3, and lucide-react.
Write your first prompt
The prompt box at the top of the workspace is the single entry point. Keep your first prompt concrete — describe a real thing, not a category:
// Good — specific, visual, mentions sections Build a landing page for "Velvet Salt Spa", a boutique float-tank spa in Oslo. Dark mode, hero with a booking CTA, 3-step process, price list, testimonial row, FAQ, and a contact form. Use warm tones. // Too vague — you will get a generic template make me a spa website
Hit ⌘ enter to send. The agent scaffolds the project, commits the initial version, and opens the sandbox preview on the right. You will see files stream into the file tree as the agent writes them.
Iterate with natural language
Once the first version is up, keep going with follow-up prompts. The agent has full context of your project files and does targeted edits instead of regenerating from scratch:
// Targeted edit — change CTA + hero colour Change the hero background to a deep forest green and rewrite the CTA button text to "Reserve a float". // Add a new section Add a testimonial grid under the price list with three cards. Use placeholder avatars and realistic Norwegian names.
If the agent does not know what you mean — for example, "food business in Tokyo" could be a restaurant or a delivery app — it will pause with an ask_human popup and wait for your answer before continuing.
Own the code on GitHub
Every project keeps private source history inside Mythos. When you are ready, use GitHub export to create a clean repository under your own GitHub account or organization. From the workspace menu you can:
- View the full git history without leaving Mythos.
- Export a clean copy to a GitHub repo you own.
- Delete the project at any time; exported GitHub repositories stay under your control.
import { Waves } from "lucide-react"; export function Hero() { return ( <section className="bg-forest text-cream py-24"> <div className="mx-auto max-w-3xl text-center"> <Waves className="mx-auto mb-6 h-10 w-10 text-rust" /> <h1 className="text-5xl font-semibold"> Float your way to clarity </h1> <button className="mt-8 rounded-full bg-rust px-6 py-3"> Reserve a float </button> </div> </section> ); }
Want to use your own GitHub org?
Connect it from the workspace GitHub button or Project settings -> GitHub. Exports create repositories under your account or organization.
What to read next
That is the full happy path. If something did not go as expected, jump to Troubleshooting. Otherwise pick one of these to keep going:
- Writing prompts — patterns for getting the agent to do what you mean the first time.
- ask_human — when the agent pauses to ask, and how to answer cleanly.
- Credits — exactly what each action costs, and how top-ups work in USDT on TRON.
Was this page helpful?