+ {/* view header */}
+
+
New app
+
+ Describe it, or start from a template
+
+
+
+ {/* scrollable body */}
+
+ {/* hero */}
+
+
+ Build a taOS app in plain words.
+
+
+ Describe what it should do. An agent builds it against the taOS SDK, sandboxed and safe,
+ and you can publish it to your Store or share it with family.
+
+
+
+ a shared shopping list the whole house can add to from their phones...
+
+
+
+
+
+
+ {/* section label */}
+
+ Start from a template
+
+
+ {/* template grid */}
+
+ {TEMPLATES.map((t) => {
+ const Icon = t.icon;
+ return (
+
+
+
+ {t.label}
+
+ {t.desc}
+
+
+ );
+ })}
+
+
+
+ {/* column 1: file tree */}
+
+
+ todo-app
+
+
+ {/* src folder */}
+
+
+
+ {/* App.tsx - active */}
+
+
+
+
+
+
+
+
+
+
+
+ {/* root files */}
+
+
+
+
+
+
+
+
+
+
+ {/* column 2: editor */}
+
+ {/* tabs bar */}
+
+
+ App.tsx
+ x
+
+
+ useTodos.ts
+ x
+
+
+
+ {/* code area */}
+
+ {CODE_LINES.map(({ n, jsx }) => (
+
+
+ {n}
+
+
+ {jsx}
+ {n === 10 && (
+
+
+ ))}
+
+
+ {/* terminal strip */}
+
+
+ ~/todo-app
+ {" $ npm run dev"}
+
+
+ VITE v5.4
+ {" ready in 412 ms"}
+
+
+ {"> Local: "}
+ http://todo-app.taos.local
+ {" "}
+ live
+
+
+
+
+ {/* column 3: build log */}
+
+ {/* header */}
+
+
+
+ {/* steps */}
+
+ {BUILD_STEPS.map((step) => (
+
+
+
+
{step.title}
+
+ {step.meta}
+
+
+
+ ))}
+
+
+ {/* footer */}
+
+ {/* model pill */}
+
+
+
+
Qwen2.5-Coder 7B
+
local - fedora-gpu
+
+
+
+
+ {/* open preview button */}
+
+
+
+
("desktop");
+
+ return (
+
+ {/* view header */}
+
+
Preview
+
+ todo-app - live on fedora-gpu
+
+
+
+ {/* horizontal split */}
+
+ {/* preview stage */}
+
+ {/* url bar + device toggle */}
+
+
+
+
+ {(
+ [
+ { id: "desktop" as DeviceMode, Icon: Monitor },
+ { id: "tablet" as DeviceMode, Icon: Tablet },
+ { id: "phone" as DeviceMode, Icon: Smartphone },
+ ] as { id: DeviceMode; Icon: typeof Monitor }[]
+ ).map(({ id, Icon }) => (
+ setDeviceMode(id)}
+ className={`flex cursor-pointer items-center rounded-full px-[11px] py-[5px] ${
+ deviceMode === id
+ ? "bg-shell-surface-active text-shell-text"
+ : "text-shell-text-tertiary"
+ }`}
+ >
+
+ ))}
+
+
+
+ {/* frame - simulated todo app in light theme */}
+
+ {/* app bar */}
+
+
+ 2 left
+
+
+
+ {/* app body */}
+
+ {/* add input */}
+
+ Add a task...
+
+
+ {/* todo items */}
+
+
+
Ship Coding Studio mock
+
+ today
+
+
+
+
+
+
Wire the cluster build runner
+
+ soon
+
+
+
+
+
+
Add completed-tasks filter
+
+ soon
+
+
+
+
+
+
Pick the syntax theme
+
+
+
+
+
+ {/* console panel */}
+
+
+
+ Console - dev server
+
+
+
+
+ 18:02:11 {" "}
+ ready
+ {" vite v5.4 in 412ms"}
+
+
+ 18:02:11 {" "}
+ hmr
+ {" page reload App.tsx"}
+
+
+ 18:02:18 {" "}
+ hmr
+ {" update TodoList.tsx"}
+
+
+ 18:02:18
+ {" useTodos: restored 4 from localStorage"}
+
+
+ 18:02:24 {" "}
+ 200
+ {" GET / 14ms"}
+
+
+ 18:02:24
+ {" render - 4 todos - 2 remaining"}
+
+
+ 18:02:31 {" "}
+ hmr
+ {" update styles.css"}
+
+
+
+
+
+ {/* footer bar */}
+
+
+
+
+
+
+
+
+
+ {/* view header */}
+
+
New project
+
+ Start from a prompt, a template, or blank
+
+
+
+ {/* scrollable body */}
+
+ {/* hero card */}
+
+
+ Describe what you want to build.
+
+
+ Tell taOS the app, tool, or script you need. An agent on your cluster scaffolds it,
+ writes the code, runs it, and hands you a live preview you can keep editing.
+
+
+
+
+
+
+
+ {/* template grid */}
+
+ Start from a template
+
+
+ {TEMPLATES.map(({ name, desc, stack, gradient, Icon }) => (
+
+
+
+
{name}
+
+ {desc}
+
+
+ {stack}
+
+
+ ))}
+
+
+
+
Untitled poster
+
Poster · 1080 x 1350
+
+
+
+
+
+
+
+ {/* left elements panel */}
+
+
+ Add
+
+
+ {ELEMENT_TILES.map(({ label, icon: Icon }) => (
+
+
+ ))}
+
+
+ Brand colors
+
+
+ {BRAND_SWATCHES.map((hex) => (
+
+
+
+ {/* center canvas stage */}
+
+ {/* stage bar */}
+
+
+
+
+ Sohne · 40
+
+
68%
+
+
+ {/* artboard */}
+
+
+ {/* decorative blob */}
+
+ {/* poster text content */}
+
+ taOS Studios
+
+
+ Build it
+
+ Dedicated studios for every project, running on hardware you already own.
+
+
+ Get started
+
+
+ {/* selection box */}
+
+ {/* corner handles */}
+ {[
+ { left: "26px", top: "58px" },
+ { left: "calc(100% - 26px)", top: "58px" },
+ { left: "26px", top: "150px" },
+ { left: "calc(100% - 26px)", top: "150px" },
+ ].map((pos, i) => (
+
+ ))}
+
+
+
+
+ {/* right properties panel */}
+
+ {/* text */}
+
+
+ {/* style */}
+
+
+ Style
+
+
+
+ B
+
+
+
+
+
+
+
+
+
+
+ {/* color */}
+
+
+ Color
+
+
+ {COLOR_SWATCHES.map(({ hex, active }) => (
+
+
+
+ {/* magic edits box */}
+
+
+
+
+ Ask for a change in words. taOS restyles the selected layer, on your cluster.
+
+
+ {MAGIC_CHIPS.map((chip) => (
+
+ {chip}
+
+ ))}
+
+
+
+
+ {/* view header */}
+
+
Magic design
+ Describe it, get a full layout
+
+
+ {/* scrollable body */}
+
+ {/* hero */}
+
+
+ Describe the design you need.
+
+
+ An agent on your cluster lays it out with your brand kit, fonts, and colors. Pick one and keep editing on the canvas.
+
+
+
+ {/* prompt bar */}
+
+
+ a launch poster for taOS Studios, bold, dark, confident...
+
+
+
+
+
+ {/* style chips */}
+
+ {STYLE_CHIPS.map((chip) => (
+
+ {chip}
+
+ ))}
+
+
+ {/* generated result tiles */}
+
+ {RESULTS.map(({ label, gradient }) => (
+
+ ))}
+
+
+
+ {/* view header */}
+
+
Templates
+ Start from a ready-made design
+
+
+ {/* scrollable body */}
+
+ {/* filter pills */}
+
+ {FILTER_PILLS.map((pill) => (
+ setActiveFilter(pill)}
+ className={`rounded-full px-[14px] py-[7px] text-[12px] font-semibold transition-colors ${
+ activeFilter === pill
+ ? "border-0 text-white"
+ : "border border-shell-border bg-shell-surface text-shell-text-secondary hover:border-shell-border-strong"
+ }`}
+ style={
+ activeFilter === pill
+ ? { background: "#8b92a3" }
+ : undefined
+ }
+ >
+ {pill}
+
+ ))}
+
+
+ {/* template grid */}
+
+ {TEMPLATES.map(({ name, caption, size, gradient }) => (
+
+
+ {name}
+
+
+ {caption}{" "}
+ · {size}
+
+
+ ))}
+
+
+
+ {/* view header */}
+
+
Compose
+
+ Describe a track, get a full arrangement
+
+
+
+
+ {/* hero */}
+
+
+ Hum it, or just describe it.
+
+
+ An agent on your cluster writes a multi-track arrangement you can open in the studio
+ and edit note by note. Apache-licensed models, nothing leaves your network.
+
+
+
+ {/* prompt bar */}
+
+
+ a warm lo-fi beat, 90 bpm, dusty drums, rhodes chords, vinyl crackle...
+
+
+
+
+
+ {/* style chips */}
+
+ {STYLE_CHIPS.map((chip, i) => (
+
+ {chip}
+
+ ))}
+
+
+ {/* generated results */}
+
+ {RESULTS.map((result, i) => (
+
+
+
+
+ {result.bars.map((h, bi) => (
+
+
+
+ {result.bpm} BPM - {result.duration}
+
+
Open
+
+ ))}
+
+
+
+ {/* view header */}
+
+
Sounds
+
+ Instruments and samples, all offline
+
+
+
+
+ {/* filter pills */}
+
+ {FILTER_PILLS.map((pill, i) => (
+
+ {pill}
+
+ ))}
+
+
+ {/* sound card grid */}
+
+ {SOUNDS.map((sound) => (
+
+ {/* pad preview */}
+
+ {sound.bars.map((h, i) => (
+
+
+
{sound.name}
+
+ {sound.category} - {sound.detail}
+
+
+ ))}
+
+
+
+ {/* transport bar */}
+
+
+ {/* stop */}
+
+
+ {/* play */}
+
+
+ {/* record */}
+
+
+
+
+
+
+ 003 . 2 . 1
+
+
+ 92
+ BPM
+
+
+ 4/4
+ Time
+
+
+ A min
+ Key
+
+
+
+
+
+ Saved to Workspace
+
+
+
+
+ {/* arrange area */}
+
+ {/* track list column */}
+
+ {/* ruler label */}
+
+
+ Tracks
+
+
+
+ {TRACKS.map((track, i) => (
+
+
+
+
{track.label}
+
+
+ M
+
+
+ S
+
+
+
+
+
+
+ ))}
+
+
+ {/* scrolling timeline */}
+
+ {/* bar ruler */}
+
+ {RULER_BARS.map((b) => (
+
+ {b}
+
+ ))}
+
+
+ {/* lanes */}
+ {TRACKS.map((track) => {
+ const clip = CLIPS.find((c) => c.trackId === track.id);
+ return (
+
+ {clip && (
+
+
+ {clip.label}
+
+
+ {clip.bars.map((h, idx) => (
+
+
+ )}
+
+ );
+ })}
+
+ {/* playhead */}
+
+
+
+
+ {/* right inspector */}
+
+
+
+
+ taOS Drum Kit - Boom Bap
+
+
+
+ {KNOBS.map((label) => (
+
+ ))}
+
+
+
+ {FX_ROWS.map((fx) => (
+
+ ))}
+
+
+
+
+ {/* piano roll strip */}
+
+ {/* key labels */}
+
+ {PIANO_KEYS.map((k) => (
+
+ {k.label}
+
+ ))}
+
+
+ {/* note grid */}
+
+ {PIANO_NOTES.map((note, i) => (
+
+
+
+ {/* formula bar */}
+
+ B7
+
+ =SUM(B2:B6)
+
+
+
+
+ {/* spreadsheet */}
+
+
+
+
+
+ {col}
+
+ ))}
+
+
+
+ {/* header row */}
+
+
+ 1
+
+
+ Month
+
+
+ Revenue
+
+
+ Costs
+
+
+ Profit
+
+
+
+ {/* data rows */}
+ {ROWS.map((row, i) => (
+
+
+ {i + 2}
+
+
+ {row.month}
+
+
+ {row.revenue}
+
+
+ {row.costs}
+
+
+ {row.profit}
+
+
+ ))}
+
+ {/* total row */}
+
+
+ 7
+
+
+ Total
+
+
+ 28,900
+
+
+ 12,900
+
+
+ 16,000
+
+
+
+
+
+
+ {/* right sidebar */}
+
+ {/* bar chart card */}
+
+
Revenue by month
+
+ {BAR_HEIGHTS.map((h, i) => (
+
+ ))}
+
+
+ {MONTHS.map((m) => (
+
+ {m}
+
+ ))}
+
+
+
+
+
+ “Which month had the best margin?” taOS reads the sheet and answers, on
+ your hardware.
+
+
+
+
+ {/* slide thumbnail rail */}
+
+
+ {/* slide canvas stage */}
+
+
+
+ taOS Studios
+
+
+ Build it your way.
+
+
+ Dedicated studios for every project, running on hardware you already own.
+
+ {/* selection box */}
+
+
+
+
+ {/* right panel */}
+
+ {/* generate a deck */}
+
+
+
+
+ Describe the talk and taOS drafts the slides, on brand.
+
+
+ a 5-slide intro to taOS Studios for new users…
+
+
+
+
+ Layout
+
+
+ {LAYOUTS.map((lay) => (
+
+ {lay.barWidths.map((w, i) => (
+
+ ))}
+
+ ))}
+
+
+ {/* formatting toolbar */}
+
+
+ Sohne ▾
+
+
+
+ B
+
+
+ I
+
+
+ U
+
+
+
+
+
+
+
+
+
+
+
+ {/* document area + AI panel */}
+
+ {/* document scroll area */}
+
+
+
+ taOS Studios launch note
+
+
+ Draft · updated just now
+
+
+ taOS now ships a family of creative studios, each a focused workspace that runs
+ entirely on hardware you already own.{" "}
+
+ Whether you are building a business, a hobby project, or something just for the
+ house
+
+ , there is a studio with the tools you need.
+
+
+ What is ready today
+
+
+ Images Studio and Game Studio are available now. Coding Studio is rolling out, with
+ Design, Music, App, and Office studios close behind. Each one installs from the Store
+ in a single click.
+
+
+ Everything runs offline by default, on your cluster, with nothing leaving your network
+ unless you choose to share it.
+
+
+
+
+ {/* AI panel */}
+
+
+