Generate a brand-new site
Describe the website in plain language and Kite builds it from nothing. No repository, no GitHub account, no setup.
No GitHub neededCaptured live from staging.kite.ai · every step is a real screen
Bring a website into Kite.
Three doors in. One Next.js gate.
This is the actual product, not a sketch. A user lands on their Kite dashboard and starts a website three ways — from scratch, by importing an existing GitHub repo, or by creating a fresh repo in GitHub. Importing real code requires the Kite GitHub App to be connected; once it is, Kite resolves the repo by name, confirms before replacing anything, and pulls it in from main. Two guardrails protect the user: Kite only imports Next.js projects, and it surfaces any required environment variables before the site can run. Every screen below is captured from the live staging build.
3
Ways to start
a website
a website
1
GitHub App
to connect
to connect
Next.js
Only stack
imported
imported
2-way
Sync · push
& pull on main
& pull on main
i
If you only read one thing
Kite lets people build and edit websites with AI. To work on a website that already lives on GitHub, Kite first needs permission to read that repo (a one-time GitHub connection). The user just names the repo in chat; Kite finds it, asks for a yes before overwriting anything, and pulls it in. The single firm rule: Kite only imports Next.js projects — anything else is politely refused, with the original site left untouched.
The whole journey · on one screen
Five steps, one decision.
Before the detail, here's the entire path at a glance. Read it top to bottom: the user picks a door, connects GitHub if needed, Kite finds and confirms the repo, the Next.js check decides the outcome, and a passing repo goes live and stays in sync.
read top
↓ to bottom
↓ to bottom
1 · StartPick a door
From scratchno GitHub
Import from GitHubexisting repo
Create in GitHubbrand-new repo
2 · ConnectGitHub doors only
Install Kite GitHub Appyou choose the scope
→
Connected to the orgrevocable anytime
3 · Find itKite resolves the repo
Name it in chat"import from test_1"
→
Kite finds the matchappsmithorg/test_1
→
Confirm before replacingyes / no
4 · The gateNext.js or nothing
◇ Is it a Next.js project?the one hard check
→
✓ PASS — continue below
✗ NO — refused, original site kept, pick another repo
5 · Go liveAfter a pass
Import from main
→
Add any secretse.g. NAME
→
Live preview
→
Two-way syncpush & pull on main
The entry · one menu, three doors
"Start something new."
From the dashboard, a single button opens three real choices. Two of them touch GitHub; one never does. Which door the user picks decides whether they ever see a repository at all.
1 no-Git path
2 GitHub paths
2 GitHub paths
staging.kite.ai/ · Your websites
Pull in an existing repo
Pick a repository the Kite GitHub App can access and Kite imports its code into a new website. The path this page documents end-to-end.
Requires GitHub AppNew repo, owned by the user
Kite creates a fresh GitHub repository and a website linked to it, then generates the site afterwards — so it lives in the user's own GitHub from day one.
Requires GitHub AppThe two GitHub doors, up close
Import an existing repo, or mint a new one.
Both GitHub paths start the same way — they need the Kite GitHub App to have access. If it doesn't, each modal routes the user straight to Configure GitHub App.
staging.kite.ai/ · Import from GitHub
Import from GitHub
“Pick a repository the Kite GitHub App can access. We'll import its code into a new website.” The user searches their repos and selects one.
When no repos load, Kite is explicit about why: “Make sure your GitHub account is connected, then use Configure GitHub App to grant access.” Access is never assumed — it's requested.
Create new in GitHub
“We'll create a new GitHub repository and a website linked to it. You can generate the site afterwards.”
The user names the repo — e.g. my-website — and Kite provisions both the repository and the linked Kite app in one step. The same Configure GitHub App affordance sits inline for users who haven't connected yet.
staging.kite.ai/ · Create new in GitHub
The end-to-end import · captured step by step
From a chat message to a live, synced site.
This is the real sequence a user walks through when importing an existing repo from inside an app. Connect → resolve → confirm → import → configure → sync. Click any screen to enlarge.
9 screens
1 hard gate
1 hard gate
1
In-chat · import
Ask Kite to import — right in the chat
The user doesn't have to leave the conversation. Typing import from test_1 kicks off the import. Kite checks the path immediately — but it can't pull code it isn't allowed to see yet.
Kite“I'm checking that repo import path now so I can bring the site in cleanly. I can import that repo, but your GitHub account is not connected here yet. Please connect GitHub in Settings, then send me ‘import from test_1’ again and I'll take it from there.”
staging.kite.ai/app-details/…/design · Next.js
2
Integrations · connect
Connect GitHub from Integrations
On the Integrations page, GitHub sits at the top of the catalogue — “Connect your GitHub account for repository access.” One click on Connect starts the GitHub App install.
staging.kite.ai/integrations
3
github.com · install
Install the Kite GitHub App with scoped permissions
The user is handed off to GitHub to install Kite Github App on their organization (here, Appsmith). They choose All repositories or Only select repositories — access is theirs to scope, repo by repo if they want.
READ metadata
READ + WRITE code
READ + WRITE workflows
READ + WRITE administration
READ + WRITE artifact metadata
github.com/apps/kite-github-app-staging/installations/new
4
Integrations · connected
GitHub is connected
Back in Kite, GitHub now reads “Connected as appsmithorg” with a Disconnect control. The credential the user gave Kite is the GitHub App installation itself — scoped, revocable, and visible at any time.
staging.kite.ai/integrations · Connected
5
In-chat · resolve + confirm
Kite resolves the repo by name and asks before replacing
The user retries (“try now”). This time Kite automatically determines whether the repo exists and finds it: “I found one match: appsmithorg/test_1.” Because importing replaces the current site, Kite never does it silently — it presents an explicit confirmation with Yes, import it / No, keep current site.
Kite“I'm trying the repo import again now and checking whether GitHub is connected. I found one match: appsmithorg/test_1. Importing it will replace the current site in this app.”
staging.kite.ai/app-details/…/design
6
In-chat · import + env varImport from
Import from main — and flag what the repo needs to run
On confirmation, Kite imports appsmithorg/test_1 from the main branch and replaces the current site. It then reads the project and tells the user exactly what's missing before anything will work: one environment variable, NAME. The live preview begins loading in parallel.
Kite“Imported appsmithorg/test_1 from the main branch and replaced the current site in this app. This repo needs one environment variable before everything can work properly: NAME. You can add it in the app's environment variable settings, then I can help you check the site or make edits.”
staging.kite.ai/app-details/…/preview · Main
7
Secrets · credentials
Add the credential in the Secret vault
The required value lives in Kite's Secret vault — backed by backend/.env. The user adds NAME as a key, sets its value, and the imported site has what it needs to run. Secrets are masked, copyable, and deletable per row.
staging.kite.ai/app-details/…/secrets
8
Settings · repository
The repo is linked — and sync runs both ways
In Settings → Repository, the website is now bound to appsmithorg/test_1 on branch main. From here the link is fully two-way: Sync to GitHub pushes Kite's edits out as commits, Pull brings GitHub changes back in, and Change repository / Disconnect keep the user in control.
staging.kite.ai/app-details/…/settings
The rest of the surface · same screens, more doors
The import is one flow. The app keeps going.
Everything above ends the moment the repo is linked and syncing. But the very same screens carry a few more flows this walkthrough deliberately stepped past — each one visible in the captures already on this page.
3 flows
not walked here
not walked here
A · Ship it
Publish & Share
Every app screen carries Publish and Share in the top bar. Once the imported site runs, Publish takes it live and Share hands out access — the "go live" the journey map points at.
B · Edit from Slack
Route a Slack channel to the site
The Settings screen above (step 8) also holds Slack Integration — “route one or more channels to this website so your team can edit from Slack threads.” See the Slack demo →
C · Branch & unlink
Change repo, switch branch, delete
Alongside sync sit the Main branch selector, Change repository and Disconnect, plus a Danger zone that permanently deletes the website — the controls that keep the user in charge of the link.
The guardrail · the one hard stop
Kite imports Next.js — and only Next.js.
The import path is deliberately narrow. If the resolved repository isn't a Next.js project, Kite refuses the import outright and says so plainly — after confirming, but before touching the current site. No half-imported, broken state.
!
In-chat · rejected
“This is not a Next.js project.”
A user asks to import gallery. Kite first disambiguates the intent (“‘Import gallery' could mean a couple of different things, so I want to point us at the right door first”), then resolves the repo to appsmithorg/kite-gallery and confirms. On import, the stack check fails — and Kite stops, cleanly, without replacing the existing site.
Kite“I can't import that repo because it is not a Next.js project, and imports here only support Next.js repos. If you want, I can help you find a different repo to import.”
staging.kite.ai/app-details/…/design · Next.js
Why it matters
A narrow, enforced contract — Next.js only — is what lets Kite promise a clean import every time. The check runs at the last safe moment: the current site is preserved, the user gets a precise reason, and Kite immediately offers the next move. Predictable failure is a feature, not a gap.
How to read the import
Three things make the import feel effortless.
The same engine powers every entry door. What the user experiences as “it just worked” is really three behaviours stacked together.
01 · Conversational
Import from the chat
No forms to hunt for. The user types import from test_1 and Kite drives the rest from inside the conversation — including telling them what's blocking it.
02 · Connected & credentialed
Access is explicit
Real code needs the GitHub App connected and any required secrets (like NAME) supplied. Kite asks for exactly what it needs, when it needs it — never more.
03 · Auto-resolved
Kite finds the repo for you
Given a name, Kite determines whether the repo exists, reports the match (appsmithorg/test_1), and confirms before replacing anything irreversible.