An open-source, web-based app builder for relational technology -- tools that strengthen neighborhood connection, care, civic information, and local resilience.
Describe what you want to build in natural language. AI generates working code informed by community principles and patterns. Publish your creation back to the commons.
Relational Builder combines three things that don't yet exist together:
- A builder interface where you describe what you want and AI generates working code with a live preview
- The Relational Tech Studio knowledge base -- principles, patterns, tools, and real stories from community builders -- woven into the AI's context so every build is relational-tech-aware
- A commons loop where finished builds can be published back to the network, growing the knowledge base for the next builder
- Chat-driven building -- describe what you want in plain language, get working code
- Plan & Build modes -- Plan mode is the default for new builds: a real visioning phase that meets the idea where it is: bring a seed of an idea and it explores with you first — reflecting your place back, offering 2–3 distinct directions drawn from the commons by name, gathering the context that actually shapes the build — while a fully-baked ask goes straight to a plan. It grounds the tool in your place and people, names the neighboring practices around the tech, and asks one vision-level question at a time. Press "Build this plan" when it feels right — or build directly
- Live progress while you wait -- long generations show what's actually happening: reaching the model, the AI's own summarized thinking streaming past, files landing as they're written, elapsed time throughout
- Builds that finish -- an output budget sized for real multi-file apps (64k tokens), automatic continuation if a reply is ever cut off mid-file, and a one-tap recovery banner if a reload or dropped connection interrupts a build before its files are saved
- Studio build plans -- paste a Studio share link (or ID) and the plan is fetched as your starting draft, with lineage recorded automatically
- Start from the Studio -- the dashboard gallery turns live Studio library tools and shared build plans into starting points: tool cards distill into a place-adaptable build prompt that lands in Plan mode, so you shape it for your neighborhood before building fresh (full-code forking stays available for advanced use)
- Prompts as first-class -- every build can distill into a self-contained, travel-ready prompt ("Git for prompts"): save it with the project, version it, share it by link, and browse other builders' shared prompts in the gallery. The prompt travels in
.reltech.yml, so the recipe spreads even when the code doesn't - RT Commons retrieval -- every message runs a hybrid semantic + full-text search across the whole commons (tools, stories, recipes, the Neighboring Commons library, frameworks) and weaves the most relevant knowledge into the AI's context
- Studio-aware building -- pick a Studio from the network (or arrive via a
?studio=link) and build inside its frame: the studio's principles layer onto the base RTP principles in the AI's context (append-only, never replacing), and the studio travels in your project's lineage - Offer builds back to the commons -- after publishing, share your build to the commons contribution queue (consent-first, steward-reviewed, credited by name)
- Community access -- invited pilot builders get free Claude building via RTP's subsidized key, gated server-side with generous daily budgets — no API key, no credit card. Claude Opus 4.8 (the best builder) handles planning and the first build; edits then default to the faster Sonnet 5 (announced in the chat, never switched silently), and picking a model in the picker pins it for that project. Haiku 4.5 is also covered
- Community Cloud -- one click gives any project a free shared data store hosted by RTP (3 backends per builder, 20MB each) with built-in neighbor email-code sign-in — no database accounts, no SQL
- Cloud dashboard -- the Cloud tab shows everything behind your apps: collections and documents (with moderation), the neighbors who've signed in, storage against the free tier, and backend settings — a friendly database console
- Quality review pass -- after every build, a fast second model quietly checks the result against what you asked for; real defects (dead buttons, broken references) trigger one automatic fix, solid builds pass in silence
- Any web stack that fits -- simple tools ship as plain HTML, richer ones as React, and "an app neighbors can install on their phones" becomes a real PWA (manifest + service worker) that installs from your published site
- Cloud projects & collaboration -- sign in with a magic link, save projects to the cloud, and add collaborators by email; edits sync live via Supabase Realtime
- Place-grounded builder profiles -- a short onboarding captures your neighborhood, dreams, and tech comfort; every chat is shaped by who you are and where you build, and an optional personal design system makes your apps look like they come from you and your place
- Build with others -- an opt-in builders directory with consent-first, double-opt-in introductions; the chat can quietly suggest one relevant builder when your work overlaps with theirs (dismissible, never pushy)
- Live preview -- see your app running in real time as the AI generates it (powered by Sandpack)
- Image input -- attach or paste a sketch, screenshot, or mockup and the AI builds from it (works with Claude and Gemini vision)
- Targeted edits -- the AI sees your current files and makes surgical SEARCH/REPLACE changes instead of rewriting whole files (faster, cheaper, safer on big projects)
- Auto-fix -- when a fresh build throws an error in the preview, the exact error goes back to the AI for one automatic repair pass (bounded — it can never loop); if anything's left, "Ask AI to fix it" is one click, no copy-pasting stack traces
- Security scan on publish -- publishing runs a deterministic scan for leaked API keys and secret values in your files; findings block with file and line, plus a "let me fix it first" path
- Remix -- pull any public GitHub repo into the builder as a starting point, with lineage recorded (and a friendly explanation — not an error — when a full framework app can't run in the instant preview)
- Point at it -- toggle select mode in the preview, click any element in your running app, and the chat is prefilled with what you pointed at — describe the change in plain words, no selectors or code-speak
- Version history -- every AI change is a restorable checkpoint; walk back a bad stretch (or forward again) from the chat
- RTP Knowledge Base -- browse 20+ community tools and 45+ stories from the relational tech network, all injected into the AI's context
- Network Activity feed -- see what other builders are shipping across the ecosystem, pulled live from updates.relationaltechproject.org
- Publish to Commons -- export your project as a zip with a
.reltech.ymlmanifest, push to GitHub, and the network watcher discovers it automatically - Community Hosting -- one-click free hosting from RTP (3 sites per builder, no platform accounts or tokens) with privacy-friendly visit counts; Netlify/Vercel still available for bigger needs
- My Sites dashboard -- your live community-hosted sites on the home screen: views, weekly activity, and take-down — the "is it alive?" surface for showing your neighborhood what the work is worth
- Neighbor notes -- every community-hosted site gets a built-in "leave a note" widget (no accounts, no tracking); notes flow back to your dashboard, so building with neighbors has a return channel (opt out per site with
<meta name="rb-feedback" content="off">) - Deploy to Netlify/Vercel -- deploy directly from the builder with a personal access token
- GitHub two-way sync -- connect a GitHub repo, push project files as atomic commits, and pull remote changes back into the builder
- RAG-powered context -- AI responses informed by the most relevant KB tools, stories, and network activity for each message
- Share preview links -- generate a shareable link (via CodeSandbox) that anyone can open — no signup needed, perfect for sharing with neighbors
- Service integrations -- connect Supabase, Neon, Resend, and Firecrawl in the Services tab; the AI knows what's connected and generates code that uses it (secrets only ever reach deploy platforms)
- Environment variables -- add API keys and config in the Env panel; public vars are injected into the live preview, secret vars are only sent to deploy platforms
- Custom domains -- attach your own domain (e.g. myapp.ourneighborhood.org) when deploying to Netlify or Vercel, with DNS setup instructions
- Resizable panels -- drag dividers to resize the chat, preview, and knowledge panels
- Session persistence -- your chat and project files survive page refreshes via localStorage (and the cloud when signed in)
- Model-agnostic -- latest models from Anthropic (Claude Opus 4.8 by default, Sonnet 5, Haiku 4.5), Google (Gemini 3.5), OpenAI (GPT-5.5), Together AI, OpenRouter, or any OpenAI-compatible endpoint
This project is guided by the core principles of the Relational Technology Project:
- Technology is a trojan horse for community building -- it enters daily life through practical needs while opening space for deeper connection
- The 90/10 principle -- 90% of the work is community presence and relationship-building; 10% is building technology. AI makes the 10% more accessible but must never eat into the 90%
- River, garden, commons -- RTP is the river carrying stories and tools across local gardens, while each garden is tended by those who live there
- Agency, belonging, trust -- every build should nurture these three dimensions of healthy relational soil
- The practice cycle -- observe, invite, relate, build, share — how we build matters more than what we build
- Open source and remixing -- scale deep in place and spread horizontally, neighborhood to neighborhood, through remixing rather than replication
A neighborhood builder should be able to visit a URL and start building without signing up for anything or entering a credit card. Today that's real: invited builders sign in with a magic link and build free on Claude Opus 4.8 through RTP's community access — no API key, no billing, generous daily budgets, because early adopters deserve great experiences. Anyone can also bring their own API keys for Claude, Gemini, OpenAI, or other providers, and an RTP-hosted open-source model tier remains on the roadmap.
Chat Panel | Preview Sandbox | Knowledge / Files / Network
| (Sandpack) |
Orchestration Layer
(model router, RAG context injection, project state)
|
Provider Layer
(RTP-hosted vLLM | Claude BYOK | OpenAI BYOK | OpenRouter)
|
┌──────────────┼──────────────┬────────────────────┐
Supabase | GitHub API Network Watcher
(KB tools, Deploy (two-way (updates.relational
stories) (Netlify/Vercel) file sync) techproject.org)
- Framework: Vite + React + TypeScript
- UI: Tailwind CSS v4 + shadcn/ui
- State: Zustand (persisted to localStorage)
- Preview: Sandpack (CodeSandbox runtime, Apache 2.0)
- Database: Supabase (shared with RTS Studio)
- Network feed: Relational Tech Watcher
Provider abstraction inspired by Dyad (Apache 2.0).
# Clone the repo
git clone https://github.com/The-Relational-Technology-Project/relational-builder.git
cd relational-builder
# Install dependencies
npm install
# Copy env config (optional — works without it for local dev)
cp .env.example .env
# Start the dev server
npm run devOpen http://localhost:5173 and start building.
In production, LLM API calls route through a Supabase Edge Function (supabase/functions/llm-proxy) to avoid CORS issues and keep API keys server-side. The proxy accepts OpenAI-compatible requests and translates them for each provider (Anthropic, OpenAI, RTP-hosted vLLM).
# Deploy the proxy (requires Supabase CLI)
supabase functions deploy llm-proxy --no-verify-jwt
# Set the proxy URL in your .env
VITE_LLM_PROXY_URL=https://YOUR_PROJECT.supabase.co/functions/v1/llm-proxyWithout a proxy URL, Claude falls back to direct browser-to-Anthropic calls (fine for local development with BYOK).
To use cloud models, click Settings in the toolbar and enter your API key:
- Claude -- get a key at console.anthropic.com (Opus 4.8, Sonnet 5, Haiku 4.5)
- Google Gemini -- get a key at aistudio.google.com (Gemini 3.5 Flash, 3.1 Pro)
- OpenAI -- get a key at platform.openai.com
- Together AI -- get a key at api.together.ai
- OpenRouter -- get a key at openrouter.ai
src/
components/ React components
Chat/ Chat interface (panel, messages, input, plan/build toggle)
KnowledgeBase/ KB panel, tool/story cards, network feed
ui/ shadcn/ui primitives
providers/ LLM provider abstraction (Claude, Gemini, OpenAI, Together, OpenRouter, RTP)
store/ Zustand stores (provider, chat, project, github, deploy, env, knowledge, auth, cloud)
project/ Virtual file system, code extractor, export, deploy, GitHub API, share preview
knowledge/ Supabase client (RTS Studio KB, read-only), RTP principles, context builder
cloud/ Builder backend client, auto-save + realtime sync
integrations/ Service catalog (Supabase, Neon, Resend, Firecrawl)
supabase/
functions/llm-proxy Edge function routing model calls server-side
migrations/ Builder backend schema (accounts, projects, collaboration)
Sign in with an email magic link (no passwords) to save projects to the cloud. From the Projects dialog you can invite a collaborator by email — when they sign in with that address the project appears in their list, and edits sync live between everyone via Supabase Realtime (last save wins per project). Everything still works signed-out in local-only mode.
Setting up the backend takes about five minutes — see DEPLOY.md.
Click GitHub in the toolbar to connect a repository:
- Enter a GitHub Personal Access Token with
reposcope - Select an existing repo or create a new one (auto-adds the
relational-techtopic) - Push -- commits all project files to the repo as a single atomic commit
- Pull -- fetches all files from the repo into the builder
Tokens are saved to localStorage. The sync uses GitHub's Git Data API for atomic multi-file commits (blobs → tree → commit → ref update).
When your project is ready to share, click Publish in the toolbar. You have three options:
- Download -- get a zip file with all project files, a
.reltech.ymlmanifest, and a README - Netlify -- deploy directly to Netlify with a personal access token (get one here)
- Vercel -- deploy directly to Vercel with an access token (get one here)
Both Netlify and Vercel deploys support custom domains — enter your domain (e.g. myapp.ourneighborhood.org) and the builder will register it with the platform and show you the DNS records to add at your registrar. SSL is automatic.
To join the relational tech network, push your code to GitHub and add the relational-tech topic. The network watcher scans for this topic twice daily and your project will appear on updates.relationaltechproject.org.
Click Share in the toolbar to generate a preview link powered by CodeSandbox. You get two URLs:
- Preview link (
{id}.csb.app) -- a clean, neighbor-friendly URL showing just the running app. No signup, no code, no IDE. Share this via text or email. - Editor link (
codesandbox.io/s/{id}) -- the full CodeSandbox IDE for developers who want to view or remix the code.
Public environment variables are included in shared previews. Secret variables are never shared.
The Env tab in the right panel lets you manage API keys and config:
- Public vars (e.g.
SUPABASE_URL,SUPABASE_ANON_KEY) -- injected into the live preview and shared CodeSandbox links. Safe for client-side use (protected by RLS). - Secret vars (e.g.
RESEND_API_KEY, Supabase service role key) -- stored locally, shown masked in the UI, and only sent to deploy platforms as environment variables. Never included in previews or shared links.
Generated code imports env vars from an auto-generated module: import { env } from "./env". The AI knows about this system and will tell you which variables to add.
The AI recommends these services when your project needs backend or integrations:
| Need | Service | Why |
|---|---|---|
| Database & Auth | Supabase | Postgres, auth, storage, realtime. Free tier. |
| Resend | Simple transactional email API. | |
| SMS & Messaging | Twilio | SMS, voice, WhatsApp for community notifications. |
| Web Scraping | Firecrawl | Scrape community calendars and websites. |
| Hosting | Netlify / Vercel | Static sites and serverless functions. |
These are woven into the AI's system prompt so it generates code with the right integrations.
- RTS Studio -- the knowledge base and community platform
- Relational Tech Watcher -- the network activity feed
- Relational Technology Project -- the parent organization
MIT