mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 01:45:10 +03:00
Danny White
3b06c6c7cc
## What kind of change does this PR introduce?
Bug fix / docs UI polish.
## What is the current behavior?
- Many docs `GlassPanel`s use `background={false}`, so hover only tweaks
the border and reads as having no hover state
- Compact icon+label grids still use `IconPanel`, which has a broken
`-z-10` hover fill and overlaps with the newer `IconLink` pattern
- Description card grids jump to 3-up too early on medium widths
## What is the new behavior?
**GlassPanel**
- Removes the `background` prop; cards always use the filled surface
with stronger border hover
- Tightens icon→description gap (`gap-6` → `gap-3`)
- Decorative icons/logos use empty `alt` so screen readers don’t hear
the title twice
**Icon tiles**
- Retires `IconPanel` from docs and deletes it from `ui-patterns`
- Uses `IconLink` / `IconLinkList` for compact navigation tiles (auth
providers, social login, etc.)
- Adds `IconLinkButton` for SMS provider pickers (same chrome, opens a
dialog)
- Adds focus styles, list labelling, and dialog-trigger ARIA where
needed
**Layout / content**
- Migrate-to-Supabase description cards on resources use `GlassPanel`
(not slim icon tiles)
- Grid spans use `md:… xl:…` so cards stay 2-up until ~1280px
- Fixes migrate links to `/guides/platform/migrating-to-supabase/…` and
SSR quickstarts to `creating-a-client` with framework query params
- Moves the Extensions list `key` onto the outer `Link`
| Before | After |
| --- | --- |
| <img width="1185" height="1323" alt="Resources Supabase Docs"
src="https://github.com/user-attachments/assets/1677bf65-d3a3-4202-8c70-e758f7c3bcce"
/> | <img width="1185" height="1323" alt="Resources Supabase Docs"
src="https://github.com/user-attachments/assets/51760f0f-62b6-4010-9841-de26039f37b4"
/> |
## Additional context
Homepage compact sections already use `IconLinkList` from #48317; this
PR finishes that pattern for remaining docs `IconPanel` callsites and
cleans up GlassPanel hover.
`www/customers` only drops the removed `background` prop; those cards
already use the filled surface via `logo`.
## Test plan
- [ ] `/guides/getting-started`: GlassPanels show filled surface and
clearer border hover
- [ ] `/guides/resources`: migrate cards are GlassPanels with working
`/platform/…` links; 2-up until xl
- [ ] `/guides/auth/social-login` and auth providers partial: IconLink
tiles hover/focus correctly
- [ ] `/guides/auth/phone-login`: SMS provider buttons open dialogs;
keyboard focus works
- [ ] Docs homepage: migrate / self-host IconLinkLists unchanged in
behaviour
- [ ] `/guides/auth/server-side`: Next.js / SvelteKit cards resolve on
docs preview
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Improved Layouts**
* Made “GlassPanel” card grids more responsive and consistent; refined
card and success badge spacing for a cleaner presentation.
* **Updated Documentation**
* Refreshed multiple guide and resource pages (including quickstarts and
migration content) with standardized card layouts and updated link
destinations.
* **Component Updates**
* Standardized “GlassPanel” styling (background toggle removed) and
simplified icon-based panels; added an `IconLinkButton` for action
tiles; updated authentication provider grids to use the shared tile UI.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
185 lines
7.1 KiB
Plaintext
185 lines
7.1 KiB
Plaintext
---
|
|
id: 'ai'
|
|
title: 'AI & Vectors'
|
|
description: 'The best vector database is the database you already have.'
|
|
subtitle: 'The best vector database is the database you already have.'
|
|
hideToc: true
|
|
---
|
|
|
|
Supabase provides an open source toolkit for developing AI applications using Postgres and pgvector. Use the Supabase client libraries to store, index, and query your vector embeddings at scale.
|
|
|
|
The toolkit includes:
|
|
|
|
- A [vector store](/docs/guides/ai/vector-columns) and embeddings support using Postgres and pgvector.
|
|
- A [Python client](/docs/guides/ai/vecs-python-client) for managing unstructured embeddings.
|
|
- An [embedding generation](/docs/guides/ai/quickstarts/generate-text-embeddings) process using open source models directly in Edge Functions.
|
|
- [Database migrations](/docs/guides/ai/examples/headless-vector-search#prepare-your-database) for managing structured embeddings.
|
|
- Integrations with all popular AI providers, such as [OpenAI](/docs/guides/ai/examples/openai), [Hugging Face](/docs/guides/ai/hugging-face), [LangChain](/docs/guides/ai/langchain), and more.
|
|
|
|
## Search
|
|
|
|
You can use Supabase to build different types of search features for your app, including:
|
|
|
|
- [Semantic search](/docs/guides/ai/semantic-search): search by meaning rather than exact keywords
|
|
- [Keyword search](/docs/guides/ai/keyword-search): search by words or phrases
|
|
- [Hybrid search](/docs/guides/ai/hybrid-search): combine semantic search with keyword search
|
|
|
|
## Examples
|
|
|
|
Check out all of the AI [templates and examples](https://github.com/supabase/supabase/tree/master/examples/ai) in our GitHub repository.
|
|
|
|
{/* <!-- vale off --> */}
|
|
|
|
<div className="grid md:grid-cols-12 gap-4 not-prose">
|
|
<div className="col-span-12 md:col-span-6 xl:col-span-4">
|
|
<Link href="/guides/ai/examples/headless-vector-search" passHref>
|
|
<GlassPanel
|
|
icon={'/docs/img/icons/github-icon'}
|
|
hasLightIcon={true}
|
|
title="Headless Vector Search"
|
|
>
|
|
A toolkit to perform vector similarity search on your knowledge base embeddings.
|
|
</GlassPanel>
|
|
</Link>
|
|
</div>
|
|
<div className="col-span-12 md:col-span-6 xl:col-span-4">
|
|
<Link href="/guides/ai/examples/image-search-openai-clip" passHref>
|
|
<GlassPanel
|
|
icon={'/docs/img/icons/github-icon'}
|
|
hasLightIcon={true}
|
|
title="Image Search with OpenAI CLIP"
|
|
>
|
|
Implement image search with the OpenAI CLIP Model and Supabase Vector.
|
|
</GlassPanel>
|
|
</Link>
|
|
</div>
|
|
<div className="col-span-12 md:col-span-6 xl:col-span-4">
|
|
<Link href="/guides/ai/examples/huggingface-image-captioning" passHref>
|
|
<GlassPanel
|
|
icon={'/docs/img/icons/github-icon'}
|
|
hasLightIcon={true}
|
|
title="Hugging Face inference"
|
|
>
|
|
Generate image captions using Hugging Face.
|
|
</GlassPanel>
|
|
</Link>
|
|
</div>
|
|
<div className="col-span-12 md:col-span-6 xl:col-span-4">
|
|
<Link href="/guides/ai/examples/openai" passHref>
|
|
<GlassPanel
|
|
icon={'/docs/img/icons/github-icon'}
|
|
hasLightIcon={true}
|
|
title="OpenAI completions"
|
|
>
|
|
Generate GPT text completions using OpenAI in Edge Functions.
|
|
</GlassPanel>
|
|
</Link>
|
|
</div>
|
|
<div className="col-span-12 md:col-span-6 xl:col-span-4">
|
|
<Link href="/guides/ai/examples/building-chatgpt-plugins" passHref>
|
|
<GlassPanel
|
|
icon={'/docs/img/icons/github-icon'}
|
|
hasLightIcon={true}
|
|
title="Building ChatGPT Plugins"
|
|
>
|
|
Use Supabase as a Retrieval Store for your ChatGPT plugin.
|
|
</GlassPanel>
|
|
</Link>
|
|
</div>
|
|
<div className="col-span-12 md:col-span-6 xl:col-span-4">
|
|
<Link href="/guides/ai/examples/nextjs-vector-search" passHref>
|
|
<GlassPanel
|
|
icon={'/docs/img/icons/github-icon'}
|
|
hasLightIcon={true}
|
|
title="Vector search with Next.js and OpenAI"
|
|
>
|
|
Learn how to build a ChatGPT-style doc search powered by Next.js, OpenAI, and Supabase.
|
|
</GlassPanel>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
{/* <!-- vale on --> */}
|
|
|
|
## Integrations
|
|
|
|
{/* <!-- vale off --> */}
|
|
|
|
<div className="grid md:grid-cols-12 gap-4 not-prose">
|
|
<div className="col-span-12 md:col-span-6 xl:col-span-4">
|
|
<Link href="/guides/ai/examples/building-chatgpt-plugins" passHref>
|
|
<GlassPanel title="OpenAI">
|
|
OpenAI is an AI research and deployment company. Supabase provides a way to use OpenAI in
|
|
your applications.
|
|
</GlassPanel>
|
|
</Link>
|
|
</div>
|
|
<div className="col-span-12 md:col-span-6 xl:col-span-4">
|
|
<Link href="/guides/ai/integrations/amazon-bedrock" passHref>
|
|
<GlassPanel title="Amazon Bedrock">
|
|
A fully managed service that offers a choice of high-performing foundation models from
|
|
leading AI companies.
|
|
</GlassPanel>
|
|
</Link>
|
|
</div>
|
|
<div className="col-span-12 md:col-span-6 xl:col-span-4">
|
|
<Link href="/guides/ai/hugging-face" passHref>
|
|
<GlassPanel title="Hugging Face">
|
|
Hugging Face is an open-source provider of NLP technologies. Supabase provides a way to use
|
|
Hugging Face's models in your applications.
|
|
</GlassPanel>
|
|
</Link>
|
|
</div>
|
|
<div className="col-span-12 md:col-span-6 xl:col-span-4">
|
|
<Link href="/guides/ai/langchain" passHref>
|
|
<GlassPanel title="LangChain">
|
|
LangChain is a language-agnostic, open-source, and self-hosted API for text translation,
|
|
summarization, and sentiment analysis.
|
|
</GlassPanel>
|
|
</Link>
|
|
</div>
|
|
<div className="col-span-12 md:col-span-6 xl:col-span-4">
|
|
<Link href="/guides/ai/integrations/llamaindex" passHref>
|
|
<GlassPanel title="LlamaIndex">
|
|
LlamaIndex is a data framework for your LLM applications.
|
|
</GlassPanel>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
{/* <!-- vale on --> */}
|
|
|
|
## Case studies
|
|
|
|
{/* <!-- vale off --> */}
|
|
|
|
<div className="grid md:grid-cols-12 gap-4 not-prose">
|
|
<div className="col-span-12 md:col-span-6 xl:col-span-4">
|
|
<Link href="https://supabase.com/customers/berriai" passHref>
|
|
<GlassPanel title="Berri AI Boosts Productivity by Migrating from AWS RDS to Supabase with pgvector">
|
|
Learn how Berri AI overcame challenges with self-hosting their vector database on AWS RDS
|
|
and successfully migrated to Supabase.
|
|
</GlassPanel>
|
|
</Link>
|
|
</div>
|
|
<div className="col-span-12 md:col-span-6 xl:col-span-4">
|
|
<Link href="https://supabase.com/customers/firecrawl" passHref>
|
|
<GlassPanel title="Firecrawl switches from Pinecone to Supabase for Postgres vector embeddings">
|
|
How Firecrawl boosts efficiency and accuracy of chat powered search for documentation using
|
|
Supabase with pgvector
|
|
</GlassPanel>
|
|
</Link>
|
|
</div>
|
|
<div className="col-span-12 md:col-span-6 xl:col-span-4">
|
|
<Link href="https://supabase.com/customers/markprompt" passHref>
|
|
<GlassPanel title="Markprompt: GDPR-Compliant AI Chatbots for Docs and Websites">
|
|
AI-powered chatbot platform, Markprompt, empowers developers to deliver efficient and
|
|
GDPR-compliant prompt experiences on top of their content, by leveraging Supabase's secure
|
|
and privacy-focused database and authentication solutions
|
|
</GlassPanel>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
{/* <!-- vale on --> */}
|