Telar

A local-first AI workspace for generating, editing, previewing and exporting React interfaces from a prompt.

Telar is Portuguese for loom — you describe a screen and it weaves the code, live.

English · Português

---

Showcase

Every screen below was generated from a single English prompt and rendered live in Telar's in-browser preview — no hand-written code.

Desktop & mobile — flip the preview between a desktop and a phone frame to check how the generated app responds, no export or device needed.

Analytics dashboard

"A SaaS analytics dashboard with a left sidebar navigation, a top bar with search and a user avatar, four KPI summary cards, a large revenue line chart, a traffic-sources donut chart, and a recent-activity table. Clean modern light theme with a teal accent."

SaaS landing page

"A modern landing page for a project-management SaaS: sticky nav, a bold hero with a product mockup, a three-column feature grid, a pricing section with three tiers, a testimonial, and a footer. Light theme with a vibrant indigo accent."

Account settings

"A user account settings screen: a left sidebar with sections, a Profile panel with avatar and edit button, a two-column form, a Notifications card with toggles, and a sticky footer with Cancel and Save buttons. Light theme with a violet accent."

Why Telar

Telar brings the flow of a design canvas to code generation: describe the screen, attach references when you need them, and watch a real React app render in a live preview. Everything runs local-first — your projects live in the browser (IndexedDB), and you bring your own AI key or a local CLI. Nothing is uploaded to a Telar backend.

Features

• 🧵 Prompt to UI — describe a screen and get a complete, editable React project.
• 👀 Live preview — the generated app runs in-browser via WebContainers, with a lightweight mock mode for tests.
• ⚡ Warm-start preview — a prebuilt node_modules seed skips most of the first npm install, so previews open fast instead of installing from scratch. See Preview dependency seed.
• 🗂️ Projects — create, switch, rename and delete projects; each keeps its own conversation and version history.
• ⏪ Versions — every generation is a restorable snapshot.
• 📎 References — attach text and image files to guide generation.
• 🧠 Bring your own AI — OpenAI, Anthropic (Claude), or a local Claude CLI / Codex CLI binary (no API key needed).
• ✍️ Generation skills — ships with a frontend-design skill or loads a custom one from a public GitHub SKILL.md.
• 📦 Export — download the whole project as a ZIP.
• 🚀 Publish — one-click deploy to Vercel (builds from source) or Netlify (built in-browser, then uploaded); paste a personal access token, no OAuth. See Deploy providers.
• 🌐 Internationalization — English and Portuguese, auto-detected and switchable.
• 🎨 Calm, light UI — a "Canvas + Dock" layout that keeps the preview center stage.

Tech stack

• Next.js 16 (App Router) · React 19 · TypeScript
• WebContainers for the in-browser preview runtime
• Zod for schema validation · JSZip for export
• Vitest (unit) · Playwright (e2e)
• Plain CSS with design tokens — no UI framework

Getting started

Requirements: Node.js 20+ and npm.

git clone https://github.com/renanmpimentel/telar.git
cd telar
npm install
npm run dev

Open http://localhost:3000. Open Settings to pick an AI provider and paste your API key (or select a detected local CLI).

With Docker

docker compose up

Environment variables

All are optional:

Variable	Purpose
NEXT_PUBLIC_PREVIEW_MODE	Set to mock to render a lightweight preview without WebContainers (used in tests).
TELAR_GENERATION_MAX_MS	Safety cap for a background generation before it's force-aborted (default 1200000 = 20 min).
TELAR_CLAUDE_BIN	Path/name of the Claude CLI binary (default claude).
TELAR_CODEX_BIN	Path/name of the Codex CLI binary (default codex).

Deploy needs no environment variables — you paste a personal access token in the UI (see below).

Preview dependency seed

The live preview installs the generated project's dependencies inside a WebContainer. The first open used to run a full npm install, blocking the preview for tens of seconds. Telar now warm-starts that step:

• On a fresh browser, the runtime mounts a prebuilt seed snapshot of the base template node_modules (React, Vite, TypeScript, …) as a starting point, then runs npm install --prefer-offline so only the missing delta is fetched. This speeds up every generated project, even ones that add extra libraries. If the seed is absent, it transparently falls back to a full install.
• After the first successful install, the resulting node_modules is cached per-project in IndexedDB, so later reloads skip installing entirely.

The seed ships as a static asset under public/snapshots/ and is generated at setup (it is git-ignored, keeping the repo lean). Generate it once in Chrome/Chromium:

npm run dev            # in one terminal
npm run prepare:seed   # boots a WebContainer, installs the base deps, writes public/snapshots/

This produces public/snapshots/<hash>.bin plus a manifest.json. Regenerate it whenever the template's base dependencies change. The seed is optional — Telar works without it, just with a slower first preview.

Deploy providers

The Publish drawer always offers a .zip download. One-click deploy is configured entirely in the app — no env vars, no OAuth setup, and it works locally:

1. Create a personal access token on the provider (Vercel tokens / Netlify personal access tokens) — each card links straight to it.
2. Open Publish, paste the token into the provider's card, and click Connect. The token is validated immediately and stored in an httpOnly cookie (never exposed to JavaScript).
3. Click Deploy for a live URL.

• Vercel — source files are uploaded and Vercel runs the Vite build.
• Netlify — the project is built in your browser (WebContainers) and the static dist/ is uploaded.

No redirect ever leaves the app, so this works on localhost. All deploy messages follow the selected language.

AI providers

Telar is BYOK (bring your own key). In Settings → AI service you can choose:

• OpenAI or Claude — paste an API key; the request is sent to the provider directly from the route handler.
• Claude CLI / Codex CLI — used automatically when the binary is detected on your PATH; runs locally, no API key. The CLI uses its own default model, so set a faster one in the Model field to speed things up.

Internationalization

The UI ships in English and Portuguese. The locale is auto-detected from the browser (falling back to English) and can be changed any time in Settings → Language; the choice is persisted locally. Strings live in src/lib/i18n/dictionaries.ts — add a locale by mirroring the en map.

Scripts

Script	Description
npm run dev	Start the dev server
npm run build	Production build
npm run start	Serve the production build
npm run lint	ESLint
npm run typecheck	TypeScript, no emit
npm test	Unit tests (Vitest)
npm run test:e2e	End-to-end tests (Playwright)
npm run prepare:seed	Generate the preview dependency seed into public/snapshots/ (see Preview dependency seed)

Project structure

src/
  app/            Next.js routes, layout, global styles, favicon
  components/     Workspace, preview pane, brand mark
  lib/
    ai/           Provider dispatch + CLI agent
    i18n/         Dictionaries, provider and hook
    preview/      WebContainer runtime + module cache + dependency seed loader
    project/      Types, templates, references, generation skills
    storage/      Local (IndexedDB) project persistence
    export/       ZIP export
    deploy/       Client helpers + types for one-click publish
    server/       Server-only deploy logic and GitHub skill resolver

Contributing

Contributions are welcome! Please open an issue to discuss substantial changes first. Before opening a PR, run npm run lint, npm run typecheck and npm test.

License

MIT © Renan Pimentel