realtime: add ai rules (supabase#38220)

---------

Co-authored-by: Ivan Vasilov <[email protected]>

Author: filipecabaco

apps/ui-library/__registry__/index.tsx

@@ -421,7 +421,7 @@ export const Index: Record<string, any> = {
       registryDependencies: [],
 
       source: "",
-      files: ["registry/default/ai-editor-rules/create-db-functions.mdc","registry/default/ai-editor-rules/create-migration.mdc","registry/default/ai-editor-rules/create-rls-policies.mdc","registry/default/ai-editor-rules/postgres-sql-style-guide.mdc","registry/default/ai-editor-rules/writing-supabase-edge-functions.mdc"],
+      files: ["registry/default/ai-editor-rules/create-db-functions.mdc","registry/default/ai-editor-rules/create-migration.mdc","registry/default/ai-editor-rules/create-rls-policies.mdc","registry/default/ai-editor-rules/postgres-sql-style-guide.mdc","registry/default/ai-editor-rules/writing-supabase-edge-functions.mdc","registry/default/ai-editor-rules/use-realtime.mdc"],
       category: "undefined",
       subcategory: "undefined",
       chunks: []

apps/ui-library/public/llms.txt

@@ -1,5 +1,5 @@
 # Supabase UI Library
-Last updated: 2025-07-13T02:57:35.186Z
+Last updated: 2025-08-27T11:26:46.645Z
 
 ## Overview
 Library of components for your project. The components integrate with Supabase and are shadcn compatible.
@@ -31,6 +31,8 @@ Library of components for your project. The components integrate with Supabase a
     - Real-time cursor sharing for collaborative applications
 - [Social Authentication](https://supabase.com/ui/docs/nextjs/social-auth)
     - Social authentication block for Next.js
+- [Platform Kit](https://supabase.com/ui/docs/platform/platform-kit)
+    - The easiest way to build platforms on top of Supabase
 - [Supabase Client Libraries](https://supabase.com/ui/docs/react-router/client)
     - Supabase client for React Router
 - [Current User Avatar](https://supabase.com/ui/docs/react-router/current-user-avatar)

apps/ui-library/public/r/ai-editor-rules.json

@@ -39,7 +39,7 @@
     },
     {
       "path": "registry/default/blocks/social-auth-nextjs/components/login-form.tsx",
-      "content": "'use client'\n\nimport { cn } from '@/lib/utils'\nimport { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\nimport { Button } from '@/registry/default/components/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/components/ui/card'\nimport { useState } from 'react'\n\nexport function LoginForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {\n  const [error, setError] = useState<string | null>(null)\n  const [isLoading, setIsLoading] = useState(false)\n\n  const handleSocialLogin = async (e: React.FormEvent) => {\n    e.preventDefault()\n    const supabase = createClient()\n    setIsLoading(true)\n    setError(null)\n\n    try {\n      const { error } = await supabase.auth.signInWithOAuth({\n        provider: 'github',\n        options: {\n          redirectTo: `${window.location.origin}/auth/oauth?next=/protected`,\n        },\n      })\n\n      if (error) throw error\n    } catch (error: unknown) {\n      setError(error instanceof Error ? error.message : 'An error occurred')\n      setIsLoading(false)\n    }\n  }\n\n  return (\n    <div className={cn('flex flex-col gap-6', className)} {...props}>\n      <Card>\n        <CardHeader>\n          <CardTitle className=\"text-2xl\">Welcome!</CardTitle>\n          <CardDescription>Sign in to your account to continue</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form onSubmit={handleSocialLogin}>\n            <div className=\"flex flex-col gap-6\">\n              {error && <p className=\"text-sm text-destructive-500\">{error}</p>}\n              <Button type=\"submit\" className=\"w-full\" disabled={isLoading}>\n                {isLoading ? 'Logging in...' : 'Continue with Github'}\n              </Button>\n            </div>\n          </form>\n        </CardContent>\n      </Card>\n    </div>\n  )\n}\n",
+      "content": "'use client'\n\nimport { cn } from '@/lib/utils'\nimport { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\nimport { Button } from '@/registry/default/components/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/components/ui/card'\nimport { useState } from 'react'\n\nexport function LoginForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {\n  const [error, setError] = useState<string | null>(null)\n  const [isLoading, setIsLoading] = useState(false)\n\n  const handleSocialLogin = async (e: React.FormEvent) => {\n    e.preventDefault()\n    const supabase = createClient()\n    setIsLoading(true)\n    setError(null)\n\n    try {\n      const { error } = await supabase.auth.signInWithOAuth({\n        provider: 'github',\n        options: {\n          redirectTo: `${window.location.origin}/auth/oauth?next=/protected`,\n        },\n      })\n\n      if (error) throw error\n    } catch (error: unknown) {\n      setError(error instanceof Error ? error.message : 'An error occurred')\n      setIsLoading(false)\n    }\n  }\n\n  return (\n    <div className={cn('flex flex-col gap-6', className)} {...props}>\n      <Card>\n        <CardHeader>\n          <CardTitle className=\"text-2xl\">Welcome!</CardTitle>\n          <CardDescription>Sign in to your account to continue</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form onSubmit={handleSocialLogin}>\n            <div className=\"flex flex-col gap-6\">\n              {error && <p className=\"text-sm text-destructive-500\">{error}</p>}\n              <Button type=\"submit\" className=\"w-full\" disabled={isLoading}>\n                {isLoading ? 'Logging in...' : 'Continue with GitHub'}\n              </Button>\n            </div>\n          </form>\n        </CardContent>\n      </Card>\n    </div>\n  )\n}\n",
       "type": "registry:component"
     },
     {

apps/ui-library/public/r/social-auth-nextjs.json

@@ -29,7 +29,7 @@
     },
     {
       "path": "registry/default/blocks/social-auth-react-router/app/routes/login.tsx",
-      "content": "import { createClient } from '@/registry/default/clients/react-router/lib/supabase/server'\nimport { Button } from '@/registry/default/components/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/components/ui/card'\nimport { type ActionFunctionArgs, redirect, useFetcher } from 'react-router'\n\nexport const action = async ({ request }: ActionFunctionArgs) => {\n  const { supabase } = createClient(request)\n  const origin = new URL(request.url).origin\n\n  const { data, error } = await supabase.auth.signInWithOAuth({\n    provider: 'github',\n    options: {\n      redirectTo: `${origin}/auth/oauth?next=/protected`,\n    },\n  })\n\n  if (data.url) {\n    return redirect(data.url)\n  }\n\n  if (error) {\n    return {\n      error: error instanceof Error ? error.message : 'An error occurred',\n    }\n  }\n}\n\nexport default function Login() {\n  const fetcher = useFetcher<typeof action>()\n\n  const error = fetcher.data?.error\n  const loading = fetcher.state === 'submitting'\n\n  return (\n    <div className=\"flex min-h-svh w-full items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <div className=\"flex flex-col gap-6\">\n          <Card>\n            <CardHeader>\n              <CardTitle className=\"text-2xl\">Welcome!</CardTitle>\n              <CardDescription>Sign in to your account to continue</CardDescription>\n            </CardHeader>\n            <CardContent>\n              <fetcher.Form method=\"post\">\n                <div className=\"flex flex-col gap-6\">\n                  {error && <p className=\"text-sm text-destructive-500\">{error}</p>}\n                  <Button type=\"submit\" className=\"w-full\" disabled={loading}>\n                    {loading ? 'Logging in...' : 'Continue with Github'}\n                  </Button>\n                </div>\n              </fetcher.Form>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "content": "import { createClient } from '@/registry/default/clients/react-router/lib/supabase/server'\nimport { Button } from '@/registry/default/components/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/components/ui/card'\nimport { type ActionFunctionArgs, redirect, useFetcher } from 'react-router'\n\nexport const action = async ({ request }: ActionFunctionArgs) => {\n  const { supabase } = createClient(request)\n  const origin = new URL(request.url).origin\n\n  const { data, error } = await supabase.auth.signInWithOAuth({\n    provider: 'github',\n    options: {\n      redirectTo: `${origin}/auth/oauth?next=/protected`,\n    },\n  })\n\n  if (data.url) {\n    return redirect(data.url)\n  }\n\n  if (error) {\n    return {\n      error: error instanceof Error ? error.message : 'An error occurred',\n    }\n  }\n}\n\nexport default function Login() {\n  const fetcher = useFetcher<typeof action>()\n\n  const error = fetcher.data?.error\n  const loading = fetcher.state === 'submitting'\n\n  return (\n    <div className=\"flex min-h-svh w-full items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <div className=\"flex flex-col gap-6\">\n          <Card>\n            <CardHeader>\n              <CardTitle className=\"text-2xl\">Welcome!</CardTitle>\n              <CardDescription>Sign in to your account to continue</CardDescription>\n            </CardHeader>\n            <CardContent>\n              <fetcher.Form method=\"post\">\n                <div className=\"flex flex-col gap-6\">\n                  {error && <p className=\"text-sm text-destructive-500\">{error}</p>}\n                  <Button type=\"submit\" className=\"w-full\" disabled={loading}>\n                    {loading ? 'Logging in...' : 'Continue with GitHub'}\n                  </Button>\n                </div>\n              </fetcher.Form>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:file",
       "target": "app/routes/login.tsx"
     },

apps/ui-library/public/r/social-auth-react-router.json

@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/default/blocks/social-auth-react/components/login-form.tsx",
-      "content": "'use client'\n\nimport { cn } from '@/lib/utils'\nimport { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\nimport { Button } from '@/registry/default/components/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/components/ui/card'\nimport { useState } from 'react'\n\nexport function LoginForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {\n  const [error, setError] = useState<string | null>(null)\n  const [isLoading, setIsLoading] = useState(false)\n\n  const handleSocialLogin = async (e: React.FormEvent) => {\n    e.preventDefault()\n    const supabase = createClient()\n    setIsLoading(true)\n    setError(null)\n\n    try {\n      const { error } = await supabase.auth.signInWithOAuth({\n        provider: 'github',\n      })\n\n      if (error) throw error\n      location.href = '/protected'\n    } catch (error: unknown) {\n      setError(error instanceof Error ? error.message : 'An error occurred')\n      setIsLoading(false)\n    }\n  }\n\n  return (\n    <div className={cn('flex flex-col gap-6', className)} {...props}>\n      <Card>\n        <CardHeader>\n          <CardTitle className=\"text-2xl\">Welcome!</CardTitle>\n          <CardDescription>Sign in to your account to continue</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form onSubmit={handleSocialLogin}>\n            <div className=\"flex flex-col gap-6\">\n              {error && <p className=\"text-sm text-destructive-500\">{error}</p>}\n              <Button type=\"submit\" className=\"w-full\" disabled={isLoading}>\n                {isLoading ? 'Logging in...' : 'Continue with Github'}\n              </Button>\n            </div>\n          </form>\n        </CardContent>\n      </Card>\n    </div>\n  )\n}\n",
+      "content": "'use client'\n\nimport { cn } from '@/lib/utils'\nimport { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\nimport { Button } from '@/registry/default/components/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/components/ui/card'\nimport { useState } from 'react'\n\nexport function LoginForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {\n  const [error, setError] = useState<string | null>(null)\n  const [isLoading, setIsLoading] = useState(false)\n\n  const handleSocialLogin = async (e: React.FormEvent) => {\n    e.preventDefault()\n    const supabase = createClient()\n    setIsLoading(true)\n    setError(null)\n\n    try {\n      const { error } = await supabase.auth.signInWithOAuth({\n        provider: 'github',\n      })\n\n      if (error) throw error\n      location.href = '/protected'\n    } catch (error: unknown) {\n      setError(error instanceof Error ? error.message : 'An error occurred')\n      setIsLoading(false)\n    }\n  }\n\n  return (\n    <div className={cn('flex flex-col gap-6', className)} {...props}>\n      <Card>\n        <CardHeader>\n          <CardTitle className=\"text-2xl\">Welcome!</CardTitle>\n          <CardDescription>Sign in to your account to continue</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form onSubmit={handleSocialLogin}>\n            <div className=\"flex flex-col gap-6\">\n              {error && <p className=\"text-sm text-destructive-500\">{error}</p>}\n              <Button type=\"submit\" className=\"w-full\" disabled={isLoading}>\n                {isLoading ? 'Logging in...' : 'Continue with GitHub'}\n              </Button>\n            </div>\n          </form>\n        </CardContent>\n      </Card>\n    </div>\n  )\n}\n",
       "type": "registry:component"
     },
     {

apps/ui-library/public/r/social-auth-react.json

@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "registry/default/blocks/social-auth-tanstack/components/login-form.tsx",
-      "content": "import { cn } from '@/lib/utils'\nimport { createClient } from '@/registry/default/clients/tanstack/lib/supabase/client'\nimport { Button } from '@/registry/default/components/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/components/ui/card'\nimport { useState } from 'react'\n\nexport function LoginForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {\n  const [error, setError] = useState<string | null>(null)\n  const [isLoading, setIsLoading] = useState(false)\n\n  const handleSocialLogin = async (e: React.FormEvent) => {\n    e.preventDefault()\n    const supabase = createClient()\n    setIsLoading(true)\n    setError(null)\n\n    try {\n      const { error } = await supabase.auth.signInWithOAuth({\n        provider: 'github',\n        options: {\n          redirectTo: `${window.location.origin}/auth/oauth?next=/protected`,\n        },\n      })\n\n      if (error) throw error\n    } catch (error: unknown) {\n      setError(error instanceof Error ? error.message : 'An error occurred')\n      setIsLoading(false)\n    }\n  }\n\n  return (\n    <div className={cn('flex flex-col gap-6', className)} {...props}>\n      <Card>\n        <CardHeader>\n          <CardTitle className=\"text-2xl\">Welcome!</CardTitle>\n          <CardDescription>Sign in to your account to continue</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form onSubmit={handleSocialLogin}>\n            <div className=\"flex flex-col gap-6\">\n              {error && <p className=\"text-sm text-destructive-500\">{error}</p>}\n              <Button type=\"submit\" className=\"w-full\" disabled={isLoading}>\n                {isLoading ? 'Logging in...' : 'Continue with Github'}\n              </Button>\n            </div>\n          </form>\n        </CardContent>\n      </Card>\n    </div>\n  )\n}\n",
+      "content": "import { cn } from '@/lib/utils'\nimport { createClient } from '@/registry/default/clients/tanstack/lib/supabase/client'\nimport { Button } from '@/registry/default/components/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/components/ui/card'\nimport { useState } from 'react'\n\nexport function LoginForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {\n  const [error, setError] = useState<string | null>(null)\n  const [isLoading, setIsLoading] = useState(false)\n\n  const handleSocialLogin = async (e: React.FormEvent) => {\n    e.preventDefault()\n    const supabase = createClient()\n    setIsLoading(true)\n    setError(null)\n\n    try {\n      const { error } = await supabase.auth.signInWithOAuth({\n        provider: 'github',\n        options: {\n          redirectTo: `${window.location.origin}/auth/oauth?next=/protected`,\n        },\n      })\n\n      if (error) throw error\n    } catch (error: unknown) {\n      setError(error instanceof Error ? error.message : 'An error occurred')\n      setIsLoading(false)\n    }\n  }\n\n  return (\n    <div className={cn('flex flex-col gap-6', className)} {...props}>\n      <Card>\n        <CardHeader>\n          <CardTitle className=\"text-2xl\">Welcome!</CardTitle>\n          <CardDescription>Sign in to your account to continue</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form onSubmit={handleSocialLogin}>\n            <div className=\"flex flex-col gap-6\">\n              {error && <p className=\"text-sm text-destructive-500\">{error}</p>}\n              <Button type=\"submit\" className=\"w-full\" disabled={isLoading}>\n                {isLoading ? 'Logging in...' : 'Continue with GitHub'}\n              </Button>\n            </div>\n          </form>\n        </CardContent>\n      </Card>\n    </div>\n  )\n}\n",
       "type": "registry:component"
     },
     {

apps/ui-library/public/r/social-auth-tanstack.json

@@ -1576,6 +1576,11 @@
           "path": "registry/default/ai-editor-rules/writing-supabase-edge-functions.mdc",
           "type": "registry:file",
           "target": "~/.cursor/rules/writing-supabase-edge-functions.mdc"
+        },
+        {
+          "path": "registry/default/ai-editor-rules/use-realtime.mdc",
+          "type": "registry:file",
+          "target": "~/.cursor/rules/use-realtime.mdc"
         }
       ]
     }

apps/ui-library/registry.json

@@ -31,6 +31,11 @@
       "path": "registry/default/ai-editor-rules/writing-supabase-edge-functions.mdc",
       "type": "registry:file",
       "target": "~/.cursor/rules/writing-supabase-edge-functions.mdc"
+    },
+    {
+      "path": "registry/default/ai-editor-rules/use-realtime.mdc",
+      "type": "registry:file",
+      "target": "~/.cursor/rules/use-realtime.mdc"
     }
   ]
 }