<img width="2892" height="2342" alt="image"
src="https://github.com/user-attachments/assets/7e08929d-abc3-4397-b89d-99cc52d8190e"
/>
This is the third and final PR to complete the new connect sheet.
First: https://github.com/supabase/supabase/pull/42367
Second: https://github.com/supabase/supabase/pull/42373
This re-adds the Direct, ORM, MCP tabs and their content, including via
connect.schema.
To test:
- Flag will be enabled on all staging projects
- Click connect and notice new Sheet
- Click all tabs and ensure content is correct
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Multi-mode connection flow with mode selector and icons (framework,
direct DB, ORM, MCP)
* New framework/variant/library selector, richer connection guides and
install steps (Prisma, Drizzle, direct)
* MCP onboarding flows (Cursor, Codex, Claude Code) with server/auth
commands and configuration UIs
* **Refactor**
* Connect schema and state rebuilt to be mode-driven with improved step
resolution and cascading state updates
* **Tests**
* Expanded unit tests covering framework resolution, connect flows, and
mode behaviors
* **Chores**
* ESLint ignores updated for content files
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
This is part two of a [PR
breakdown](https://github.com/supabase/supabase/pull/42276) that
introduces our connect schema and how content is retrieved. This focuses
on the Framework tab to start.
Fields are generated and content is rendered using a connect.schema
file. This schema file defines modes, fields and steps. Each mode has a
set of fields. Each field can be dependent on another field. The steps
generated are then based off the values of the modes and fields. Each
step can also render varying content dynamically using a template
{{framework}}/{{frameworkVariant}}/{{library}} which just replaces those
values with what's in state (fields selected).
[Part one needs to be merged
first.](https://github.com/supabase/supabase/pull/42367)
The next stage will add back all other tabs and content.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* New Connect Sheet UI to guide app-to-project connections with dynamic
configuration and copyable connection parameters.
* Multi-framework & mobile support with ready-to-use code examples,
install commands, and step-by-step setup for 20+ frameworks.
* Multiple PostgreSQL connection methods (direct, transaction, session)
with safe/masked connection previews.
* Copy-prompt that aggregates step content and code for easy sharing.
* **UI**
* Multi-file code viewer with tabbed code blocks and added syntax
support (Swift, TOML, HTML).
* **Tests**
* Comprehensive unit tests for resolver and state logic.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
This is the first smaller PR in the broader change of updating our
Connect dialog (see
[here](https://github.com/supabase/supabase/pull/42276)).
This PR focuses on decoupling the ConnectButton our of the Connect
dialog and into its own component . The button includes a flag to render
the new sheet. The new sheet is empty for the time being as the flag is
at 0%.
To test:
- Enable flag and click button, see new Sheet
- Disable and see old dialog
- Create a new project -> in getting started section see "connect to
app" step -> Click connect button and make sure it works
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
- Added a Connect button component and an alternative Connect sheet.
- Added curl syntax highlighting for code blocks.
* **Changes**
- Connection dialog moved to a controlled open-state pattern; Connect
replaced legacy entry points across the UI and can be feature-flagged.
- Connection actions simplified and no longer depend on framework
selection.
* **Removals**
- Removed legacy framework selector, default framework constant, and
related tests.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.
YES
## What kind of change does this PR introduce?
`create-react-app` is deprecated, so this PR brings vite before
`create-react-app` when opening React in the connect dialog.
* Popover ui component to use portal by default, remove all manual declaration of portal for PopoverContent in dashboard
* Forgot to add ui changes lol
* Clean uop
* Initial plan
* fix: Remove BASE_PATH prefix from Next.js Link component in Connect dialog
Next.js Link components automatically handle base paths, so the BASE_PATH prefix should not be manually included. The BASE_PATH prefix remains correctly in the Panel.Notice href prop which is not a Next.js Link component.
Co-authored-by: ivasilov <568291+ivasilov@users.noreply.github.com>
---------
Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: ivasilov <568291+ivasilov@users.noreply.github.com>
* Add shimmering-loader CSS to ui-patterns.
* Import the shimmering-loader classes from the ui-patterns component.
* Remove ShimmeringLoader from studio.
* Migrate studio to use ui-patterns/ShimmeringLoader.
* Migrate away from using default import for ShimmeringLoader.
* Fix the css imports in docs and studio.
* Bump the deps, refactor deprecated code.
* Migrate keepPreviousData usage.
* Migrate all uses of InfiniteQuery.
* Fix refetchInterval in queries.
* Migrate all use of isLoading to isPending in mutations.
* Fix accessing location in claim-project.
* Fix a bug in duplicate query keys.
* Migrate all queries to use isPending.
* Revert "Fix accessing location in claim-project."
This reverts commit 2a07df64b5.
* Revert the rss.xml file to master.
* docs: update Refine svg in HeroFrameworks
* docs: use capital R for Refine mentions
* docs: use main branch for Refine repository references
* docs: update connect interface example code for Refine
* docs: update Refine quick start tutorial with Refine v5
* examples(refine-user-management): upgrade to Refine v5
* docs: update Refine getting started tutorial with Refine v5
* chore(studio): update Refine icon on Connect modal
* docs: update Refine svg
* docs: update welcome screen screenshot in Refine tutorial
* docs: update dimensions of welcome screen screenshot in Refine tutorial
* chore: remove leftover dist assets from Refine example
* chore(linter): add Refine to Rule001 and Rule003
* chore: format getting started with Refine.mdx
* chore: remove .prettierrc file from the example
* change connection string via dropdown
* rearrange descriptive content and actions in connection string tab
* update connection string url state based on selected type and method
* reset query states when switching tabs
* fix steps layout in Connection String dialog tab
* rounded-lg on mobile
* update wording of step 3 on connection string tab
* improve map key naming
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* feat: MCP URL builder
- Creates an MCP URL builder component that allows a user to choose options via a UI, then automatically builds the URL and config needed for various MCP clients
- Adds this component to studio Config modal and docs MCP page
* fix(mcp url builder): mcp-remote options
mcp-remote handles OAuth, so no need to pass personal access token
* fix(docs): mcp
We are pushing the remote MCP server rather than the local one, so removing
references to the local server from documentation.
* fix(mcp url builder): ui messages
- Clarify read-only mode
- Storage is not enabled in the defautl configuration
* fix: mcp url builder
- Refactor unnecessary hook into a utility function
- Fix background color in dark mode
* feat: update remote MCP base URL
* docs: update MCP getting started
- Restores relevant content from prod
- Adds callout about authentication
- Adds next steps to remote MCP installation section
* Update apps/docs/content/guides/getting-started/mcp.mdx
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
* feat: click selected project to unselect
This follows the unselect pattern from shadcn combobox example
https://ui.shadcn.com/docs/components/combobox
* Update apps/docs/content/guides/getting-started/mcp.mdx
Co-authored-by: Greg Richardson <greg.nmr@gmail.com>
* Update apps/docs/content/guides/getting-started/mcp.mdx
Co-authored-by: Greg Richardson <greg.nmr@gmail.com>
* Update apps/docs/content/guides/getting-started/mcp.mdx
Co-authored-by: Greg Richardson <greg.nmr@gmail.com>
* fix: light mode connection icons
* chore: format `mcp.mdx`
* fix: VS Code URL handler "name"
Based on docs the field is "name" instead of "id":
- https://code.visualstudio.com/docs/copilot/customization/mcp-servers#_commandline-configuration
- https://code.visualstudio.com/docs/copilot/customization/mcp-servers#_url-handler
* refactor: `NEXT_PUBLIC_MCP_URL` environment variable
* feat: move client selector below options
* feat: "Add to" buttons left aligned about config file
* feat: actionable login hint
* feat: condition supported feature groups on platform
* feat: platform selector, mcp url for self-hosted
* feat: update copy for platform selection
* fix: base URL logic, copy
* fix: form MCP url from apiUrl in self-hosted studio
* chore: unused file
* fix: don't populate apiUrl for docs
* fix: omit `project_ref` for self-hosted
* docs: tweak copy for CLI platform
* chore: optional instead of nullable `apiUrl`
* chore: type sharing / inference for platform type
* feat: 'development' self-hosted feature group
* feat: omit read-only switch/param for local/self-hosted
* refactor: remove claude desktop client option
Replay of https://github.com/supabase/supabase/pull/36867/commits/59670f6771bca8e81fa62c0d3115288b82bfbb5d
---------
Co-authored-by: Charis Lam <26616127+charislam@users.noreply.github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Greg Richardson <greg.nmr@gmail.com>
Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com>
* feat: MCP URL builder
- Creates an MCP URL builder component that allows a user to choose options via a UI, then automatically builds the URL and config needed for various MCP clients
- Adds this component to studio Config modal and docs MCP page
* fix(mcp url builder): mcp-remote options
mcp-remote handles OAuth, so no need to pass personal access token
* fix(docs): mcp
We are pushing the remote MCP server rather than the local one, so removing
references to the local server from documentation.
* fix(mcp url builder): ui messages
- Clarify read-only mode
- Storage is not enabled in the defautl configuration
* fix: mcp url builder
- Refactor unnecessary hook into a utility function
- Fix background color in dark mode
* feat: update remote MCP base URL
* docs: update MCP getting started
- Restores relevant content from prod
- Adds callout about authentication
- Adds next steps to remote MCP installation section
* Update apps/docs/content/guides/getting-started/mcp.mdx
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
* feat: click selected project to unselect
This follows the unselect pattern from shadcn combobox example
https://ui.shadcn.com/docs/components/combobox
* Update apps/docs/content/guides/getting-started/mcp.mdx
Co-authored-by: Greg Richardson <greg.nmr@gmail.com>
* Update apps/docs/content/guides/getting-started/mcp.mdx
Co-authored-by: Greg Richardson <greg.nmr@gmail.com>
* Update apps/docs/content/guides/getting-started/mcp.mdx
Co-authored-by: Greg Richardson <greg.nmr@gmail.com>
* fix: light mode connection icons
* chore: format `mcp.mdx`
* fix: VS Code URL handler "name"
Based on docs the field is "name" instead of "id":
- https://code.visualstudio.com/docs/copilot/customization/mcp-servers#_commandline-configuration
- https://code.visualstudio.com/docs/copilot/customization/mcp-servers#_url-handler
* refactor: `NEXT_PUBLIC_MCP_URL` environment variable
* feat: move client selector below options
* feat: "Add to" buttons left aligned about config file
* feat: actionable login hint
* refactor: remote claude desktop client option
---------
Co-authored-by: Matt Rossman <22670878+mattrossman@users.noreply.github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Greg Richardson <greg.nmr@gmail.com>
Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com>
* Update Supabase docs URLs to use env variable
Co-authored-by: a <a@alaisteryoung.com>
* Refactor: Use DOCS_URL constant for documentation links
This change centralizes documentation links using a new DOCS_URL constant, improving maintainability and consistency.
Co-authored-by: a <a@alaisteryoung.com>
* Refactor: Use DOCS_URL constant for all documentation links
This change replaces hardcoded documentation URLs with a centralized constant, improving maintainability and consistency.
Co-authored-by: a <a@alaisteryoung.com>
* replace more instances
* ci: Autofix updates from GitHub workflow
* remaining instances
* fix duplicate useRouter
---------
Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: alaister <10985857+alaister@users.noreply.github.com>
* Update perms checking in audit logs
* Deprecate useCheckPermissions, useIsPermissionsLoaded and useCheckProjectPermissions as they're no longer used
* Rename useAsyncCheckProjectPermissions to useAsyncCheckPermissions
* Fix TS
* Init custom content hook
* Implement useCustomContent hook similarly to useIsFeatureEnabled, and implement extension of organization documents
* Attempt to type things nicely
* Add support for custom content example projects
* Add support for custom content logs explorer default query
* nit
* Add support for custom content connect UI frameworks
* Reset custom-content.json
* Smol nit
* set custom-content to null
---------
Co-authored-by: Jordi Enric <jordi.err@gmail.com>
* Replace all usage of useProjectContext with useSelectedProjectQuery
* Replace all usage of useSelectedProject with useSelectedProjectQuery
* Replace all usage of useProjectByRef with useProjectByRefQuery
* Replace all usage of useSelectedOrganization with useSelectedOrganizationQuery
* Deprecate useSelectedProject, useSelectedOrganization, and useProjectByRef hooks
* Deprecate ProjecContext
* feat: move storage settings
* feat: redirect
* feat: database settings in service area
* feat: move data api settings
* fix: revert data API placement
* feat: minor UX touches
* fix: simplify configuration group
* feat: references to database settings
* feat: references to storage settings
* fix: redirects and formatting
* fix: Import StorageMenu dynamically to avoid SSR issues with useLocalStorage
* fix: move Data API closer to semantic siblings
* fix: revert smart comma
* Shift bucket sort logic into storage explorer store
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* Deprecate getAPIKeys from project settings v2, use new api keys endpoint instead
* use getPreferredKeys where appropriate
* Prevent usage of secret key for storage and realtime inspector
* Add dashboard API api-keys endpoint
* Simplify
* Disable edge functions test if legacy api keys are disabled
* Revert
* Fix graphiql
* Remove all usage of api keys from project settings, except DisplayApiSettings
* Update
* Fix
* Small fix for an undefined upload url.
* Fix the storage state initialization when the resumable url changes.
---------
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
* Consolidate copy to clipboard
* Fix
* Fix some extra clipboard events.
* Fix the tests. Fix a small issue with the copy button.
* Fix
---------
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
