feat(examples): add tanstack start example

[jog1t]

Description

Please include a summary of the changes and the related issue. Please also include relevant motivation and context.

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

How Has This Been Tested?

Please describe the tests that you ran to verify your changes.

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes

[railway-app]

🚅 Deployed to the rivet-pr-4095 environment in rivet-frontend

Service	Status	Web	Updated (UTC)
website	😴 Sleeping (View Logs)	Web	Feb 3, 2026 at 12:09 am
frontend-cloud	❌ Build Failed (View Logs)	Web	Feb 2, 2026 at 10:40 pm
frontend-inspector	❌ Build Failed (View Logs)	Web	Feb 2, 2026 at 10:40 pm
mcp-hub	✅ Success (View Logs)	Web	Feb 2, 2026 at 10:40 pm

[jog1t]

• feat(examples): add tanstack start on cloudflare example #4096
• feat(examples): add tanstack start example #4095 👈 (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 • (02/02/26)

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

[pkg-pr-new]

More templates

• actor-actions
• actor-actions-vercel
• example-ai-agent
• example-ai-agent-vercel
• example-ai-and-user-generated-actors-freestyle
• chat-room
• chat-room-vercel
• example-cloudflare-workers
• example-cloudflare-workers-hono
• cross-actor-actions
• cross-actor-actions-vercel
• example-cursors
• example-cursors-raw-websocket
• example-cursors-raw-websocket-vercel
• example-cursors-vercel
• custom-serverless
• custom-serverless-vercel
• example-sqlite
• example-elysia
• example-elysia-vercel
• example-experimental-durable-streams-ai-agent
• example-experimental-durable-streams-ai-agent-vercel
• hello-world
• hello-world-vercel
• example-hono
• hono-react
• hono-react-vercel
• example-hono-vercel
• example-kitchen-sink
• example-kitchen-sink-vercel
• multi-region
• multi-region-vercel
• native-websockets
• native-websockets-vercel
• next-js
• example-raw-fetch-handler
• example-raw-fetch-handler-vercel
• example-raw-websocket-handler
• example-raw-websocket-handler-proxy
• example-raw-websocket-handler-proxy-vercel
• example-raw-websocket-handler-vercel
• example-react
• example-react-vercel
• scheduling
• scheduling-vercel
• state
• state-vercel
• example-stream
• example-stream-vercel
• example-tanstack-start
• example-trpc
• example-trpc-vercel

@rivetkit/cloudflare-workers

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

@rivetkit/db

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

@rivetkit/framework-base

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

@rivetkit/next-js

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

@rivetkit/react

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

rivetkit

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

@rivetkit/sql-loader

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

@rivetkit/virtual-websocket

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/virtual-websocket@4095

@rivetkit/engine-runner

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

@rivetkit/engine-runner-protocol

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

commit: 67218a3

[claude]

PR Review: TanStack Start Example

Summary

This PR adds a new example demonstrating RivetKit integration with TanStack Start. The example implements a real-time counter with persistent state, showcasing actor actions, state management, and events.

✅ Strengths

1. Clean Integration: The TanStack Start route handler integration is minimal and elegant (src/routes/api.rivet.$.tsx)
2. Well-Documented: README follows the EXAMPLE_TEMPLATE.md format with proper sections and GitHub source links
3. Type Safety: Good use of TypeScript types throughout, including proper registry typing
4. Example Registry: Correctly added "tanstack-start" to the technologies list
5. Domain Usage: Correctly uses rivet.dev domain (no deprecated rivet.gg references)
6. Modern React: Uses React 19 and current TanStack Start patterns

🔍 Issues & Recommendations

Critical Issues

1. Missing Vercel Example Generation
According to CLAUDE.md, when adding/updating examples, you must also update the Vercel equivalent to ensure parity. After making changes to examples, run ./scripts/vercel-examples/generate-vercel-examples.ts.

Action Required:

• Check if a Vercel equivalent is needed for this example
• If not needed, add "skipVercel": true to the template object in package.json
• If needed, run the generation script after merging

2. Redundant Technology Entry (frontend/packages/example-registry/src/const.ts:20)
Line 20 has a duplicate entry for "react":

{ name: "react", displayName: "React" },  // Line 6
// ... other entries ...
{ name: "react", displayName: "React" },  // Line 20 (duplicate)
{ name: "tanstack-start", displayName: "TanStack Start" },

This appears to be an accidental duplication when adding the tanstack-start entry.

Code Quality Issues

3. Missing Error Handling (src/components/Counter.tsx:25-26)

counter.connection.getCount().then(setCount);

This Promise is not handling potential errors. Consider:

counter.connection.getCount()
  .then(setCount)
  .catch(err => console.error('Failed to get count:', err));

4. Template Metadata Formatting (package.json:40-48)
The template object uses mixed indentation (tabs vs spaces). Consider using consistent indentation (likely 2 spaces to match the rest of the file).

5. Comment Style (src/components/Counter.tsx:20)

// Use connStatus from the hook instead of tracking connection state manually

This comment documents what was removed/changed. According to CLAUDE.md, documenting deltas is not useful for developers who haven't worked on the project before. Consider removing or rephrasing to explain the current approach without referencing what changed.

Documentation Issues

6. Incomplete PR Template
The PR description has all checkboxes unchecked. Please complete:

• Type of change (appears to be "New feature")
• Testing description
• Checklist items

Minor Issues

7. Generated File in PR (src/routeTree.gen.ts)
This appears to be a generated file (86 lines). Consider adding it to .gitignore if it's auto-generated during build. Check other TanStack Start projects for convention.

8. Missing Test Coverage
package.json includes vitest dependencies and a test script, but no test files are present. Consider adding basic tests for:

• Actor state persistence
• Action calls
• Event broadcasting

🔒 Security Considerations

No major security issues found. The code:

• Doesn't handle sensitive data
• Uses type-safe RivetKit APIs
• Doesn't expose any dangerous endpoints
• Properly validates input through TypeScript types

⚡ Performance Considerations

1. Connection Management: The useActor hook properly manages WebSocket connections
2. Re-renders: State updates are minimal and targeted
3. Event Handling: Uses React hooks properly to avoid memory leaks

Recommendation: Consider adding loading states for the initial getCount() call to improve UX during connection establishment.

📝 Recommendations Summary

Must Fix Before Merge

1. ✅ Remove duplicate "react" entry in const.ts:20
2. ✅ Complete PR template checklist
3. ⚠️ Clarify Vercel example requirement (add skipVercel or generate)

Should Fix

4. Add error handling to async operations
5. Add basic test coverage
6. Fix indentation in package.json template section
7. Remove delta-documenting comment in Counter.tsx:20

Nice to Have

8. Add loading states during connection
9. Consider gitignoring routeTree.gen.ts if auto-generated
10. Add tests for actor behavior

✨ Overall Assessment

This is a solid example that demonstrates TanStack Start integration well. The code is clean, follows RivetKit patterns correctly, and the documentation is thorough. The main issues are:

• Missing Vercel example handling (critical for consistency)
• Duplicate registry entry (simple fix)
• Missing test coverage (should add)

Recommendation: Request changes for the duplicate entry and Vercel clarification, then approve once addressed.