Skip to main content
Connect your GitHub repository to prototype directly with your existing code and design system. The AI understands your components, patterns, and architecture — so prototypes match your actual project.

​
Why Connect GitHub?

  • Use your real components — Prototype with your actual design system
  • Live previews — Share working previews with your team
  • AI understands your code — Reference files with @Codebase for better context
  • No commits — Prototypes stay separate until you copy the code yourself
21st never commits to your repository. Prototypes are for exploration and sharing — you decide what code to use in your project.

​
Setup

1

Open Team Settings

Navigate to Team Settings → Integrations
2

Enable GitHub

Click Enable in the GitHub card
3

Grant Access

Authorize access to your organization or personal account
4

Select Repository

Choose the repository you want to connect
5

Configure (if needed)

For monorepos, specify the path to your app (e.g., apps/web). Set up install and dev commands.
6

Wait for Setup

The repository will be cloned and your app started. This takes a couple of minutes.

​
Sharing Previews

Once connected, you can share live preview links with your team:
  • Get feedback fast — Stakeholders can try features before any code is merged
  • Client reviews — Let clients see prototypes without deployment
  • No staging needed — Preview any prototype instantly
Share previews to collect feedback, iterate on the prototype, and only copy the code when you’re happy with the result.

​
Using @Codebase

When working with a connected repository, type @Codebase in the chat to reference files. The AI will search through your codebase and use your existing patterns.

​
Getting Your Code

Prototypes are for exploration. When you’re ready to use the code:
  1. Copy the code directly from the editor
  2. Or copy the prompt to recreate it in your own environment
See Getting Your Code for all options.