mythos.new — Browser IDE for Vite & Next.js

Inputs

json

{
  "query": "float tank spa cream walls",
  "filename": "hero"   // optional; auto-numbered if omitted
}

Filename, if given, must match /^[a-zA-Z0-9_-]+$/ (no spaces, no extension). The agent picks a descriptive English query and a one-word filename per section.

Where the file lands

The path depends on the scaffold:

Scaffold	Path	Reference in JSX
Vite + React	src/assets/<name>.jpg	import hero from '@/assets/hero.jpg'
Next.js 15	public/<name>.jpg	<img src="/hero.jpg" />

Usage in code

tsxsrc/components/Hero.tsx

import hero from '@/assets/hero.jpg';

export function Hero() {
  return (
    <section className="relative h-[80dvh]">
      <img
        src={hero}
        alt="Float tank with cream walls"
        className="absolute inset-0 h-full w-full object-cover"
      />
    </section>
  );
}