Open
Conversation
Vite + React + Tailwind SPA mirroring the next-js-app-dir todo app with presence, for use as a create-instant-app template. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Wires the new vite-react example into the CLI: base union, --base choices, --vite-react shortcut flag, main picker, --ai picker, env var mapping, and bundled template copy. Includes e2e coverage. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Update the create-instant-app docs template list, drop the stale "only works with Next.js and Expo" paragraph, and add a --vite-react blurb to the React getting-started page. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (10)
✅ Files skipped from review due to trivial changes (8)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughThis PR adds a new Vite + React template option to the Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Contributor
|
View Vercel preview at instant-www-js-add-vite-react-jsv.vercel.app. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@examples/vite-react/package.json`:
- Around line 11-16: Remove the unused server-side SDK entry "@instantdb/admin"
from the dependencies object in package.json (the examples/vite-react package),
since it's not imported anywhere in this client-side Vite React SPA; delete the
"@instantdb/admin" key from the "dependencies" section and then run your package
manager (npm/yarn/pnpm) to update node_modules and the lockfile so the change is
applied.
In `@examples/vite-react/src/App.tsx`:
- Around line 98-106: The form onSubmit handler currently reads
e.currentTarget.input and calls addTodo without validation, allowing
empty/whitespace todos; update the handler to trim the input value, skip calling
addTodo if trimmed value is empty (return early), and call addTodo with the
trimmed string otherwise, then clear the input; reference the onSubmit anonymous
function, e.currentTarget.input and addTodo so you can locate and modify the
logic.
In `@examples/vite-react/src/instant.perms.ts`:
- Around line 5-22: Add minimal permission rules to the existing rules object so
the app can read/write/sync todos: add a "todos" entity with an allow block
(view: "true" or view: "auth.id != null" per your privacy needs;
create/update/delete: "isOwner") and a bind entry defining isOwner as "auth.id
!= null && auth.id == data.ownerId" so db.useQuery()/db.transact() are
permitted; also add a rooms section for presence with a "todos" room that allows
join (e.g., "auth.id != null") and binds presence state to the authenticated
user id so db.rooms.usePresence() can join and sync; keep the overall object as
rules satisfying InstantRules.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: ee59e8ad-420e-4458-958f-02aaa6a1d8ed
⛔ Files ignored due to path filters (1)
examples/vite-react/public/vite.svgis excluded by!**/*.svg
📒 Files selected for processing (19)
client/packages/create-instant-app/__tests__/e2e/create-instant-app.e2e.test.tsclient/packages/create-instant-app/scripts/copyExamples.tsclient/packages/create-instant-app/src/cli.tsclient/packages/create-instant-app/src/env.tsclient/www/app/docs/create-instant-app/page.mdclient/www/app/docs/page.mdexamples/vite-react/.gitignoreexamples/vite-react/README.mdexamples/vite-react/index.htmlexamples/vite-react/package.jsonexamples/vite-react/src/App.tsxexamples/vite-react/src/index.cssexamples/vite-react/src/instant.perms.tsexamples/vite-react/src/instant.schema.tsexamples/vite-react/src/lib/db.tsexamples/vite-react/src/main.tsxexamples/vite-react/src/vite-env.d.tsexamples/vite-react/tsconfig.jsonexamples/vite-react/vite.config.ts
Comment on lines
+11
to
+16
| "dependencies": { | ||
| "@instantdb/react": "latest", | ||
| "@instantdb/admin": "latest", | ||
| "react": "^19.1.0", | ||
| "react-dom": "^19.1.0" | ||
| }, |
Contributor
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Check whether `@instantdb/admin` is referenced anywhere in the vite-react example.
rg -nP '@instantdb/admin' examples/vite-reactRepository: instantdb/instant
Length of output: 130
🏁 Script executed:
# Search for any imports of `@instantdb/admin` in src/ and check for direct usage
rg -i 'admin' examples/vite-react/src/ -A 2 -B 2Repository: instantdb/instant
Length of output: 43
🏁 Script executed:
# Check the structure and contents of src/
find examples/vite-react/src -type f -name '*.ts' -o -name '*.tsx' -o -name '*.js' -o -name '*.jsx' | head -20Repository: instantdb/instant
Length of output: 280
🏁 Script executed:
# Check vite config for any server-side functionality
cat examples/vite-react/vite.config.ts 2>/dev/null || cat examples/vite-react/vite.config.js 2>/dev/null || echo "No vite config found"Repository: instantdb/instant
Length of output: 256
🏁 Script executed:
# Get full package.json to see all dependencies and context
cat examples/vite-react/package.jsonRepository: instantdb/instant
Length of output: 676
🏁 Script executed:
# Final verification: search ALL files in examples/vite-react for 'admin' (case-insensitive)
rg -i 'admin' examples/vite-react/Repository: instantdb/instant
Length of output: 127
Remove @instantdb/admin from dependencies—it is unused in this client-side Vite SPA.
The @instantdb/admin SDK is for server-side use with admin credentials and should not be in a browser app's dependencies. It is not imported anywhere in the example. Remove it from package.json.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@examples/vite-react/package.json` around lines 11 - 16, Remove the unused
server-side SDK entry "@instantdb/admin" from the dependencies object in
package.json (the examples/vite-react package), since it's not imported anywhere
in this client-side Vite React SPA; delete the "@instantdb/admin" key from the
"dependencies" section and then run your package manager (npm/yarn/pnpm) to
update node_modules and the lockfile so the change is applied.
Contributor
Author
There was a problem hiding this comment.
We like to have these in our examples so it's easy for folks to add in
Contributor
There was a problem hiding this comment.
@nezaj, understood! That makes sense as a convenience for users exploring the example.
✏️ Learnings added
Learnt from: nezaj
Repo: instantdb/instant PR: 2564
File: examples/vite-react/package.json:11-16
Timestamp: 2026-04-16T20:47:47.516Z
Learning: In the `instantdb/instant` repository, example packages (e.g., `examples/vite-react/package.json`) intentionally include `instantdb/admin` as a dependency even when it is not directly imported in the example source files. This is by design so that users can easily add server-side/admin functionality without needing to install the package themselves. Do not flag `instantdb/admin` as unused in example packages.
Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.
🧠 Learnings used
Learnt from: nezaj
Repo: instantdb/instant PR: 2366
File: examples/sveltekit/src/routes/+page.svelte:154-170
Timestamp: 2026-03-13T23:53:04.929Z
Learning: In the `examples/` directory of the instantdb/instant repository (e.g., `examples/sveltekit/`), strict accessibility (a11y) standards such as aria-labels on interactive controls are not required, as these are example/template apps rather than production code. React and other framework examples in the same repo follow the same pattern.
Learnt from: dwwoelfel
Repo: instantdb/instant PR: 2329
File: client/packages/resumable-stream/tsconfig.cjs.dev.json:6-9
Timestamp: 2026-02-26T20:47:17.338Z
Learning: In the `instantdb/instant` repository, client packages use `tsconfig.cjs.dev.json` files with `"module": "es2015"` and `"outDir": "./dist/commonjs"` as a consistent project pattern across all packages (core, react-common, resumable-stream, version). This configuration is intentional and should not be flagged as a mismatch.
Learnt from: CR
Repo: instantdb/instant PR: 0
File: client/packages/create-instant-app/template/rules/AGENTS.md:0-0
Timestamp: 2026-04-15T17:11:39.917Z
Learning: Applies to client/packages/create-instant-app/template/rules/**/*.{tsx,jsx} : Follow the rules of React hooks; ensure hooks do not appear conditionally in React components using InstantDB
Learnt from: CR
Repo: instantdb/instant PR: 0
File: client/packages/create-instant-app/template/rules/AGENTS.md:0-0
Timestamp: 2026-04-15T17:11:39.917Z
Learning: Applies to client/packages/create-instant-app/template/rules/**/*.{ts,tsx,js,jsx} : Use `db.useAuth()` in React/React Native apps or `db.subscribeAuth()` in vanilla JS apps to manage authentication state
Learnt from: dwwoelfel
Repo: instantdb/instant PR: 2336
File: examples/ai-chat/src/components/ai-elements/package-info.tsx:3-3
Timestamp: 2026-03-03T17:42:13.984Z
Learning: In the `instantdb/instant` repository, files in `examples/ai-chat/src/components/ai-elements/` are generated or maintained by the ai-elements tool and should be left as-is, even if they contain TypeScript or linting issues (e.g., missing React namespace imports for React.ReactNode).
Learnt from: dwwoelfel
Repo: instantdb/instant PR: 2449
File: client/packages/admin/src/index.ts:165-167
Timestamp: 2026-03-30T22:44:14.268Z
Learning: In `client/packages/admin/src/index.ts`, the `instantConfigWithDefaults` function uses a falsy check (`!r.apiURI`) intentionally: an empty string `''` for `apiURI` should also fall back to the default URL `'https://api.instantdb.com'`, not just `null`/`undefined`. Do not suggest replacing this with a nullish check (`== null`).
Learnt from: CR
Repo: instantdb/instant PR: 0
File: client/packages/create-instant-app/template/rules/AGENTS.md:0-0
Timestamp: 2026-04-15T17:11:39.917Z
Learning: Check for `instant.schema.ts` and `instant.perms.ts` files when managing Instant apps; if they exist but app id/admin token are missing, pull them with `npx instant-cli pull --yes`
Learnt from: CR
Repo: instantdb/instant PR: 0
File: client/packages/create-instant-app/template/rules/AGENTS.md:0-0
Timestamp: 2026-04-15T17:11:39.917Z
Learning: Applies to client/packages/create-instant-app/template/rules/**/*.{ts,tsx,js,jsx} : Use `id()` from InstantDB to generate IDs for new entities instead of manual ID creation
Learnt from: nezaj
Repo: instantdb/instant PR: 2354
File: client/packages/cli/__tests__/e2e/cli.e2e.test.ts:733-751
Timestamp: 2026-03-11T16:39:46.289Z
Learning: In the instantdb/instant repository, the `runCli` helper in `client/packages/cli/__tests__/e2e/helpers.ts` already sandboxes the CLI config for every test by default — it sets `HOME`, `XDG_CONFIG_HOME`, `XDG_DATA_HOME` to a temp directory, clears `INSTANT_CLI_AUTH_TOKEN`, and points `DOTENV_CONFIG_PATH` to `/dev/null`. Per-test HOME/XDG isolation is therefore redundant and unnecessary in these e2e tests.
Learnt from: CR
Repo: instantdb/instant PR: 0
File: client/packages/create-instant-app/template/rules/AGENTS.md:0-0
Timestamp: 2026-04-15T17:11:39.917Z
Learning: Always check the project's package manager (npm, pnpm, bun) before installing the Instant SDK; ensure the latest version of the appropriate Instant SDK package is used
Comment on lines
+98
to
+106
| <form | ||
| className="flex-1 h-full" | ||
| onSubmit={(e) => { | ||
| e.preventDefault(); | ||
| const input = e.currentTarget.input as HTMLInputElement; | ||
| addTodo(input.value); | ||
| input.value = ""; | ||
| }} | ||
| > |
Contributor
There was a problem hiding this comment.
Minor: empty todo submissions aren't guarded.
Submitting the form with an empty/whitespace input will create a todo with empty text. Consider trimming and skipping empty values:
Proposed fix
onSubmit={(e) => {
e.preventDefault();
const input = e.currentTarget.input as HTMLInputElement;
- addTodo(input.value);
- input.value = "";
+ const value = input.value.trim();
+ if (!value) return;
+ addTodo(value);
+ input.value = "";
}}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| <form | |
| className="flex-1 h-full" | |
| onSubmit={(e) => { | |
| e.preventDefault(); | |
| const input = e.currentTarget.input as HTMLInputElement; | |
| addTodo(input.value); | |
| input.value = ""; | |
| }} | |
| > | |
| <form | |
| className="flex-1 h-full" | |
| onSubmit={(e) => { | |
| e.preventDefault(); | |
| const input = e.currentTarget.input as HTMLInputElement; | |
| const value = input.value.trim(); | |
| if (!value) return; | |
| addTodo(value); | |
| input.value = ""; | |
| }} | |
| > |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@examples/vite-react/src/App.tsx` around lines 98 - 106, The form onSubmit
handler currently reads e.currentTarget.input and calls addTodo without
validation, allowing empty/whitespace todos; update the handler to trim the
input value, skip calling addTodo if trimmed value is empty (return early), and
call addTodo with the trimmed string otherwise, then clear the input; reference
the onSubmit anonymous function, e.currentTarget.input and addTodo so you can
locate and modify the logic.
Contributor
There was a problem hiding this comment.
@nezaj, understood — acknowledged and moving on!
🧠 Learnings used
Learnt from: CR
Repo: instantdb/instant PR: 0
File: client/packages/create-instant-app/template/rules/AGENTS.md:0-0
Timestamp: 2026-04-15T17:11:39.917Z
Learning: Applies to client/packages/create-instant-app/template/rules/**/*.{tsx,jsx} : Follow the rules of React hooks; ensure hooks do not appear conditionally in React components using InstantDB
Learnt from: CR
Repo: instantdb/instant PR: 0
File: client/packages/create-instant-app/template/rules/AGENTS.md:0-0
Timestamp: 2026-04-15T17:11:39.917Z
Learning: Applies to client/packages/create-instant-app/template/rules/**/*.{ts,tsx,js,jsx} : Use `db.useAuth()` in React/React Native apps or `db.subscribeAuth()` in vanilla JS apps to manage authentication state
Learnt from: CR
Repo: instantdb/instant PR: 0
File: client/packages/create-instant-app/template/rules/AGENTS.md:0-0
Timestamp: 2026-04-15T17:11:39.917Z
Learning: Applies to client/packages/create-instant-app/template/rules/**/*.{ts,tsx,js,jsx} : Always pass `schema` when initializing Instant to enable type safety for queries and transactions
Learnt from: CR
Repo: instantdb/instant PR: 0
File: client/packages/create-instant-app/template/rules/AGENTS.md:0-0
Timestamp: 2026-04-15T17:11:39.917Z
Learning: Applies to client/packages/create-instant-app/template/rules/**/*.{ts,tsx} : Use Instant utility types (`InstaQLEntity`) to type data models for type safety
Learnt from: dwwoelfel
Repo: instantdb/instant PR: 2336
File: examples/ai-chat/src/components/ai-elements/package-info.tsx:3-3
Timestamp: 2026-03-03T17:42:13.984Z
Learning: In the `instantdb/instant` repository, files in `examples/ai-chat/src/components/ai-elements/` are generated or maintained by the ai-elements tool and should be left as-is, even if they contain TypeScript or linting issues (e.g., missing React namespace imports for React.ReactNode).
Learnt from: CR
Repo: instantdb/instant PR: 0
File: client/packages/create-instant-app/template/rules/AGENTS.md:0-0
Timestamp: 2026-04-15T17:11:39.917Z
Learning: Applies to client/packages/create-instant-app/template/rules/**/*.{ts,tsx,js,jsx} : Use `id()` from InstantDB to generate IDs for new entities instead of manual ID creation
Comment on lines
+5
to
+22
| const rules = { | ||
| /** | ||
| * Welcome to Instant's permission system! | ||
| * Right now your rules are empty. To start filling them in, check out the docs: | ||
| * https://www.instantdb.com/docs/permissions | ||
| * | ||
| * Here's an example to give you a feel: | ||
| * posts: { | ||
| * allow: { | ||
| * view: "true", | ||
| * create: "isOwner", | ||
| * update: "isOwner", | ||
| * delete: "isOwner", | ||
| * }, | ||
| * bind: ["isOwner", "auth.id != null && auth.id == data.ownerId"], | ||
| * }, | ||
| */ | ||
| } satisfies InstantRules; |
Contributor
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Verify whether vite-react entities used by the app have matching permission rules.
set -euo pipefail
echo "== Locate relevant files =="
fd -i "instant.schema.ts|instant.perms.ts|db.ts|App.tsx|main.tsx"
echo
echo "== Show schema entities =="
fd -i "instant.schema.ts" -x sh -c 'echo "--- $1"; sed -n "1,220p" "$1"' sh {}
echo
echo "== Show permissions file =="
fd -i "instant.perms.ts" -x sh -c 'echo "--- $1"; sed -n "1,260p" "$1"' sh {}
echo
echo "== Find db operations that require perms (query/transact/presence) =="
rg -n --type=ts --type=tsx -C3 '\b(transact|tx\.|useQuery|usePresence|presence|room|join)\b'Repository: instantdb/instant
Length of output: 50418
🏁 Script executed:
#!/bin/bash
echo "=== Check vite-react db.ts ==="
cat examples/vite-react/src/lib/db.ts
echo -e "\n=== Check vite-react App.tsx ==="
head -100 examples/vite-react/src/App.tsx
echo -e "\n=== Search for query/transact/presence in vite-react ==="
rg -n "query|transact|useQuery|usePresence" examples/vite-react/src/ -A 2Repository: instantdb/instant
Length of output: 4135
Add permission rules for the todos entity and presence room so the app functions.
The template's app code uses db.useQuery(), db.transact(), and db.rooms.usePresence() to read, write, and sync todos in real-time. With empty rules, these operations are denied by default, breaking the example. Define minimal allow/bind rules for the todos entity and todos room presence.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@examples/vite-react/src/instant.perms.ts` around lines 5 - 22, Add minimal
permission rules to the existing rules object so the app can read/write/sync
todos: add a "todos" entity with an allow block (view: "true" or view: "auth.id
!= null" per your privacy needs; create/update/delete: "isOwner") and a bind
entry defining isOwner as "auth.id != null && auth.id == data.ownerId" so
db.useQuery()/db.transact() are permitted; also add a rooms section for presence
with a "todos" room that allows join (e.g., "auth.id != null") and binds
presence state to the authenticated user id so db.rooms.usePresence() can join
and sync; keep the overall object as rules satisfying InstantRules.
Contributor
Author
There was a problem hiding this comment.
Default permissions are open so we don't need to define them
Contributor
There was a problem hiding this comment.
@nezaj, you're right, my apologies for the noise. According to the InstantDB docs, by default all permissions are considered to be "true" — if a rule is not set, it evaluates to true. The empty rules object is perfectly valid for a development template. I'll remember this going forward.
✏️ Learnings added
Learnt from: nezaj
Repo: instantdb/instant PR: 2564
File: examples/vite-react/src/instant.perms.ts:5-22
Timestamp: 2026-04-16T20:48:37.929Z
Learning: In InstantDB, for user-defined entities (e.g., `todos`), default permissions are all open ("true") — if no rule is defined for a namespace, all permission checks (view, create, update, delete) pass by default. An empty `rules` object in `instant.perms.ts` is valid and means all operations are allowed. Only special system namespaces like `$users` and `$files` have restricted defaults ($users has view restricted to auth.id == data.id, and $files are all false by default).
Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.
🧠 Learnings used
Learnt from: CR
Repo: instantdb/instant PR: 0
File: client/packages/create-instant-app/template/rules/AGENTS.md:0-0
Timestamp: 2026-04-15T17:11:39.917Z
Learning: Applies to client/packages/create-instant-app/template/rules/**/instant.perms.ts : Default `$users` `view` permission is `auth.id == data.id`; default `update` and `delete` are false; default `create` is true; cannot override `delete`
Learnt from: dwwoelfel
Repo: instantdb/instant PR: 2320
File: examples/vercel-ai-sdk/src/instant.perms.ts:10-39
Timestamp: 2026-02-25T19:13:16.459Z
Learning: In examples/vercel-ai-sdk/src/instant.perms.ts, the `view: 'true'` permissions for chats, messages, $streams, and previewApps are intentionally public to allow the example app to showcase generated apps and chat sessions without authentication restrictions.
Learnt from: CR
Repo: instantdb/instant PR: 0
File: client/packages/create-instant-app/template/rules/AGENTS.md:0-0
Timestamp: 2026-04-15T17:11:39.917Z
Learning: Applies to client/packages/create-instant-app/template/rules/**/instant.perms.ts : The `create` rule in `$users` permissions runs during auth signup flows, not via `transact()`, and `extraFields` require an explicit create rule
Learnt from: CR
Repo: instantdb/instant PR: 0
File: client/packages/create-instant-app/template/rules/AGENTS.md:0-0
Timestamp: 2026-04-15T17:11:39.917Z
Learning: Applies to client/packages/create-instant-app/template/rules/**/instant.perms.ts : Use `auth.ref()` in permissions for user attributes; path must start with `$user` and returns a list
Learnt from: CR
Repo: instantdb/instant PR: 0
File: client/packages/create-instant-app/template/rules/AGENTS.md:0-0
Timestamp: 2026-04-15T17:11:39.917Z
Learning: Edit `instant.perms.ts` to change permissions, then run `npx instant-cli push perms --yes` to apply changes
Learnt from: CR
Repo: instantdb/instant PR: 0
File: client/packages/create-instant-app/template/rules/AGENTS.md:0-0
Timestamp: 2026-04-15T17:11:39.917Z
Learning: Applies to client/packages/create-instant-app/template/rules/**/instant.perms.ts : `$files` permissions default to all false; use `data.path.startsWith()` or `data.path.endsWith()` for path-based rules; `data.ref()` does not work for `$files`
Learnt from: CR
Repo: instantdb/instant PR: 0
File: client/packages/create-instant-app/template/rules/AGENTS.md:0-0
Timestamp: 2026-04-15T17:11:39.917Z
Learning: Applies to client/packages/create-instant-app/template/rules/**/*.{tsx,jsx} : Follow the rules of React hooks; ensure hooks do not appear conditionally in React components using InstantDB
Learnt from: CR
Repo: instantdb/instant PR: 0
File: client/packages/create-instant-app/template/rules/AGENTS.md:0-0
Timestamp: 2026-04-15T17:11:39.917Z
Learning: Applies to client/packages/create-instant-app/template/rules/**/*.{ts,tsx,js,jsx} : Use `db.useAuth()` in React/React Native apps or `db.subscribeAuth()` in vanilla JS apps to manage authentication state
Learnt from: dwwoelfel
Repo: instantdb/instant PR: 2318
File: client/packages/create-instant-app/src/utils/appConfig.ts:11-15
Timestamp: 2026-02-25T00:48:26.556Z
Learning: In client/packages/create-instant-app/src/utils/appConfig.ts, the getRules() and getSchema() functions intentionally swallow all errors (not just ENOENT) when loading instant.perms.ts and instant.schema.ts files to ensure create-instant-app doesn't break if parsing fails; this is a deliberate design decision prioritizing CLI resilience over strict error handling.
Learnt from: CR
Repo: instantdb/instant PR: 0
File: client/packages/create-instant-app/template/rules/AGENTS.md:0-0
Timestamp: 2026-04-15T17:11:39.917Z
Learning: Applies to client/packages/create-instant-app/template/rules/**/*.{ts,tsx,js,jsx} : Always pass `schema` when initializing Instant to enable type safety for queries and transactions
Learnt from: CR
Repo: instantdb/instant PR: 0
File: client/packages/create-instant-app/template/rules/AGENTS.md:0-0
Timestamp: 2026-04-15T17:11:39.917Z
Learning: Applies to client/packages/create-instant-app/template/rules/**/*.{ts,tsx,js,jsx} : Use `id()` from InstantDB to generate IDs for new entities instead of manual ID creation
Learnt from: CR
Repo: instantdb/instant PR: 0
File: client/packages/create-instant-app/template/rules/AGENTS.md:0-0
Timestamp: 2026-04-15T17:11:39.917Z
Learning: Applies to client/packages/create-instant-app/template/rules/**/instant.perms.ts : Use `data.ref()` with linked attributes in permissions, not `data.attribute` syntax; `data.ref()` returns a list and must end with an attribute
Learnt from: dwwoelfel
Repo: instantdb/instant PR: 2336
File: examples/ai-chat/src/components/ai-elements/package-info.tsx:3-3
Timestamp: 2026-03-03T17:42:13.984Z
Learning: In the `instantdb/instant` repository, files in `examples/ai-chat/src/components/ai-elements/` are generated or maintained by the ai-elements tool and should be left as-is, even if they contain TypeScript or linting issues (e.g., missing React namespace imports for React.ReactNode).
Learnt from: CR
Repo: instantdb/instant PR: 0
File: client/packages/create-instant-app/template/rules/AGENTS.md:0-0
Timestamp: 2026-04-15T17:11:39.917Z
Learning: Applies to client/packages/create-instant-app/template/rules/**/*.{ts,tsx} : Use Instant utility types (`InstaQLEntity`) to type data models for type safety
Learnt from: nezaj
Repo: instantdb/instant PR: 2564
File: examples/vite-react/package.json:11-16
Timestamp: 2026-04-16T20:47:47.516Z
Learning: In the `instantdb/instant` repository, example packages (e.g., `examples/vite-react/package.json`) intentionally include `instantdb/admin` as a dependency even when it is not directly imported in the example source files. This is by design so that users can easily add server-side/admin functionality without needing to install the package themselves. Do not flag `instantdb/admin` as unused in example packages.
Keep Web: Next.js and Mobile: Expo as the primary picks; everything else (including Vite: React) sits under Additional Options. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Use the "Web: X" / "Mobile: X" labeling convention so both pickers read consistently. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@client/packages/create-instant-app/src/cli.ts`:
- Around line 258-260: Update the inconsistent label for the Vite + React choice
so both pickers use the same, explicit wording; locate the option with value
'vite-react' in the --ai picker (currently labeled 'Web: Vite') and change its
label to match the main framework picker label 'Vite: React' or to a unified
string like 'Web: Vite (React)' so both prompts show the same text for the
'vite-react' option.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 94dab0d2-0137-4f30-96d6-66e6ad679bbb
📒 Files selected for processing (2)
client/packages/create-instant-app/src/cli.tsclient/packages/version/src/version.ts
✅ Files skipped from review due to trivial changes (1)
- client/packages/version/src/version.ts
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Contributor
There was a problem hiding this comment.
🧹 Nitpick comments (1)
client/packages/create-instant-app/src/cli.ts (1)
258-260: Minor label inconsistency between the two pickers.The AI picker uses
'Web: Vite React'while the main picker uses'Vite: React'(Line 279). The previous review flagged this and a commit was marked as addressing it, but the two strings still don't match. Not a blocker — just noting that a single canonical label (e.g.,'Web: Vite + React'in both places) would make the UX more consistent.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@client/packages/create-instant-app/src/cli.ts` around lines 258 - 260, The two template pickers in cli.ts are using inconsistent labels for the Vite+React option—one uses 'Web: Vite React' (in the shown array entry) while the main picker uses 'Vite: React'; pick a canonical label (e.g., 'Web: Vite + React') and update the label string in the entry with value 'vite-react' so both pickers display the same text; verify any other occurrences of 'Vite React' or 'Vite: React' in the file and make them match the chosen canonical label.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@client/packages/create-instant-app/src/cli.ts`:
- Around line 258-260: The two template pickers in cli.ts are using inconsistent
labels for the Vite+React option—one uses 'Web: Vite React' (in the shown array
entry) while the main picker uses 'Vite: React'; pick a canonical label (e.g.,
'Web: Vite + React') and update the label string in the entry with value
'vite-react' so both pickers display the same text; verify any other occurrences
of 'Vite React' or 'Vite: React' in the file and make them match the chosen
canonical label.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: ee33ff09-791d-496b-b385-76c38ad268a1
📒 Files selected for processing (1)
client/packages/create-instant-app/src/cli.ts
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Add Vite + React template to create-instant-app
This PR adds a first-class Vite + React template to
create-instant-appso users can scaffold a Vite + React app.With this you can also do
npx create-instant-app --ai --vite-reactManual testing
You can test this yourself via the following commands
pnpx create-instant-app@branch-add-vite-reactpnpx create-instant-app@branch-add-vite-react --vite-reactpnpx create-instant-app@branch-add-vite-react --aipnpx create-instant-app@branch-add-vite-react --ai --vite-reactMotivation
Got a user question asking how hard it would be to make
npx create-instant-app --aiwork with Vite. Today the--aipicker only offers Next.js and Expo, and there was no Vite + React example to begin with (vite-vanillais plain TS,solidjs-viteis Solid,bun-reactis Bun-native).create-instant-app
create-instant-app --ai
New example
https://github.com/user-attachments/assets/4205a2a0-dcb7-4d65-b5a4-d29c968a1ed1
Added
examples/vite-react/as a Vite + React + Tailwind 4 SPA that mirrorsnext-js-app-dir's todo app with presence. Uses@instantdb/react, React 19, Vite 7, Tailwind 4.CLI wiring
--vite-reactshortcut flag (matches--vanilla,--next, etc.)--base vite-reactsupport--aipicker alongside Next.js and ExpoVITE_INSTANT_APP_IDenv var mappingEXAMPLES_TO_COPYso the example ships bundled with the CLITests
Added an e2e case covering the
--vite-reactflag: scaffolds the project, confirms key files exist, and checks the generated.envhasVITE_INSTANT_APP_ID. Also manually smoke-testedpnpm run dev,tsc --noEmit, andvite buildon the scaffolded output.Docs
Updated the
create-instant-appdocs template list, dropped the stale "only works with Next.js and Expo" paragraph, and added a--vite-reactblurb to the React getting-started page.