How to Use GitHub Replica: The Beginner's Guide (First Prototype, the Design-System Lesson, the Canvas Arc, and the No-Windows Rule)
CodexFuse Team · 2026-11-02T07:53:18.044Z · 11 min read min read
Learn how to use GitHub Replica, GitHub's open-source AI prototyping tool: install the Copilot canvas plugin, guide it with your design system via /setup-skills, build your first prototype, and publish with self-hosted Replica Hub.
Learning how to use GitHub Replica starts with one sentence: Replica is GitHub's open-source AI prototyping tool, and its whole point is that your clickable prototypes are generated from YOUR design system — your components, your patterns, your docs — not from generic UI guesses. One word of orientation, because the search results are full of noise: this is not the GitHub Enterprise "high availability replica" (database failover) that owns most of page 1 for the word "replica" — it is a Copilot canvas experience where you describe a screen in plain language and get a running prototype beside your conversation. If you are new to GitHub's ecosystem, my GitHub beginner guide covers the account, repo, and Copilot basics this tutorial leans on.
Two quick facts, verified against today's sources. Replica was announced on the GitHub Changelog on October 28, 2026, and created by GitHub Design with Microsoft CoreAI Design — it is MIT-licensed open source, and the tool itself is free. The repository (github.com/github/replica) was created October 15 and stood at 132 stars and 72 commits when I checked on November 2, 2026 — those numbers move, the workflow below is what this guide pins down.
What Is GitHub Replica, Exactly?
GitHub Replica is an AI-powered prototyping tool that turns ideas into interactive prototypes using your own design system. The GitHub Changelog announcement of October 28, 2026 says it verbatim: "We're open sourcing Replica, an AI-powered prototyping tool created by GitHub Design that helps anyone on your product team turn ideas into interactive prototypes using your own design system." The README adds the mechanism: "Designers define the guidance using your team's components, patterns, and documentation." Designers set the rules once; then anyone — designers, engineers, PMs — describes changes in plain language and gets a real, clickable prototype. That "anyone on your product team" framing is the whole bet: prototyping is no longer the design team's private lane.
The four components, verified against the README's "What's included" section: Starters (the project scaffolds you install first), the Replica plugin (adds the Replica canvas to Copilot, showing the running prototype beside the conversation), Replica Hub (optional, for publishing and reviewing prototypes with your team), and the GitHub build action (builds prototypes for publishing to Hub — "It is not needed for local prototyping." Say that once, because skipping it is what makes the first-run fast.)
What Do You Need Before You Install It?
The official local-prototyping docs give a short, exact prereqs list — settle these before you start and the install is uneventful. Nothing here is surprising, which is exactly the point: Replica runs inside the tools you already have.
| Requirement | Why it matters | How to check |
|---|---|---|
| GitHub Copilot app, installed and signed in | Replica lives inside Copilot's canvas — there is no standalone Replica app | Copilot opens and you are signed in |
Git, with user.name and user.email set | Starters install as git-backed repos; commits need an identity | git config user.name and git config user.email; see my Git beginner guide if either is empty |
Node.js + npm, matching engines.node | The prototype app runs on your local Node | node -v and npm -v |
| Bash, curl, tar | The starter install script needs them | macOS and Linux ship all three |
| lsof | The canvas finds your local dev server's port through it | command -v lsof |
| macOS or Linux | Exact docs wording: "macOS or Linux, the supported systems for local canvas previews" | uname |
One honest note on the list: a secondary explainer claims Replica also needs the GitHub CLI, but the official docs I read today list only Git, Node.js/npm, the Copilot app, and lsof — so the table above is the documented list, and nothing else.
How Do You Make Your First Prototype?
The full first-prototype arc, from zero to a clickable screen in the canvas, in seven steps:
- Install a starter: run
curl -fLSs https://raw.githubusercontent.com/github/replica/main/scripts/install-starter.sh -o install-starter.sh, thenbash install-starter.sh --listto see the starters, thenbash install-starter.sh --starter minimal my-prototype. There are two starters — the table below picks one for you. - Know the two starters: Minimal is a bare scaffold — the fastest first prototype, and the one this guide assumes. CoreAI Sandbox is a full Microsoft CoreAI design-system app — for testing Replica against a real design system.
- Install the GitHub Replica Copilot plugin: add the plugin marketplace, then the plugin itself — the official docs give the commands verbatim —
copilot plugin marketplace add github/replica, thencopilot plugin install replica-prototype@replica. - Flip BOTH switches: open the starter folder in Copilot, go to Customize → Installed, and enable the
replica-prototypeplugin AND its canvas extension — two separate toggles. Missing one is the #1 first-run failure. - Open a fresh Copilot session, click +, choose Canvas, then Replica prototype.
- Start the dev server: ask Copilot "Run this repository's app locally and show it in the Replica canvas." Then click Connect beside the app's server — or Start dev server if it is not running yet.
- Describe your first screen in plain language — "a settings page with a dark-mode toggle and a save button" — and watch the running prototype appear beside the conversation.
| Starter | What it is | Choose it when |
|---|---|---|
| Minimal | Bare scaffold | You want the fastest first prototype and to learn the loop |
| CoreAI Sandbox | Full Microsoft CoreAI design-system app | You want to test Replica against a real, opinionated design system |
The Design-System Lesson: Why /setup-skills Is the Whole Point
Here is the Replica prototype design system lesson that separates a GitHub Replica tutorial from a generic AI-UI-generator tutorial: out of the box, Replica builds from generic patterns. To make it build from YOUR design system, you run /setup-skills in the Copilot conversation. Say it once — this is the entire difference between Replica and the Lovable/Bolt/v0 lane.
The documented flow: supply your product documentation, your design-system docs, and your component packages; Copilot drafts the guidance instructions; your team reviews the draft; then there is a separate approval to apply it. That two-step — draft, then explicitly approve — matters: the guidance that will steer every future prototype gets human review before it goes live.
| GitHub Replica | Generic prompt-to-app tools (Lovable, Bolt, v0) | |
|---|---|---|
| What it generates from | Your components, patterns, and docs via /setup-skills | The model's imagination of what a UI looks like |
| Where it lives | Inside GitHub Copilot's canvas, beside your conversation | Standalone web apps |
| Output | A running prototype of your design system's components | A plausible-looking mockup in nobody's design language |
| Openness | MIT open source; self-hostable Replica Hub | Hosted SaaS |
The line, drawn once: Lovable, Bolt, and v0 are the third-party prompt-to-app lane — Replica is the GitHub-native, design-system-constrained lane. Never rivals of this guide; this page covers Replica only.
How Do You Iterate in the Canvas?
Iteration is the quiet payoff of the canvas model. The running prototype sits beside the conversation, so you keep describing refinements in plain language — "move the toggle next to the label, make the save button orange, add a cancel link" — and each change renders against the same app. You are not regenerating a mockup from scratch each round; you are editing a live app with words. Because the /setup-skills guidance constrains every round to your components, the fifteenth iteration still looks like your product, not like drift.
How Do You Share Prototypes with Replica Hub?
Local prototyping gets you a working canvas; Replica Hub gets your team in the room. The Hub lesson in one paragraph: GitHub does not host your Hub. You self-host it, and publishing prototypes to it uses the GitHub build action that local prototyping skips.
The documented requirements (from prototype-environment.md): a Linux server with Docker and Docker Compose, a dedicated domain with wildcard DNS plus HTTPS, network access for your reviewers, a GitHub App installation, and the Replica build action wired up. If you do not have a server yet, what is VPS hosting explains the kind of machine these guides assume, and my Docker beginner guide covers the container half of the Hub's requirements.
Two honest details, said once each. First, Hub records publishing and review activity in its own database, retained 90 days, with optional export to Segment, Mixpanel, or a custom HTTPS endpoint — and the docs are blunt that "using a self-hosted Hub does not mean that no data leaves your organization." Second, viewing and reviewing prototypes in Hub does not require a Copilot subscription — only the people building prototypes in Copilot need one (or the own-model-provider path below).
The No-Windows Rule
Say it once, early, and never bury it: Replica's local canvas previews run on macOS or Linux only — that is the official docs' exact wording ("macOS or Linux, the supported systems for local canvas previews"). The docs carry no Windows mention, no WSL note, and no planned-support note. That is absence of evidence, not evidence of absence — do not read a roadmap promise into it, and do not let anyone tell you the docs promise one.
What About the Model? Do You Need a Copilot Plan?
Replica itself is free — MIT license, self-hostable. The model question has two documented answers. The standard path uses GitHub-hosted models through a Copilot plan. The second path — connecting your own model provider with no Copilot plan at all — is in public preview and subject to change, with provider costs and terms applying. If you are evaluating Replica for a team that refuses another seat license, that preview path is the one to watch — but plan for its terms to move.
7 Mistakes Beginners Make with GitHub Replica
| Mistake | Why it hurts | The fix |
|---|---|---|
Skipping /setup-skills | You get a generic prototype — the very thing Replica exists to prevent | Run /setup-skills first; review the draft; approve it separately |
| Enabling only one of the two toggles | The Canvas → Replica prototype option never appears | Enable BOTH replica-prototype and its canvas extension under Customize → Installed |
| Trying it on Windows | Local canvas previews are unsupported | Use macOS or Linux — the docs' exact supported list |
| Reading the HA "replica" docs by mistake | You configure database failover for a prototyping tool | This is github.com/github/replica — the AI prototyping tool, not Enterprise replication |
| Adding the build action for local prototyping | Wasted config for a step you do not need yet | The build action is for Hub publishing only: "It is not needed for local prototyping" |
| Describing screens before starting the dev server | Copilot has nothing to show in the canvas | First: "Run this repository's app locally and show it in the Replica canvas" — then Connect |
| Expecting GitHub to host your Hub | Nobody can review your prototypes — there is nowhere to publish | Self-host Hub on your own Linux server, domain, and wildcard DNS |
Sources
- GitHub Changelog — Introducing Replica (October 28, 2026) (announcement; the "anyone on your product team" quote)
- github.com/github/replica — README (four components, MIT license, design-system guidance, 132 stars / 72 commits snapshot November 2, 2026)
- Replica docs — local-prototyping.md (install commands verbatim, prereqs, macOS-or-Linux wording, first-prototype flow, starters)
- Replica docs — prototype-environment.md (Replica Hub requirements, 90-day retention, export options, own-model-provider preview)
- How2Shout — GitHub's New AI Prototyping Tool (October 30, 2026) (launch explainer; the no-Windows angle)
- Medium — "Replica: When Your Design System Becomes the Prompt" (October 2026) (designers-set-guidance explainer, self-hosted Hub publishing)
- C# Corner — Building Interactive UI Prototypes with GitHub Replica (four-component breakdown explainer)
Frequently Asked Questions
Is there a GitHub Replica Windows version?
No — for local canvas previews, the official docs list only "macOS or Linux, the supported systems." There is no Windows mention, no WSL note, and no planned-support note in the official docs as of November 2, 2026. Do not assume a Windows version is coming.
Is GitHub Replica free?
Yes — it is MIT-licensed open source, and the tool itself is free to use and self-host. You pay only for model access: GitHub-hosted models go through a Copilot plan, or you can connect your own model provider (that path is in public preview and subject to change, with the provider's own costs applying).
Do reviewers need a Copilot subscription to look at prototypes?
No. Viewing and reviewing prototypes in a self-hosted Replica Hub does not require a Copilot subscription — only the people building prototypes inside Copilot need one (or the own-model-provider path).
How is GitHub Replica different from Lovable, Bolt, or v0?
Those are the third-party prompt-to-app lane: you describe an app and get a plausible-looking UI in nobody's design language. Replica is GitHub-native and design-system-constrained — /setup-skills points it at your components, patterns, and docs, so every prototype it builds looks and behaves like your actual product. It also lives inside the Copilot canvas you already work in, and it is MIT open source.
How long does Replica Hub keep my prototypes' activity data?
Hub records publishing and review activity in its own database, retained for 90 days, with optional export to Segment, Mixpanel, or a custom HTTPS endpoint. And the honest line from the docs, once: "using a self-hosted Hub does not mean that no data leaves your organization."
