Turn your app idea into a real app with sign-in, without writing any code yourself

You'll need three things ready. Setting them up takes about 10 minutes.

1. A GitHub account. Any personal account works (sign up).
2. Devin Pro, activated with your event coupon. Sign up at app.devin.ai, open Settings → Plans, pick Pro, and enter the coupon code you received from the organizer at checkout.
3. GitHub connected to Devin. Go to Settings → Connections → GitHub, click Add Connection, and pick your personal GitHub account. When GitHub asks which repositories Devin can access, choose All repositories. That saves a step later.

You don't need a Clerk account. Devin will create a temporary development app that you can claim at the end.

The template is a small Next.js app shell with placeholder branding. The landing page is public, and there's a /dashboard "Coming soon" page that's meant to be for members only but isn't protected yet. You'll fork it so Devin can work on your own copy.

1. Choose your personal account as the Owner and keep the name devin-clerk.
2. Untick "Copy the main branch only". That brings the solution branch along, which is handy if you fall behind.
3. Click Create fork.

1. Go to the Devin home page and start a new Agent session.
2. Open the repository selector: click + under the message box, then Repositories, and choose <you>/devin-clerk.

   

   My fork isn't in the list

   Devin can only see repositories that its GitHub app is allowed to access. You probably chose "Only select repositories" when you connected GitHub.

   1. On GitHub, open Settings → Applications → Installed GitHub Apps and click Configure next to the Devin app.
   2. Under Repository access, choose All repositories or add devin-clerk, then click Save.
   3. Reload Devin and open the selector again. It can take a minute for the list to update.

   If you forked into a GitHub organization instead of your personal account, the Devin app must also be installed on that organization. In Devin, open Settings → Connections → GitHub, click Add Connection and pick the organization.

3. Keep the tab open. You'll paste the first prompt in the next step.

First, tell us about the app you want to build. It can be a side project, something for work, or just for fun. One sentence is plenty. Devin will use it to brand the app and to suggest the features for your Coming soon page.

Then ask Devin for a plan, not code. You'll review it and steer it before anything gets built.

Repository: {{repo}}

My app idea is "{{app}}": {{desc}}

Turn this starter into the first version of my app, with sign-in by Clerk. This message is for planning only: reply with a plan and then stop. Don't edit files, install packages or run the Clerk CLI until I reply with "approved".

Requirements:
- Brand it: put my app's name and description in app.config.ts and pick an emoji and accent color that fit.
- Set up Clerk with the Clerk CLI in accountless mode, following the rules in AGENTS.md. I don't have Clerk keys.
- Signed-out visitors see "Sign in" and "Sign up" buttons in the header. Signed-in users see their avatar menu instead.
- The landing page (/) stays public and pitches my app.
- /dashboard requires sign-in and is a "Coming soon" page: greet the user by first name (or the start of their email if they have no name) and list 4–6 features to build next, based on my description.
- /api/roadmap returns a 401 JSON error when signed out.

In the plan, list the features you'd put on the Coming soon page, the files you'll change, how you'll protect routes, and how you'll check that it works. Keep it short, and end by asking me to approve it.

Review the plan

When Devin replies, check that the plan:

• lists 4–6 Coming soon features that make sense for your app,
• runs npx -y clerk@latest init instead of asking you for keys,
• protects /dashboard (in proxy.ts or on the page) and /api/roadmap, and leaves / public,
• says how it will verify the result (lint, build, trying it in a browser).

Then reply with one change of your own. For example:

Not approved yet. Update the plan with two changes: swap feature 3 for "<a feature you want>", and style the Clerk sign-in and sign-up components with the accent color from app.config.ts.

Reply with the full updated plan only. Don't edit files, install anything or run commands yet. I'll reply "approved" when it's ready to build.

The plan is approved, go ahead and implement it. When you're done:
1. Run lint, typecheck and build, and fix any errors.
2. Start the dev server, run `npm run share` and send me the public https://…trycloudflare.com link it prints. Don't use the built-in browser preview: Clerk sign-in doesn't work there.
3. Check the signed-out behavior at that link yourself. I'll do the sign-up test in my own browser, so don't try to sign up.
4. Open a pull request with a short description.
Don't commit .env.local or the .clerk folder.

This usually takes 5–10 minutes. While you wait, follow along in the session timeline and watch Devin run the Clerk CLI, edit files and run checks.

Try it in your browser

1. Open the https://…trycloudflare.com link Devin sends in a normal browser tab. It's public while your session runs, so keep it to yourself. You should see your app's name, emoji and description, with Sign in and Sign up in the header.
2. Click Sign up and use a test email with +clerk_test in it, like yourname+clerk_test@example.com. When Clerk asks for a verification code, enter 424242. No real email gets sent.
3. You should land on the Coming soon page (/dashboard): it greets you, lists the features Devin proposed, and your avatar is in the header.
4. Sign out from the avatar menu and open /dashboard again. You should be sent to the sign-in page.
5. Open the pull request Devin created on your fork and skim the diff. Look for proxy.ts, the ClerkProvider in app/layout.tsx, and the new sign-in and sign-up pages.

The app Devin set up lives in a temporary Clerk account. Claim it into your own free Clerk account so it keeps working after today and you can change its settings, starting with the password rule: temporary apps can ask for a long password.

Help me claim my Clerk app: run `npx -y clerk@latest open --print` and send me the claim link it prints. Only send it to me here: don't put it in any file, commit or PR.

1. Open the claim link and sign in to Clerk, or create a free account. Claim the app when Clerk asks.
2. Clerk then shows Set your environment variables with two keys and says it's waiting for you to paste them. You don't need to: Devin already put these same keys in .env.local during setup. Click Otherwise skip. Your running app keeps working at the same link. Don't paste the keys into Devin's chat or anywhere else: the secret key works like a password.
3. In the Clerk Dashboard, go to User & authentication → Password → Update password requirements and set the minimum length to 8, the lowest Clerk allows.
4. Still under User & authentication, turn on collecting first and last name at sign-up, so your Coming soon page can greet new users by name.
5. Open Users in the dashboard: the account you signed up with in step 4 is there.
6. Sign out at your link and sign up again with a new +clerk_test email. The form now asks for a name and accepts an 8-character password.

Your Coming soon page is your roadmap: every feature on it is a ready-made next prompt. Your Devin Pro plan keeps working after today, so pick one tonight:

Repository: {{repo}}

Let's build the next feature of {{app}}. Pick the first entry in upcomingFeatures in app.config.ts and write a short plan for it. Don't change any code until I approve it. Once it's built: remove it from the Coming soon list, link to it from the header, share a public link with npm run share and open a PR.

• More sign-in options. In your Clerk Dashboard, turn on GitHub or other social sign-in, or passwordless email codes.
• Merge your PR on your fork once you're happy with it.
• Deploy it. Ask Devin: "Walk me through deploying this app to Vercel with my Clerk keys set as environment variables."
• Speed up future sessions. Ask Devin: "Set up your environment for this repository." and approve the suggestion. New sessions then start with dependencies already installed.
• Learn more: Clerk docs · Devin docs.

More ideas to try

Send any of these in your workshop session, or in a new session with your fork selected.

Make the landing page sell my app better: a short headline, three benefit bullets based on the description in app.config.ts, and a "Get early access" button that opens sign-up for signed-out visitors and goes to /dashboard for signed-in users. Push to the same PR and share a public link with npm run share.

Redesign the /sign-in and /sign-up pages with a two-column layout: my app's name, emoji and description from app.config.ts on the left, the Clerk component on the right. Stack them on mobile. Push to the same PR and share a public link with npm run share.

On the Coming soon page, let signed-in users upvote the features they want most. Store votes by Clerk user ID (in memory is fine), allow one vote per user per feature, and sort features by votes. Push to the same PR and share a public link with npm run share.

Add a /profile page that only signed-in users can open, using Clerk's UserProfile component, and link to it from the header. Push to the same PR and share a public link with npm run share.

Enable Clerk Organizations with the Clerk CLI and add an OrganizationSwitcher to the header. Show the active organization's name on the Coming soon page, or "Personal" when none is selected. Push to the same PR and share a public link with npm run share.