feat: new onboarding experience

[jog1t]

No description provided.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
rivet-inspector	Ready	Preview	Comment	Dec 4, 2025 10:32pm
rivetkit-serverless	Ready	Preview	Comment	Dec 4, 2025 10:32pm

2 Skipped Deployments

Project	Deployment	Preview	Comments	Updated (UTC)
rivet-cloud	Ignored			Dec 4, 2025 10:32pm
rivet-site	Ignored	Preview		Dec 4, 2025 10:32pm

[jog1t]

• feat: new onboarding experience #3561 👈 (View in Graphite)
• main

---

How to use the Graphite Merge Queue

Add the label merge-queue to this PR to add it to the merge queue.

You must have a Graphite account in order to use the merge queue. Sign up using this link.

An organization admin has enabled the Graphite Merge Queue in this repository.

Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.

This stack of pull requests is managed by Graphite. Learn more about stacking.

[graphite-app]

Graphite Automations

"Test" took an action on this PR • (12/01/25)

1 assignee was added to this PR based on Kacper Wojciechowski's automation.

[pkg-pr-new]

More templates

• example-ai-agent
• example-ai-and-user-generated-actors-freestyle
• chat-room
• example-cloudflare-workers
• example-cloudflare-workers-hono
• example-cloudflare-workers-inline-client
• example-counter
• example-counter-next-js
• example-counter-serverless
• example-cursors
• example-cursors-raw-websocket
• example-deno
• example-sqlite
• example-elysia
• example-express
• example-hono
• example-hono-bun
• example-hono-react
• example-kitchen-sink
• example-next-js
• quickstart-actions
• quickstart-cross-actor-actions
• quickstart-multi-region
• quickstart-raw-websockets
• quickstart-realtime
• quickstart-scheduling
• quickstart-state
• example-raw-fetch-handler
• example-raw-websocket-handler
• example-raw-websocket-handler-proxy
• example-react
• starter
• example-stream
• example-trpc

@rivetkit/cloudflare-workers

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/cloudflare-workers@3561

@rivetkit/db

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/db@3561

@rivetkit/framework-base

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/framework-base@3561

@rivetkit/next-js

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/next-js@3561

@rivetkit/react

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/react@3561

rivetkit

pnpm add https://pkg.pr.new/rivet-dev/rivet/rivetkit@3561

@rivetkit/sql-loader

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/sql-loader@3561

@rivetkit/engine-runner

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/engine-runner@3561

@rivetkit/engine-runner-protocol

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/engine-runner-protocol@3561

commit: a0da170

[claude]

PR Review: New Onboarding Experience

Thank you for this contribution! I've reviewed the PR and have the following feedback:

🎯 Overview

This PR refactors the onboarding experience by extracting the large inline connect UI into reusable components. The changes improve code organization and maintainability.

---

✅ Strengths

1. Good Code Organization: Extracting the massive inline UI from connect.tsx (195 lines removed) into separate components significantly improves readability
2. Proper Refactoring: The provider prop threading to ConnectManualServerlessFrameContent is a clean approach
3. Type Safety: Using TypeScript's as const for the PROVIDERS array and extracting the Provider type is excellent

---

🐛 Issues Found

1. Interface Naming Mismatch (start-with-template-frame.tsx:13)

interface ConnectAwsFrameContentProps extends DialogContentProps {
    template: string;
}

The interface is named ConnectAwsFrameContentProps but is used for StartWithTemplateFrame. This is misleading.

Fix:

interface StartWithTemplateFrameProps extends DialogContentProps {
    template: string;
}

2. Inconsistent Indentation (start-with-template-frame.tsx:27-33)

Lines 27-33 use spaces instead of tabs, violating the codebase's hard tab convention.

Fix: Replace leading spaces with tabs to match the existing code style.

3. Unused Template Parameter (start-with-template-frame.tsx:39)

The template prop is displayed in the UI but never actually used to filter or customize the template experience.

Consider: Either use the template parameter to customize the provider selection or remove it if not needed yet.

4. Non-Existent Modal Reference (getting-started.tsx:34)

search={{ modal: "connect-existing-project" }}

This modal name doesn't appear to be registered in the dialog system. I don't see a corresponding dialog handler in the modal routes.

Action Required: Verify this modal exists or update to use an existing modal name.

---

⚠️ Code Quality Concerns

5. Empty Div in Template Card (getting-started.tsx:83)

<div className="border-b min-h-40 w-full"></div>

This appears to be a placeholder for template images/previews. Consider adding a comment explaining this is intentional.

6. Duplicate Type Checking (template-providers.tsx:88)

{"type" in provider && provider.type === "1-click-deploy" && (

Using "type" in provider is necessary due to the union type, but this could be cleaner with a type guard function.

Suggestion:

const isOneClickDeploy = (provider: typeof PROVIDERS[number]['items'][number]): 
  provider is typeof PROVIDERS[number]['items'][number] & { type: '1-click-deploy' } => 
  'type' in provider && provider.type === '1-click-deploy';

// Then use:
{isOneClickDeploy(provider) && (
  <Badge variant="secondary">1-Click Deploy</Badge>
)}

7. Hardcoded Provider String (start-with-template-frame.tsx:27)

.with("cloudflare", () => <ConnectManualServerlessFrameContent provider="cloudflare-workers" onClose={onClose} />)

The provider slug is "cloudflare" but passes "cloudflare-workers" to the component. This inconsistency could cause confusion.

Recommendation: Either:

• Keep the slug and provider name consistent (both "cloudflare" or both "cloudflare-workers")
• Add a mapping object to make the transformation explicit

---

📦 Dependencies

8. New Dependency: unplugin-macros

Added unplugin-macros@^0.18.3 but I don't see it being used anywhere in the changed files.

Action Required: Either:

• Show where this is being used
• Remove if it was added by mistake
• Document why it's needed if it's for future use

---

🎨 Accessibility & UX

9. Link Accessibility (getting-started.tsx:44-48)

The external documentation link has proper rel="noopener noreferrer" - good security practice! ✅

10. Provider Button Semantics (template-providers.tsx:74-95)

Buttons with onClick handlers for navigation are semantically correct here since they modify local state before navigating.

---

🧪 Testing Considerations

Missing Test Coverage:

• No tests for the new GettingStarted component
• No tests for the TemplateProviders component
• No tests for the provider selection flow in StartWithTemplateFrame

Recommendation: Add tests to verify:

1. Template card rendering with correct links
2. Provider selection updates state correctly
3. Modal routing works for all provider types
4. The "connect-existing-project" modal exists and opens

---

🔒 Security

No security concerns identified. The code properly handles user input and doesn't introduce any obvious vulnerabilities.

---

⚡ Performance

No performance concerns. The component structure is straightforward with no obvious performance bottlenecks.

---

📝 Summary

Required Changes:

1. Fix the interface naming mismatch
2. Fix indentation to use hard tabs consistently
3. Verify/fix the "connect-existing-project" modal reference
4. Explain or remove the unplugin-macros dependency

Recommended Changes:

1. Use the template parameter or remove it
2. Add type guard for cleaner 1-click deploy checking
3. Standardize provider slug naming
4. Add test coverage for new components

The refactoring is solid overall - just needs these minor fixes before merging. Great work on improving code organization! 🚀

[NathanFlurry]

see linear