Commit Graph
57 Commits
Author SHA1 Message Date
Saxon FletcherandClaude Opus 5.5 a9c594a820 chore(library): rename mcp-server block to mcp (#50999)
Renames the `mcp-server` Library block to `mcp`. Installing it now
creates `supabase/functions/mcp`, so the server is served at
`/functions/v1/mcp`.

- Block, Edge Function folder, and docs page renamed
(`/docs/headless/mcp`)
- Headless App block now installs its tools into
`supabase/functions/mcp` and configures `[functions.mcp]`
- Links in the BYO MCP and MCP authentication guides updated
- Permanent redirects keep `/r/mcp-server.json` and
`/docs/headless/mcp-server` working
- `public/r` rebuilt


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Updates**
* The MCP Server block is now named `mcp` across its documentation,
installation links, and setup instructions.
  * Updated function endpoints and deployment commands to use `/mcp`.
* Added permanent redirects from the previous `mcp-server` documentation
and install URLs to their new locations.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
2026-09-30 11:46:35 +10:00
3f205627e0 feat(library): redesign the site around the block catalog (#50372)
## 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?

Feature — the visual redesign itself.

Part 5 of 6 in a stack that splits the library redesign into reviewable
pieces. The four PRs beneath it carry the build, content and Markdown
work; what's left here is layout, navigation and styling.

## What is the current behavior?

The library is laid out like a documentation site: a sidebar tree of
framework folders, a homepage that lists links, and a guide page that
opens with prose. That shape suits reference material, but the library's
job is to help someone find a block and install it — and the sidebar is
the only way to discover one.

## What is the new behavior?

The homepage is the catalog itself — blocks grouped by what they do
(authentication, database, storage, realtime, messaging, AI,
foundations) rather than by framework, each with a preview of what it
renders, filterable by category.

Navigation moves into a site header whose Explore menu opens the same
categories, so the catalog is reachable from any page and the per-page
sidebar tree is gone.

A guide opens with what the reader came for: the block's name, the
install command, and a preview pane with tabs — the running component
and its files — before any prose. The file tree that used to sit
mid-page under "Folder structure" is one of those tabs. Every guide also
offers a copy of the agent prompt that points at its Markdown.

Getting-started pages get the same treatment: the quickstart is now a
framework-tabbed walkthrough rather than a wall of setup links.

## Additional context

`BlockOverviewTabs` renders Preview and Files here. #50369, stacked on
top of this one, adds the third "What's added" tab — it is the only part
of the redesign that depends on the new resource analyzer, which is why
it sits above this PR rather than below it.

Also removes what the redesign orphaned: the table-of-contents component
and its `remark` / `mdast-util-toc` dependencies, and the sidebar nav
and command-item configuration the new header replaced.

The block source changes are typography only — auth card titles move
from `text-2xl` to `font-medium text-lg tracking-normal` — which is what
regenerates the auth registry artifacts.


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Added a redesigned Supabase Library catalog with categorized blocks,
framework-aware navigation, previews, file views, and installation
actions.
* Added framework-specific quickstart guides for Next.js, React, Vue,
Nuxt, React Router, and TanStack Start.
* Added copy-to-clipboard prompts, “Open in v0” actions, starter
templates, and richer visual previews.

* **Improvements**
* Updated documentation layouts, FAQ content, typography, navigation,
accessibility, and responsive behavior.
* Improved mobile navigation, framework selection, and standardized
block installation guidance.
* Refined authentication and social-login block presentation with more
consistent heading styles.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com>
2026-09-29 10:45:23 +10:00
Saxon FletcherandClaude Opus 5 b1d2efd99e feat(library): add starter app guides (#50368)
## 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?

Feature, docs.

Part 2 of 6 in a stack that splits the library redesign into reviewable
pieces.

## What is the current behavior?

The library documents individual blocks. Nothing answers "I have no
project yet" — a reader who wants a working app has to assemble one from
block guides and figure out the scaffolding themselves.

## What is the new behavior?

Four starter guides under `/docs/starters`, each starting from an empty
directory and ending with a running app on Supabase:

- **Next.js starter** — composes the library's own password-based auth
block.
- **SaaS starter** — the community subscription-payments template, with
Stripe setup.
- **AI chat app** — the community Vercel AI SDK template.
- **Flutter starter** — the user-management example, with profiles and
avatar uploads.

They reuse the existing doc route, so the sidebar, command menu,
Markdown export and `llms.txt` pick them up with no new plumbing. The
framework selector already renders nothing for pages that declare no
framework variants, so a starter page shows none.

## Additional context

The starter pages are added here in the current site's page layout; the
last PR in the stack converts them to the new one along with every other
guide.


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Added a Starter Apps section to the side navigation and command menu.
- Added links for Next.js, SaaS, AI Chat, and Flutter starter projects,
marked as new.

- **Documentation**
  - Added setup and deployment guides for the Next.js and SaaS starters.
- Added an AI Chat App guide covering configuration, local verification,
and deployment.
- Added a Flutter starter guide covering authentication, profiles,
avatars, deep links, and hosted setup.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
2026-09-18 10:38:49 +10:00
abbac3b852 refactor(library): resolve registry dependencies from one source of truth (#50367)
## 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?

Refactor, bug fix.

Part 1 of 6 in a stack that splits the library redesign into reviewable
pieces. This one is the foundation the rest build on and has no visual
change.

## What is the current behavior?

Three build steps each reimplement "where does this registry file land
in the user's project": `process-registry`'s `getDefaultPath`,
`registry/utils`' `uniqBy` on `file.path`, and the Markdown exporter.
They disagree, which produces real bugs:

- A Vue block whose files come from `node_modules/@supabase/vue-blocks/`
keeps its package path, so the installer writes the package folder into
the user's project.
- `registryItemAppend` builds its `docs` string from `(item.docs,
items.flatMap(...))` — a comma expression, so the item's own docs are
discarded.
- A name collision between a block file and its client's file silently
keeps one of the two.
- Install commands guess the CLI family from substrings in the item
name, so `infinite-query-composable` — a Vue block with neither "vue"
nor "nuxtjs" in its name — gets the React CLI.
- Production Vue installs use `@supabase/<name>`, but the `@supabase`
namespace is registered with shadcn, not shadcn-vue.
- `build:registry`, `build:content`, `build:markdown` and `build:llms`
run in parallel, but the last three read `public/r`.

## What is the new behavior?

`lib/registry-resolution.ts` owns installed-path derivation, first-party
dependency naming, deduplication, and cycle detection, and every
consumer calls it. `build-registry` validates the whole registry against
shadcn's schema and resolves every item, so a broken reference fails the
build instead of shipping. `clean-registry` throws rather than logging
past a failure.

Pages declare their install `framework` explicitly instead of it being
inferred, and production Vue installs use the absolute registry URL.

The build steps are serialized behind `build:prepare`, and a new
`library-tests.yml` workflow runs the library's tests, checks the
generated registry is committed, and builds the app.

## Additional context

Regenerated registry artifacts are the mechanical result of the
resolution fix — the Vue client items and the OAuth consent items that
gained their client's docs.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **New Features**
* Added explicit React and Vue framework selection for library blocks
and installation commands.
* Improved registry resolution, dependency handling, path validation,
and Vue file normalization.
* Added support for reliable local, preview, and production registry
URLs.

* **Documentation**
* Updated Vue and Nuxt installation documentation to identify the Vue
framework explicitly.

* **Bug Fixes**
* Preserved combined documentation and validated generated registry
content more consistently.

* **Tests**
* Added coverage for installation commands, registry resolution,
dependency handling, and generated artifacts.

* **Chores**
  * Added automated pull-request checks for library tests and builds.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
2026-09-18 10:38:48 +10:00
19d7233580 feat(ui-library): add headless app block for TanStack Start (#49579)
## 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?

Feature — a new UI Library block. Stacked on #49573 (already in main)

Fixes AI-1064

## What is the new behavior?

Adds `headless-app-tanstack`: customers sign in, authorize an MCP
client, and use the product through agent tool calls. It composes the
existing Password-Based Auth, OAuth Consent, and MCP Server blocks.

- `/agents` provides a copyable connection prompt, lists OAuth
authorizations, and lets customers revoke access.
- The shared MCP runtime exposes `whoami` plus example task CRUD tools.
Tools use the caller's Supabase client, with database grants and RLS
enforcing ownership.
- A root-level `supabase/` directory supplies local Auth/OAuth
configuration, a declarative tasks schema, and Edge Function files,
including `.env.example`.
- Docs cover local setup, signing keys, migrations, environment
configuration, deployment, and extending the tools.
`/example/headless-app` previews the sign-in, consent, connect, and
connected states.

Shared block fixes make a fresh install work:

- Explicit public URL resolution fixes OAuth discovery in local Edge
Runtime when middleware runtime detection fails. Both external OAuth
access tokens and ordinary authenticated app session tokens remain
supported; embedded agents do not need an additional consent flow.
- Registry targets keep backend files outside `src/`, and generated
consumer routes omit source-only TypeScript suppressions.
- Signup respects `auth.email.enable_confirmations`; sign-in/signup
preserve the return destination. Missing consent IDs retain the existing
error state without serializing `null` into the URL.

## How to test

Use the UI Library on **staging** and follow the block pages'
instructions.

1. Open the **Headless App** block page for TanStack Start. Install it
into a fresh app and follow the setup instructions through connecting an
MCP client.
2. Sign up, open `/agents`, and use the connection prompt to authorize a
client. Call `whoami`, then create, list, update, and delete a task.
3. Confirm the client appears on `/agents`. Revoke access and verify it
disappears and token refresh fails. An existing access token can
continue working until it expires.
4. Follow the **MCP Server** block page's embedded-agent instructions
using an authenticated app session. Confirm tools work without another
OAuth consent flow and `whoami` returns `client_id: null`.
5. With a second user, confirm each user can only access their own
tasks. Check that signup behaves correctly for the configured
email-confirmation setting.
6. Check the Headless App preview states and run the installed app's
typecheck and production build.

## Validation performed

Fresh local installation and browser/SDK verification passed: 26 live
MCP/Data API checks, 10 Deno tests, and 7 connection-page component
tests. Also passed UI Library typecheck, targeted lint,
registry/Markdown builds, and fresh consumer typecheck/production build.
Both OAuth and ordinary app session authentication were exercised.

Hosted deployment and consuming the confirmation-email link were not
tested.



<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Added a TanStack Headless App example with sign-in, OAuth consent, MCP
connection, and connected-agent screens.
- Added task management tools for listing, creating, updating, and
deleting tasks through MCP.
- Added connected-agent management, including server URL and prompt
copying, refresh, and access revocation.
  - Added a new Headless App registry block and documentation.

- **Bug Fixes**
- Preserved intended destinations through sign-up, email confirmation,
and protected-route login redirects.
- Improved OAuth discovery URL handling across forwarded-host
deployments.

- **Documentation**
- Updated setup, environment, deployment, and Supabase CLI guidance for
headless apps and MCP servers.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: Saxon Fletcher <SaxonF@users.noreply.github.com>
Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
Co-authored-by: repro <repro@local>
Co-authored-by: Raúl Barroso <code@raulb.dev>
2026-09-14 10:30:26 +10:00
b04e26872b feat(ui-library): add MCP server block (#49573)
## 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?

Feature — a new UI Library block. Bottom of a two-PR stack; #49579
builds on it.

## What is the new behavior?

Adds an `mcp-server` block: a Supabase Edge Function that exposes MCP
tools scoped to the signed-in user. It is backend-only, so every file
has an explicit target and no `components.json` is needed.

- `withSupabase({ auth: 'user' })` verifies the access token and gives
each tool an RLS-scoped client. Both product session tokens and OAuth
tokens work; only the latter carry `client_id`.
- `withOAuthProtectedResource` serves RFC 9728 metadata and adds a
`WWW-Authenticate` challenge to `401`s, so external MCP clients can
discover the authorization server.
- Tools are composed in `tools/index.ts`. One is included, `whoami`,
which shows the caller's identity and OAuth client.

Docs at `/library/docs/headless/mcp-server`, under a new MCP group in
the sidebar. `BlockItem` gained a `showOpenInV0` flag (v0 cannot take
Deno functions), and the file-tree viewer now picks a language per file
instead of always TypeScript.

## To test

1. `npx shadcn@latest add
http://localhost:3004/library/r/mcp-server.json` into a Supabase project
or empty directory.
2. Add `[functions.mcp-server] verify_jwt = false` to
`supabase/config.toml`, then:
   ```bash
   supabase start
supabase functions serve mcp-server --env-file supabase/functions/.env
   ```
3. **Unauthenticated:** `curl -i
localhost:54321/functions/v1/mcp-server` returns `401` with a
`WWW-Authenticate` header, and
`/functions/v1/mcp-server/oauth-protected-resource` returns the metadata
document.
4. **Product session:** sign up a user, then call the endpoint with
`Authorization: Bearer <their access token>`. `tools/list` shows
`whoami`; calling it returns that user's id and `client_id: null`.
5. **External client:** enable `[auth.oauth_server]` with
`allow_dynamic_registration = true`, install the OAuth Consent block,
point an MCP client (Claude Code, Codex) at the function URL, approve
the consent screen, and call `whoami` again. `client_id` is now
populated.
6. Confirm RLS holds: add a table with a user-scoped policy and a tool
that reads it, then check a second user cannot see the first user's
rows.
7. Docs page renders at `/library/docs/headless/mcp-server`, and
`deno.json` / `.env.example` in the folder tree highlight as JSON and
bash rather than TypeScript.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Added an installable Supabase MCP Server block with user-scoped
authentication and a read-only identity tool.
  - Added MCP Blocks to documentation navigation and setup guidance.
- Code blocks now automatically detect syntax highlighting from file
names.
  - Added an option to hide the “Open in v0” button.

- **Documentation**
- Expanded MCP Server guidance covering installation, configuration,
validation, deployment, OAuth, and security.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: Saxon Fletcher <SaxonF@users.noreply.github.com>
2026-09-02 14:53:38 +10:00
Saxon Fletcher a045804e73 OAuth Consent Block (#48917)
<img width="1510" height="860" alt="image"
src="https://github.com/user-attachments/assets/36a748b7-bdeb-4685-8bb1-da911711874b"
/>


Introduces a new OAuth consent block in preparation for offering more
MCP focused blocks that require authentication and consent. The general
approach for this is to decouple consent block from authentication block
but provide guidance on how to use both. The alternative is to add auth
as a dependency to consent but apps may already have their own
authentication UI / flows.

The block is also positioned as a general OAuth Consent vs MCP Consent
as it can be put to use for other use cases outside of MCP on projects
who want to make use of the OAuth 2.1 Server offering.

A couple of changes outside of the block itself were required:
- Updated the Auth blocks to allow for a `next` param to redirect users
to after signing in
- Updated middleware so next param is correctly passed through to sign
in

## How to test

Requires Docker and a Supabase CLI recent enough to support
`[auth.oauth_server]` (verified on 2.109.0 / GoTrue v2.192.0).

### 1. Local Supabase with the OAuth server enabled

In your `supabase/config.toml`, edit the existing `[auth.oauth_server]`
section — `supabase init` already writes one, and adding a second fails
with `table oauth_server already exists`:

```toml
[auth.oauth_server]
enabled = true
authorization_url_path = "/oauth/consent"
allow_dynamic_registration = true
```

Set `site_url` to wherever your test app runs (e.g.
`http://localhost:3100`), then `supabase start`. Grab the API URL and
publishable key from `supabase status`.

### 2. A consumer app with the blocks installed

The consent block ships no login route by design, so pair it with an
auth block:

```bash
npx create-next-app@latest consent-test --ts --tailwind --app --yes
```

```bash
cd consent-test && npx shadcn@latest init -d -y && npx shadcn@latest add https://supabase.com/library/r/password-based-auth-nextjs.json https://supabase.com/library/r/oauth-consent-nextjs.json
```

To test this branch before it deploys, run `pnpm --filter ui-library
dev` and use `http://localhost:3004/library/r/...` instead. If you
changed anything under `registry/default/blocks/oauth-consent/**`, run
`pnpm --filter ui-library build:registry` first — shadcn fetches the
generated `public/r/*.json`, not the source.

Put `NEXT_PUBLIC_SUPABASE_URL` and
`NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY` in `.env.local` and start the app
on the port you set as `site_url`.

### 3. Register an OAuth client and start a real authorization request

```bash
curl -s -X POST http://127.0.0.1:54321/auth/v1/oauth/clients/register -H "Content-Type: application/json" -d '{"client_name":"Test Client","redirect_uris":["http://localhost:3100/callback"],"grant_types":["authorization_code"],"response_types":["code"],"scope":"openid profile email"}'
```

Then open the authorize URL in a browser (not curl — you need the
redirect chain and cookies):

```
http://127.0.0.1:54321/auth/v1/oauth/authorize?client_id=<id>&response_type=code&redirect_uri=http://localhost:3100/callback&scope=openid+profile+email&state=xyz&code_challenge=<challenge>&code_challenge_method=S256
```

Auth mints the `authorization_id` and redirects to
`<site_url>/oauth/consent?authorization_id=…`. An MCP client pointed at
your app is an even better driver, since that's the real consumer shape.

### 4. Cases to walk

| Case | Expected |
| --- | --- |
| Signed out, hit the authorize URL | Lands on
`/auth/login?next=%2Foauth%2Fconsent%3Fauthorization_id%3D…`; after
login, returns to the consent screen |
| Consent screen | Shows client name, redirect URI, signed-in email, and
requested scopes from `getAuthorizationDetails` |
| Allow access | Redirects to `redirect_uri` with `code` and your
original `state`; the code exchanges at `/oauth/token` for a real access
token |
| Deny | Redirects with `error=access_denied` and your `state` |
| Re-run the same authorize URL after approving | Skips the screen,
straight to callback with a new code |
| Visit `/oauth/consent` with no `authorization_id` | "This page needs
an authorization_id" |
| Stale or bogus `authorization_id` | Error shown, buttons still usable
|
| Double-click Allow | Exactly one `POST
/oauth/authorizations/<id>/consent` |

Test the react, react-router, or tanstack variant the same way if you're
touching them — the hook is duplicated per framework, so a fix in one
doesn't carry.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Added an OAuth 2.1 consent experience with client details, requested
scopes, redirect URI, and approve/deny actions.
* Added OAuth consent examples and registry blocks for Next.js, React,
React Router, and TanStack Start.
* Added OAuth documentation, navigation, and framework support across
the UI library.
* **Bug Fixes**
* Login flows now safely preserve valid same-origin redirect
destinations while rejecting unsafe URLs.
* OAuth routes can handle consent flows before authentication and
redirect safely to sign-in.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-08-20 20:05:35 +10:00
Saxon Fletcher cb35e1f98e chore(library): update routes, redirects, and naming (#48668)
Our UI Library registry is expanding to include blocks that go beyond UI
and in some cases focus purely on back-end. This PR is a precursor to
adding more back-end related blocks. This PR includes the `ui-library ->
library` rename plus redirects and small UI copy updates. Since this is
a rename we'll need to update Vercel configuration.

## Vercel rollout

Keep the Library project Root Directory as `apps/ui-library`

1. In the **Library** Vercel project, set:

   `NEXT_PUBLIC_BASE_PATH=/library`

Apply it to Preview and Production, then redeploy the Library project.

2. In the **www** Vercel project, add:

`NEXT_PUBLIC_LIBRARY_URL=<current value of NEXT_PUBLIC_UI_LIBRARY_URL>`

Apply it to Preview and Production. Keep `NEXT_PUBLIC_UI_LIBRARY_URL`
during the migration, then redeploy the www project.

3. Deploy in this order:

   1. Library project
   2. www project

4. Validate:

   - `/library`
   - `/library/docs/nextjs/password-based-auth`
   - `/ui` redirects to `/library`
- `/ui/docs/nextjs/password-based-auth` redirects to
`/library/docs/nextjs/password-based-auth`
- `/ui/docs/ai-editors-rules/*` still uses its existing Docs redirects

No Vercel dashboard redirect rules are needed. Environment-variable
changes require a new deployment.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Supabase UI Library has been renamed to **Supabase Library** across
navigation, pages, documentation, and resource links.
* The Library is now available at `/library`, with updated descriptions
covering components, blocks, and developer tools.
* **Bug Fixes**
* Added permanent redirects from legacy `/ui` URLs to corresponding
`/library` paths.
* Updated links throughout the site and documentation to prevent broken
navigation and references.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-08-11 13:37:32 +10:00
Saxon FletcherandIvan Vasilov 932b5dc3b8 Remove skills page from ui library (#47947)
<img width="1033" height="861" alt="image"
src="https://github.com/user-attachments/assets/54a104df-1db9-4b97-89db-6eec671b3af7"
/>

Removes the above AI Skills page from our ui library and instead
redirects to the more up to date ai skills docs page.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Added a direct “Install Skills” link to the AI Skills documentation
guide.
* Added a permanent redirect from the legacy prompts URL to the new AI
Skills guide.

* **Documentation**
* Updated the docs side navigation to list component pages under
“Blocks”.
* Removed the AI Skills page content and its navigation/search entries.
* Removed the AI editor rules documentation/registry entries, so they no
longer appear in the generated documentation set.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
2026-07-15 15:08:34 +02:00
Tiago Antunes b79a64e301 feat: add Realtime Flow component (#44273)
## 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?

Feature, docs update

## What is the new behavior?

This PR introduces a new `RealtimeFlow` component and hook to the UI
library for building collaborative React Flow with Supabase Realtime:
- keeps nodes and edges in sync across multiple connected clients in
real time
- uses Yjs with `@supabase-labs/y-supabase` to propagate flow updates
- supports optional persistence, so a flow can be restored from
previously saved shared state

## Additional context


https://github.com/user-attachments/assets/90d3a381-6f9c-427f-a493-5d91c2141462



<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Collaborative "Realtime Flow" diagram editor with syncing overlays and
a dual-view demo component
* Interactive demo page and registry example for live editing
(add/remove/rename nodes)
* Framework-ready registry packages for Next.js, React, React Router,
and TanStack

* **Documentation**
* Comprehensive docs added for Next.js, React, React Router, and
TanStack (usage, persistence, hook API)

* **Chores**
  * Added runtime dependency for the flow component package

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/44273)
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-05-26 13:28:52 +03:00
Danny WhiteandJoshen Lim 38e09e1754 chore(studio + docs + ui library): update auth email template copy docs (#45706)
## What kind of change does this PR introduce?

Docs update. Part of DEPR-198.

## What is the current behaviour?

Auth email template examples and Studio template labels still reflect
older default copy in a few places.

## What is the new behaviour?

Updates Auth docs, local development docs, related snippets, Studio
template labels, and UI Library examples to [match the updated default
Auth email
copy](https://linear.app/supabase/document/email-template-copywriting-updates-04bba460fd2a).


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Documentation**
* Updated authentication email template names and descriptions across
guides, replacing "Magic link" with "Sign-in link or code" terminology
* Revised security notification email naming from "Identity
linked/unlinked" to "Sign-in method linked/removed" and "MFA method" to
"Verification method"
* Updated email template example content with improved wording (e.g.,
"Confirm your email address" instead of "Confirm your signup")

* **UI Updates**
* Refined authentication-related UI text labels and descriptions in the
dashboard

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45706)
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2026-05-22 11:47:36 +10:00
cadfc8731c docs: realtime chat/infinite query vue&nuxt (#44426)
## 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?

This PR is the final PR for Supabase UI Vue&Nuxt with the Realtime Chat
and Infinite Query.

## Additional context

Initiative by Terry


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

## Release Notes

* **New Features**
* Realtime Chat now available for Vue and Nuxt.js frameworks with full
documentation and composables
  * Added Infinite Query composable for Vue with comprehensive guides

* **Documentation**
  * New Realtime Chat documentation pages for Vue and Nuxt.js
  * New Infinite Query documentation for Vue
  * Updated framework support in documentation navigation

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Terry Sutton <saltcod@gmail.com>
Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-21 16:33:21 -02:30
Ivan VasilovandJordi Enric 56de26fe22 chore: Migrate the monorepo to use Tailwind v4 (#45318)
This PR migrates the whole monorepo to use Tailwind v4:
- Removed `@tailwindcss/container-queries` plugin since it's included by
default in v4,
- Bump all instances of Tailwind to v4. Made minimal changes to the
shared config to remove non-supported features (`alpha` mentions),
- Migrate all apps to be compatible with v4 configs,
- Fix the `typography.css` import in 3 apps,
- Add missing rules which were included by default in v3,
- Run `pnpm dlx @tailwindcss/upgrade` on all apps, which renames a lot
of classes
- Rename all misnamed classes according to
https://tailwindcss.com/docs/upgrade-guide#renamed-utilities in all
apps.

---------

Co-authored-by: Jordi Enric <jordi.err@gmail.com>
2026-04-30 10:53:24 +00:00
Terry Sutton fc0aae8b14 Add new skills page (#45118)
Adds a new Skills page

<img width="642" height="1104" alt="CleanShot 2026-04-22 at 09 20 54"
src="https://github.com/user-attachments/assets/b1498f68-8779-4057-b8a2-e0b5a5298b4e"
/>

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Home hero now shows two side-by-side CTAs: "Get Started" and "Install
Skills" for quick access.

* **Documentation**
* Added a new "Skills" docs page describing Agent Skills and
installation options (CLI and plugin).
* Sidebar navigation updated: section renamed to "AI Skills" and the nav
item changed to "Skills" (marked new).

* **Removed**
  * Old "Prompts" documentation page removed.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-04-22 12:42:51 +00:00
Tiago AntunesandIvan Vasilov 9bf981f371 feat(ui-library): add Realtime Monaco ui component (#41766)
## 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?

Adds a new Realtime Monaco component to the UI Library, enabling
collaborative code editing with Supabase Realtime synchronization using
Monaco Editor and Yjs.

## Additional context

This is WIP and used for discuss further changes to the y-supabase
provider.

## Demo

https://github.com/user-attachments/assets/84a761e5-73bb-478e-979a-682121ffee89



<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

## Release Notes

* **New Features**
* Added a new Realtime Monaco collaborative code editor component with
real-time synchronization support across multiple frameworks (Next.js,
React, React Router, Tanstack).

* **Documentation**
* Added comprehensive documentation and usage guides for the Realtime
Monaco component across all supported frameworks.

* **Dependencies**
* Added Monaco editor, Yjs, y-monaco, and Supabase collaboration
packages.

<sub>✏️ Tip: You can customize this high-level summary in your review
settings.</sub>

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
2026-03-17 13:55:03 +01:00
Katerina SkroumpelouandIvan Vasilov 77e5180c5c chore: format files (#43668)
Format files. Run `pnpm format` at root.

---------

Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
2026-03-11 18:40:01 +00:00
54ac9fff25 docs: avatar and avatar stack for vue & nuxt (#43036)
## 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?

Add new blocks for Supabase UI Library for Avatar and Avatar Stack for
Vue & Nuxt

## Additional context

Initiative from Terry :)

---------

Co-authored-by: Terry Sutton <saltcod@gmail.com>
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
2026-03-11 09:15:00 +00:00
Ivan Vasilov 98c0cea1c3 feat: Add TDB block (#43490) 2026-03-09 14:32:44 +01:00
Ivan Vasilov 69ce915a9e chore: Rename SUPABASE_PUBLISHABLE_OR_ANON_KEY to SUPABASE_PUBLISHABLE_KEY for all blocks (#42652)
This PR renames all `SUPABASE_PUBLISHABLE_OR_ANON_KEY` env vars into
`SUPABASE_PUBLISHABLE_KEY` to make the new API keys default. This is in
coordination with the rest of the docs.

I've also cleaned up the `blocks/vue` package from unused files.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Breaking Changes**
* Public environment variable names renamed from PUBLISHABLE_OR_ANON_KEY
→ PUBLISHABLE_KEY across all framework integrations; update your
environment configs.

* **Documentation**
* All framework guides, .env examples and registry docs updated to use
the new variable names.

* **Chores**
* Cleaned up UI registry/templates: some example Vue registry items and
autogenerated registry artifacts were removed or simplified.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-02-11 10:23:16 +01:00
Ivan Vasilov 1cd1ebfc7f chire: Sort imports in all packages, cms, design-system and ui-library apps (#41610)
Sorted all imports in all packages, `cms`, `design-system` and
`ui-library` apps by running `pnpm format` on them.

All changes in this PR are done by the script.
2026-02-05 13:54:10 +01:00
b04da949aa Docs/dropzone cursor vue nuxt (#41553)
## 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?

This pull request adds documentation and support for the Dropzone (File
Upload) and Realtime Cursor components for both Vue and Nuxt.js
frameworks in the UI library. It updates the sidebar navigation,
introduces new documentation pages, and ensures these components are
referenced in the project overview and component listings.

TODO: install new dependencies and resolve conflicts in lock.json

## Additional context

Initiative by Terry :)


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Added Dropzone and Realtime Cursor components for Vue and Nuxt.js
(file upload with previews/validation; collaborative cursor tracking).

* **Documentation**
* Added comprehensive Vue and Nuxt.js docs and registry entries for
Dropzone and Realtime Cursor with usage examples and API guidance.

* **Bug Fixes**
* Fixed text escaping in several authentication and UI components for
consistent rendering.

<sub>✏️ Tip: You can customize this high-level summary in your review
settings.</sub>
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Terry Sutton <saltcod@gmail.com>
Co-authored-by: Claude Sonnet 4.5 <noreply@anthropic.com>
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
2026-01-30 10:49:29 -03:30
c538489ab2 Docs/vue nuxt social auth (#40662)
* docs: add vue social auth

* docs: add nuxt social auth

* docs: nuxt social auth typo

* docs: vue-nuxt-social-auth cr fix

* Apply suggestion from @saltcod

---------

Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
Co-authored-by: Terry Sutton <saltcod@gmail.com>
2025-12-03 15:29:18 -03:30
Ben f9059427ab docs: add explanation of Realtime Broadcast usage in Realtime Chat (#40882)
Adds a section explaining that Realtime Chat uses Realtime Broadcast, does not
store messages by default, and relies on onMessage for persistence. Improves
developer understanding of expected behavior.
2025-12-01 13:52:51 +13:00
Andrew Agostini 67faf37ca7 docs: Fix broken URLS batch 4 (#40548)
docs: Fix broken links in various guides and blog posts
2025-11-28 17:34:31 +08:00
3485cd4965 Docs/UI library vue nuxt password auth (#39405)
* docs: ui library password auth vue

* docs: ui library password auth nuxt

* Fix a pnpm-lock conflict.

* Adjust paths

* Fix import path

* Rebuild

* docs: remove shadcn-vue package

* Fix the pnpm-lock.

---------

Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
Co-authored-by: Terry Sutton <saltcod@gmail.com>
2025-11-10 08:27:38 -03:30
Francesco Sansalvadore 22049ddd2a Update connect dialog link params (#40002)
* fix connect dialog link params in docs

* move separator next to conditional component
2025-10-30 14:41:49 +01:00
Terry Sutton 6a2bb5cb76 Suggest with-supabase as the next starting point (#39184) 2025-10-07 10:17:31 -02:30
99499164dc Docs/UI library vue nuxt clients (#38279)
* docs: add vue client to ui-library

* docs: add missing vue client to llms.txt

* docs: add nuxt client to ui-library

* docs: wrong env variable names

* docs: fix dependencies

* docs: update client-nuxtjs.json

* Reinstall the deps so that the pnpm-lock.yaml has less changes.

* Add blocks/vue package.

* Remove the vue blocks from ui-library.

* Copy the vue blocks into ui-library.

* Clean up unneeded files.

* Regenerate the pnpm-lock file from master.

* Fix prettier errors.

* docs: update shadcn-vue cli

* docs: reusable server client

* Small things

* docs: improvments after CR

---------

Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
Co-authored-by: Terry Sutton <saltcod@gmail.com>
2025-09-26 12:48:47 +00:00
Ivan Vasilov 501918857b chore: Remove unused code from ui-library (#38374)
* Remove unneeded code.

* Remove more unused code.

* Update knip.jsonc for ui-library.

* Remove unneeded imports. Change the registry generation to only generate what's needed.

* Cleanup the rehype middleware (it wasn't used). Clean up the example blocks generation.

* Don't show the "show code" button in all dropzone examples.
2025-09-02 15:36:41 +02:00
Raúl Barroso 29ee6a2992 style: use GitHub's right product name (#38099)
* style: use GitHub's right product name

* fix: use correct kotlin provider
2025-08-22 13:43:47 +02:00
Ivan Vasilov 0bd892547c fix: Use the new envVars property in the shadcn blocks (#37585)
* Search and replace all mentions of SUPABASE_ANON_KEY.

* Copy over some comments from the nextjs template.

* Bump shadcn version.

* Change the building of the blocks to append envVars and docs.

* Use the new envVars property in the clients.

* Rebuild all blocks.

* Fix the wording.

* Update the docs.
2025-08-04 10:30:53 +02:00
Saxon FletcherandAlaister Young ef5c15a652 Add platform kit to library (#37068)
* add platform kit to library

* controls

* fix lockfile

* add missing deps

* dynamic form

* update dialog

* prettier

* drawer

* update ai route

---------

Co-authored-by: Alaister Young <a@alaisteryoung.com>
2025-07-14 22:04:57 +10:00
Terry Sutton 651587d98a React-based (#35425) 2025-05-02 09:11:24 -02:30
95ec79b98f feat: Infinite query hook block (#34650)
* infinite list

* infinite list block

* registration

* add missing supportedFrameworks

* Add tables to the supabase project. Generate the types for it.

* Refactor the infinite list query to be just a hook.

* Clean up the block. Add comments.

* Regenerate the registry.

* Fix the docs, the block is not framework-dependent.

* Set the package versions to * to be defined by other packages.

* Minor fixes to the block.

* Fix the examples.

* Fix the docs for the new hook.

* Fix the demo.

* Add more migrations to the db.

* Fix various issues with the query. Rewrote it to useSyncExternalStore.

* Fix the SSR for the hook.

* More fixes.

* Try initializing the store in a useEffect.

* Fix the pnpm-lock file.

* Minor fixes in the docs.

* Put the infinite list under a reusable components section.

* Update apps/ui-library/registry/default/blocks/infinite-query-hook/hooks/use-infinite-query.ts

* Change the example DB to use todos.

* Update the docs to be about Todos quickstart.

* List edits

* Fix link

* Regenerate the registry.

* Add query hook to the landing page.

---------

Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
Co-authored-by: Terry Sutton <saltcod@gmail.com>
2025-04-17 15:18:33 +02:00
Ivan VasilovandTerry Sutton 2ebf81c601 feat: Add social login to the UI Library (#34803)
* Add social login block.

* Regen the registry.

* Fix the nextjs social auth.

* Add social auth blocks for RR, Tanstack and React.

* Minor fixes.

* Add docs.

* Update the docs.

* Minor fixes to the blocks.

* Update the docs.

* Fix various doc issues.

* Fix the redirect in the password-based auth.

* Fix note about supabase clients in docs.

* Use with instead of assert in the registry imports.

* Update all auth blocks to use /protected.

* Update all docs for the password-based auth.

* Add new label to social auth.

* Fix docs issues.

* Light mode fix

* Smol fixes

* Fix the origin in the login route.

* Add social auth to the landing page.

* Regenerate the registry.

---------

Co-authored-by: Terry Sutton <saltcod@gmail.com>
2025-04-17 14:57:09 +02:00
Ivan Vasilov 802c790b14 fix: Minor fixes to the paths for the AI Editor rules (#34989)
* Rename all files to be mdc.

* Reference the new files in the registry item and fix the installation route.

* Regenerate the registry.

* Add additional note about using rules in monorepo.
2025-04-14 13:41:45 +02:00
Terry Sutton 04177b9438 UI lib/why react (#34675)
Why react faq
2025-04-08 22:25:43 +02:00
Jordi EnricandIvan Vasilov fc3a87ca39 add throttled callback to cursor hook and smooth movement (#34627)
* add throttled callback to cursor hook

* Simplify some parts, add a different kind of throttle.

* Fix the transition duration.

* Update the realtime cursor blocks.

* add docs for smoother cursors

---------

Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
2025-04-02 11:46:18 +02:00
Ivan Vasilov 23fd9a3a8e fix: Randomize the chat room (#34585)
* Randomize the chat.

* another try.

* Try another fix.

* Fix the docs pages.
2025-03-31 17:39:09 +02:00
Terry SuttonandIvan Vasilov 018d5afd9e UI lib/mobile fixes (#34576)
* Mobile fixes

* Add tanstack beta warning

* Fix tanstack alert for dark mode

---------

Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
2025-03-31 16:13:13 +02:00
Jordi Enric ef46214aec fix missing braces (#34568)
fix
2025-03-31 13:16:55 +02:00
Ivan Vasilov 429aa9d084 fix: More fixes for UI Library (#34552)
* Add realtime chat to the landing page.

* Fix the realtime cursor demo on the landing page.

* Fix a bad spelling of shadcn.

* Fix the wrong link in RR auth.

* Change the demo for reatlime cursor to use predefined names.

* Fix the React Router auth block docs.

* Regenerate the realtime chat code.

* Add a docs field to the clients blocks. Add a missing package to the nextjs client block.

* Add links to additional docs on the auth blocks pages.

* Add additional links to the current user avatar docs.

* Add additional links to the client docs.

* Add additional links to the dropzone docs.

* Add additional links to the avatar stack.

* Add additional links to the realtime cursor.

* Add additional links to the realtime chat.

* Fix the dropzone links.
2025-03-31 18:40:03 +08:00
Ivan Vasilov 156e8fd9b7 fix: Minor fixes for UI Library (#34535)
* Regenerate the registry.

* Fix the paths of the ai editor rules.

* Fix headings on clients and auth blocks.

* Fix realtime chat and avatar demos.

* Setup mdx-lint for the ui-library. Fix some obvious wordings.

* Fix the tooltips for the examples. Reorder the example pages.
2025-03-30 09:56:03 +02:00
Jordi EnricandIvan Vasilov daa33f4723 add realtime chat example (#34514)
* add realtime chat

* yolo

* clean up avatar references, leaving those out

* allow to pass messages and receive message change state

* add more names to reduce prob of same name popping up int he example

* update registry, add nextjs docs

* add more usage examples

* Minor changes on the realtime chat component.

* Regenerate the registry.

* docs

---------

Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
2025-03-28 22:31:13 +01:00
Terry SuttonandIvan Vasilov ba786f253e UI lib/component docs (#34515)
* Update usage sections

* Small style tweaks

* Update docs, tan capital S stack everywhere

* Fix the colors of the linkedcard.

* MInor fixes for all doc pages.

* Updates

* Spacing

---------

Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
2025-03-28 15:48:47 -02:30
Ivan Vasilov 95ade9f4ca fix: Fix the folder layout for the Nextjs Auth block (#34496)
* Change the destinations for next auth routes.

* Change the folder definition to /auth.

* Fix wrong docs.

* More fixes.

* Fix the redirect url to include the base path.

* Minor fixes to the other auth blocks.

* Fix example URLs. Remove some extra code.

* Minor fixes for the avatar stack demo.

* More fixes.
2025-03-28 13:15:33 -02:30
Terry SuttonandIvan Vasilov da45284386 UI lib/quickstart (#34499)
* Add quickstart

* Make all links open in a new tab.

* Update instructions

* Update

---------

Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
2025-03-28 13:01:39 -02:30
Terry SuttonandIvan Vasilov f3b67a10d3 UI library/rr (#34384)
* Add rr auth block

* Fix file structure

* Update components with new flow

* Fix the registry item for react router auth.

* Update the forgot-password for react router.

* Fix the rest of the link imports.

* Fix the react route client.

* Refactor the auth block for React Router.

* Add config for recovery mail to the ui library supabase config.

* snapshot.

* Minor fixes.

* Minor doc fixes.

---------

Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
2025-03-27 22:48:28 +01:00
Terry SuttonandIvan Vasilov 7b3a63b389 UI lib/docs (#34448)
* Buncha docs

* Add prompts instructions

* Minor fixes.

---------

Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
2025-03-27 17:20:38 +00:00
Ivan Vasilov a81d056d79 feat: Extra components for UI Library (#34363)
* Fix the v0 button. Add some more docs. (+13 squashed commits)
Squashed commits:
[cc5954779e] Add success state to the forgot-password form.
[258bfb1015] Simplify the tanstack auth block.
[1ba5c223d9] Add missing pages to the nextjs auth.
[b842e4acec] Fix the env vars in the React client.
[2a2bcc5356] Fix the command URL.
[a26a2d36c2] Add a tanstack block for password-based auth.
[d68881f0d5] Fix the tanstack client.
[1fd2e16d96] Add missing deps to satisfy TS build.
[9797d745df] Various fixes.
[3e9b676e99] Fix the registryBlock component.
[540a5d600b] Set the supabase project for testing.
[3eba892c92] Regenerate the llms.txt file.
[bf526a0ecb] Regenerate the registry files.

* Add current user avatar.

* Add RealtimeAvatarStack.

* Use the fields which are populated by Auth.

* Regenerate the registry files.

* Fix the imports.

* Rebuild the registry files. Add a github login to the supabase config.

* Minor fixes for the components.

* Minor fix to the avatar stack.

* Remove peekCode, show showCode prop to component preview.

* Add examples for avatar stack and current user avatar.

* Use the new generatenames function in the cursors.

* Add documentation for avatar stack and avatar.

* Switch the profile images.

* Fix a type error.

* More fixes.
2025-03-27 17:41:31 +01:00