> ## Documentation Index
> Fetch the complete documentation index at: https://wonder.design/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Bring your code onto the canvas

> Connect a GitHub repository to design with your real components, tokens, icons, and views.

Connect a GitHub repository and your codebase becomes something you can design with. Wonder reads your real components, tokens, icons, and views and brings them onto the canvas.

![Prompting Wonder AI to bring reporting and register pages from a connected repository onto the canvas](https://mintcdn.com/wonder-0722b0f6/txvZZNRKXPPmeY_S/images/from-your-codebase/cover.webp?fit=max\&auto=format\&n=txvZZNRKXPPmeY_S\&q=85\&s=13f7fb73c00b060ce66ca90c964e482f)

## Bring designs onto the canvas

1. Open a Wonder file.
2. Connect your GitHub repository.
3. Ask Wonder AI to bring the screen or design you want onto the canvas.

> [!NOTE]
>
> **The first prompt can take a little longer**\\
>
> When you first connect a repository, Wonder imports your variables, so it has the context to produce accurate results. Because of that, your first prompt after connecting can take slightly longer and consume more tokens.

Besides connecting a GitHub repository via the Wonder app, you can also use the Wonder MCP to connect to your codebase:

> [card] [MCP](https://wonder.design/docs/wonder-mcp.md)
>
> Connect your coding agent to read and write the canvas.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.