supabase-artifact-connection

What problem does it solve?

This Skill enables Claude Desktop to securely connect to Supabase databases and render interactive artifacts that display live data with read-only access.

Core Features & Use Cases

• Read-only queries against any Supabase project, ensuring safe data viewing without mutations.
• Standalone HTML artifacts that load data client-side using the official Supabase JS client.
• Simple error handling, loading states, and responsive tables for quick data exploration.
• Works with common workflows like simple tables, filtered dashboards, and multi-column reports.
• No build tools required; artifacts are fully standalone and portable.

Quick Start

1. Provide your Supabase credentials in the artifact: SUPABASE_URL = 'https://[project-id].supabase.co' SUPABASE_ANON_KEY = 'YOUR_ANON_KEY'
2. Use the standard initialization pattern to load data: <!-- Supabase Client Library --> <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script> <script> const SUPABASE_URL = 'USER_PROVIDED_URL'; const SUPABASE_ANON_KEY = 'USER_PROVIDED_KEY'; const supabase = window.supabase.createClient(SUPABASE_URL, SUPABASE_ANON_KEY); </script>
3. Query example: const { data } = await supabase.from('table_name').select('*').limit(50);