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:

prompt
// 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:

prompt
// 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.
tsxsrc/components/Hero.tsx
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?

© 2026 Mythos Labs · Source on GitHub