Commit Graph
33 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
3e79df3ece feat(library): serve the block catalog as Markdown and harden the exporter (#50370)
## 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, bug fix.

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

## What is the current behavior?

An agent can already fetch any guide as Markdown, but has no way to find
out what guides exist: the entry point is a rendered React page.

The exporter also fails quietly in ways that ship wrong output rather
than failing the build:

- An unknown component silently unwraps to its children, so a component
rename drops its rendered content.
- A registry item that cannot be read produces a page with no file
listing.
- A link to a missing page produces a 404 URL.
- An unrecognized install framework produces a plausible command for the
wrong CLI.
- Only absolute `/library/docs` links are rewritten, so in-page anchors
and sibling links break in the export.

## What is the new behavior?

`/library` negotiates Markdown the same way the guides do — `Accept:
text/markdown`, or an explicit `/library/index.md` — and returns a
categorized catalog with every block, its description, its framework
variants, and a link to each guide's Markdown.

`config/library.ts` is the single catalog description the generator
reads, and a test ties it to the content directory in both directions: a
guide cannot be added without a catalog entry, or listed without a
guide.

Each quiet failure above now throws, and links resolve against the page
they appear on and are checked against the set of published documents.

```bash
curl -H 'Accept: text/markdown' https://supabase.com/library
```

## Additional context

`config/library.ts` also carries the category and preview metadata the
redesigned homepage consumes in the last PR of the stack; here it is
exercised by the Markdown index and its test.


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

- **New Features**
- Added a browsable library catalog covering categories, blocks, starter
apps, and supported frameworks.
- Added Markdown versions of the library homepage and documentation for
compatible tools and workflows.
- Added framework-aware links and expanded registry information,
including dependencies and source details.
- Markdown requests now work for the homepage and documentation, while
browser requests continue receiving HTML.

- **Bug Fixes**
- Improved document link handling, metadata validation, slug
consistency, and detection of duplicate or missing documentation
entries.

- **Tests**
- Added coverage for catalog routes, Markdown generation, homepage
negotiation, document parsing, and framework-specific links.
<!-- 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-22 14:14:04 +02: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
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 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
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
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
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
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
Ivan Vasilov bbfccdf471 chore: Use @/* as an alias for importing in-package files (#41607)
* Remove extra file.

* Remove unneeded tsconfig.jsons.

* Add @/* alias for importing in-package files to all apps.

* Remove baseUrl from all apps except studio (it'll require changes in almost all files).

* Fix baseUrl issues in docs, ui-library and design-system.

* Fix the typecheck for cms app. Fix all baseUrl errors in the cms app.

* Add deprecated flag to baseUrl in www.
2025-12-30 17:46:24 +01:00
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
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
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 1332d30f2f fix: Fix the og-image on UI library pages (#37439)
* Remove the og-image from the docs pages to see if they're pulled from the main layout.

* Merge the doc metadata with the metadata from the main layout.
2025-07-25 16:03:27 +08: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
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 VasilovandTerry Sutton fe3e067c0c fix: UI library more fixes (#34573)
* Fix a react warning.

* Fix the command for yarn.

* Add a link to the block on the landing page.

* Fix links in the command menu.

* Fix a type error.

* Add meta setup.

---------

Co-authored-by: Terry Sutton <saltcod@gmail.com>
2025-03-31 13:46:26 +00:00
Jonathan Summers-Muir 3a9ff560ab chore: ui lib / new sidebar mobile hook, and props update, more SSR (#34544)
* init

* more SSR. fixed hook. providers simplified

* update

* Update side-navigation-item.tsx
2025-03-31 11:16:26 +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
Saxon FletcherandIvan Vasilov 82749a7bf6 ui library styles (#34500)
* ui library styles

* fix command

* mobile home

* home

* sidebar

* Fix the URL to the quickstart.

* Fix the install route.

* Fix the command url.

* Fix the command again.

---------

Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
2025-03-28 12:41:18 +00:00
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
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
Saxon FletcherandJonathan Summers-Muir e8698432bc Chore/move framework (#34426)
* init

* Update component-preview.tsx

* move framework selector

* simplified framework selection

* moaar

* remove

* Update framework-selector.tsx

* side menu item fix

---------

Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
2025-03-27 17:39:01 +08:00
Terry SuttonandIvan Vasilov bc0977f492 UI library/docs (#34377)
* Add faq sections

* Update the faq.

* Minor updates to the client and auth guides.

* Add missing pages to the sidebar.

* Rename the React category to React SPA.

---------

Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
2025-03-25 15:00:13 +01:00
Ivan Vasilov 0990155ae7 feat: more fixes for UI library (#34355)
* Regenerate the registry files.

* Regenerate the llms.txt file.

* Set the supabase project for testing.

* Fix the registryBlock component.

* Various fixes.

* Add missing deps to satisfy TS build.

* Fix the tanstack client.

* Add a tanstack block for password-based auth.

* Fix the command URL.

* Fix the env vars in the React client.

* Add missing pages to the nextjs auth.

* Simplify the tanstack auth block.

* Add success state to the forgot-password form.

* Fix the v0 button. Add some more docs.

* Revert some changes.
2025-03-24 14:24:59 +01:00
Ivan Vasilov 33127bb6ab feat: Library (#34294)
* Copy the design-system app into a new one for ui-library.

* Remove unneeded content.

* Add supabase config.

* Cleanup the css.

* Add bunch of packages.

* Cleanup the registry.

* Regenerate the registry.

* Add needed components for documenting components.

* Add the pages for the components.

* Fix the RegistryBlock.

* Various fixes.

* Add a turbo definition for ui-library.

* Rename Remix to React Router.

* Reorder the pages for all frameworks.

* Remove the bottom pager.

* Fix the pages and command menu.

* Various fixes.

* Minor fixes.

* Add ai editor rules.

* Various fixes.

* Add local supabase env vars.

* Try to fix a package error.

* Bunch of various fixes.

* Fix lint errors.
2025-03-20 22:11:07 +01:00