From ceb411056895d38665269d5afbe5cfe5d8a32587 Mon Sep 17 00:00:00 2001
From: Pedro Rodrigues <44656907+Rodriguespn@users.noreply.github.com>
Date: Mon, 20 Jul 2026 20:36:24 +0100
Subject: [PATCH] docs: add VS Code to the AI coding agent plugin install
 picker (#48108)

Adds VS Code to the AI coding agent plugins docs, as VS Code now
[supports
plugins](https://code.visualstudio.com/docs/agent-customization/agent-plugins)

<img width="763" height="396" alt="image"
src="https://github.com/user-attachments/assets/7520a83c-5652-44b4-9136-013f3da5f45b"
/>

### Steps to reproduce it

1. Navigate to
https://docs-git-add-vs-code-plugins-support-to-docs-supabase.vercel.app/docs/guides/ai-tools/plugins#manual-install
2. Select "VS Code" in the `Client` dropdown


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

## Summary by CodeRabbit

* **New Features**
  * Added Visual Studio Code to the supported plugin integrations.
* Added VS Code installation guidance, including the plugin repository
and manifest specification links.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 apps/docs/features/ui/AgentPluginsPanel.tsx | 37 +++++++++++++++++++++
 1 file changed, 37 insertions(+)

diff --git a/apps/docs/features/ui/AgentPluginsPanel.tsx b/apps/docs/features/ui/AgentPluginsPanel.tsx
index 40de6553a1c..c8b992a9967 100644
--- a/apps/docs/features/ui/AgentPluginsPanel.tsx
+++ b/apps/docs/features/ui/AgentPluginsPanel.tsx
@@ -58,6 +58,13 @@ const PLUGIN_CLIENTS: PluginClient[] = [
     repoUrl: 'https://github.com/supabase-community/supabase-plugin',
     docsUrl: 'https://www.kimi.com/code/docs/en/kimi-code-cli/customization/plugins.html',
   },
+  {
+    key: 'vscode',
+    label: 'VS Code',
+    icon: 'vscode',
+    repoUrl: 'https://github.com/supabase-community/supabase-plugin',
+    docsUrl: 'https://code.visualstudio.com/docs/agent-customization/agent-plugins',
+  },
 ]
 
 function PluginInstructions({ client }: { client: PluginClient }) {
@@ -202,6 +209,36 @@ function PluginInstructions({ client }: { client: PluginClient }) {
     )
   }
 
+  if (client.key === 'vscode') {
+    return (
+      <div className="space-y-3">
+        <p className="text-sm text-foreground-light">
+          Open the Command Palette (<code>Cmd/Ctrl+Shift+P</code>) and run{' '}
+          <strong>Chat: Install Plugin From Source</strong>, then paste the Supabase plugin
+          repository URL:
+        </p>
+        <CodeBlock
+          value="https://github.com/supabase-community/supabase-plugin"
+          language="bash"
+          focusable={false}
+          className="block"
+        />
+        <p className="text-xs text-foreground-lighter">
+          VS Code auto-detects the vendor-neutral{' '}
+          <a
+            href="https://github.com/vercel-labs/open-plugin-spec"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-brand-link hover:underline"
+          >
+            Open Plugin
+          </a>{' '}
+          manifest in the repo. Review the trust prompt to finish installing.
+        </p>
+      </div>
+    )
+  }
+
   if (client.key === 'github-copilot') {
     return (
       <div className="space-y-4">