Add VIsual Studio instructions to Github Copilot

app/cheat-sheet-print.css

@@ -135,11 +135,6 @@
     font-size: 5.5pt !important;
   }
 
-  .cheat-sheet-section .prose code,
-  .cheat-sheet-section .markdown code {
-    font-size: 5.5pt !important;
-  }
-
   /* Hide Nextra's terminal UI wrapper */
   .my-4.overflow-hidden.rounded-lg.border > .flex.items-center.justify-between {
     display: none !important;
@@ -185,6 +180,11 @@
     margin: 2pt 0 !important;
   }
 
+  .cheat-sheet-section .prose code,
+  .cheat-sheet-section .markdown code {
+    font-size: 5.5pt !important;
+  }
+
   /* Code blocks inside pre elements */
   pre code,
   .cheat-sheet-section pre code,

app/en/get-started/mcp-clients/_meta.tsx

@@ -23,6 +23,9 @@ const meta: MetaRecord = {
   "copilot-studio": {
     title: "Microsoft Copilot Studio",
   },
+  "github-copilot": {
+    title: "GitHub Copilot",
+  },
 };
 
 export default meta;

app/en/get-started/mcp-clients/github-copilot/page.mdx

@@ -0,0 +1,209 @@
+import { Steps, Callout, Tabs } from "nextra/components";
+import { SignupLink } from "@/app/_components/analytics";
+import Image from "next/image";
+
+export const IMAGE_SCALE_FACTOR = 2;
+export const JETBRAINS_START_WIDTH = 318;
+export const JETBRAINS_START_HEIGHT = 184;
+export const VISUAL_STUDIO_STEP_1_WIDTH = 276;
+export const VISUAL_STUDIO_STEP_1_HEIGHT = 120;
+export const VISUAL_STUDIO_STEP_2_WIDTH = 1606;
+export const VISUAL_STUDIO_STEP_2_HEIGHT = 270;
+export const VISUAL_STUDIO_STEP_3_WIDTH = 674;
+export const VISUAL_STUDIO_STEP_3_HEIGHT = 288;
+export const VISUAL_STUDIO_STEP_4_WIDTH = 1070;
+export const VISUAL_STUDIO_STEP_4_HEIGHT = 898;
+export const VISUAL_STUDIO_STEP_5_WIDTH = 660;
+export const VISUAL_STUDIO_STEP_5_HEIGHT = 362;
+export const VISUAL_STUDIO_STEP_6_WIDTH = 1632;
+export const VISUAL_STUDIO_STEP_6_HEIGHT = 360;
+
+# Use Arcade in GitHub Copilot
+
+<GuideOverview>
+<GuideOverview.Outcomes>
+
+Connect GitHub Copilot to an Arcade MCP Gateway.
+
+</GuideOverview.Outcomes>
+
+<GuideOverview.Prerequisites>
+
+1. Create an <SignupLink linkLocation="docs:github-copilot-client">Arcade account</SignupLink>
+2. Get an [Arcade API key](/get-started/setup/api-keys)
+3. Create an [Arcade MCP Gateway](/guides/mcp-gateways) and select the tools you want to use
+
+</GuideOverview.Prerequisites>
+
+</GuideOverview>
+
+### Set up GitHub Copilot
+
+<Tabs
+  items={["VS Code", "JetBrains IDEs", "Visual Studio", "Eclipse", "XCode"]}
+  storageKey="copilotIDE"
+>
+  <Tabs.Tab>
+    In VS Code, Github Copilot will automatically detect the configured MCP
+    servers. Read the [VS Code
+    instructions](/get-started/mcp-clients/visual-studio-code) to set both of
+    them up.
+  </Tabs.Tab>
+  <Tabs.Tab>
+    <Callout type="info">
+      The GitHub Copilot extension for JetBrains IDEs does not currently support remote MCP servers with Dynamic Client Registration. To use an Arcade MCP Gateway with GitHub Copilot on a JetBrains IDE, you must configure the MCP gateway as `Arcade Headers` in the dashboard.
+    </Callout>
+
+    1. In the lower right corner, click the GitHub Copilot icon.
+    2. From the menu, select "Open Chat", make sure you are in Agent mode, then click the tools icon.
+    3. A dialog will open with a list of tools. On the bottom left, click "+ Add More Tools..."
+    4. This will open the `mcp.json` file in the editor. In the `mcp.json` file, define your MCP servers.
+
+    <Tabs items={["Arcade Headers", "Arcade Auth"]} storageKey="preferredMCPAuthMode">
+      <Tabs.Tab>
+
+      ```json
+      {
+        "servers": {
+          "mcp-arcade": {
+            "url": "https://api.arcade.dev/mcp/<YOUR-GATEWAY-SLUG>",
+            "requestInit": {
+              "headers": {
+                "Authorization": "Bearer {arcade_api_key}",
+                "Arcade-User-ID": "{arcade_user_id}"
+              }
+            }
+          }
+        }
+      }
+      ```
+
+      </Tabs.Tab>
+      <Tabs.Tab>
+        The GitHub Copilot extension for JetBrains IDEs does not currently support remote MCP servers with Dynamic Client Registration. To use an Arcade MCP Gateway with GitHub Copilot on a JetBrains IDE, you must configure the MCP gateway as `Arcade Auth` in the dashboard.
+      </Tabs.Tab>
+    </Tabs>
+
+    Once you save the `mcp.json` file, a start button will appear over the new server name. Click it to start the MCP server.
+    <Image
+      alt={"Start the MCP server"}
+      className="max-w-full mt-4"
+      src={"/images/mcp-gateway/github-copilot/jetbrains/start-mcp.png"}
+      width={JETBRAINS_START_WIDTH / IMAGE_SCALE_FACTOR}
+      height={JETBRAINS_START_HEIGHT / IMAGE_SCALE_FACTOR}
+    />
+
+    <Callout type="important">
+      MCP tools are only available in Agent mode.
+    </Callout>
+
+  </Tabs.Tab>
+  <Tabs.Tab>
+    <Callout type="info">
+      The GitHub Copilot extension for Visual Studio does not currently support every remote MCP server with Dynamic Client Registration. To use an Arcade MCP Gateway with GitHub Copilot on Visual Studio, you must configure the MCP gateway as `Arcade Headers` in the dashboard.
+    </Callout>
+    In Visual Studio,
+
+    1. In the upper right corner, click the GitHub Copilot icon.
+
+       <Image
+         alt={"GitHub Copilot icon"}
+         className="max-w-full mt-4"
+         src={"/images/mcp-gateway/github-copilot/visual-studio/step-1.png"}
+         width={VISUAL_STUDIO_STEP_1_WIDTH / IMAGE_SCALE_FACTOR}
+         height={VISUAL_STUDIO_STEP_1_HEIGHT / IMAGE_SCALE_FACTOR}
+       />
+
+    2. On the bottom of the GitHub Copilot panel, click the tools icon (two wrenches).
+
+       <Image
+         alt={"GitHub Copilot tools icon"}
+         className="max-w-full mt-4"
+         src={"/images/mcp-gateway/github-copilot/visual-studio/step-2.png"}
+         width={VISUAL_STUDIO_STEP_2_WIDTH / IMAGE_SCALE_FACTOR}
+         height={VISUAL_STUDIO_STEP_2_HEIGHT / IMAGE_SCALE_FACTOR}
+       />
+
+    3. A dialog will open with a list of tools. On the top right corner of this dialog, click the "+" icon to add a new tool.
+
+       <Image
+         alt={"GitHub Copilot add tool icon"}
+         className="max-w-full mt-4"
+         src={"/images/mcp-gateway/github-copilot/visual-studio/step-3.png"}
+         width={VISUAL_STUDIO_STEP_3_WIDTH / IMAGE_SCALE_FACTOR}
+         height={VISUAL_STUDIO_STEP_3_HEIGHT / IMAGE_SCALE_FACTOR}
+       />
+
+    4. This will open another dialog. Fill in the information for your MCP server. You will need to choose:
+       - **Destination**: The path to the MCP configuration file, if you choose "Global", the MCP gateway will be added to all solutions. If you choose "Solution", the MCP gateway will be added to the current solution only.
+        - **Server ID**: The ID of the MCP server you're adding, this is how it will be displayed in the list of servers.
+       - **Type**: For MCP gateways, you must select "HTTP".
+       - **URL**: The URL of the MCP gateway.
+       - **Headers**: The headers to pass to the MCP gateway.
+       - Click "Save" to add the MCP server.
+
+       <Image
+         alt={"GitHub Copilot add tool dialog"}
+         className="max-w-full mt-4"
+         src={"/images/mcp-gateway/github-copilot/visual-studio/step-4.png"}
+         width={VISUAL_STUDIO_STEP_4_WIDTH / IMAGE_SCALE_FACTOR}
+         height={VISUAL_STUDIO_STEP_4_HEIGHT / IMAGE_SCALE_FACTOR}
+       />
+
+    5. Once you save the MCP server, it will be added to the list of servers. It will be disabled by default. To enable it, click the checkbox next to the server name.
+
+       <Image
+         alt={"GitHub Copilot enable server checkbox"}
+         className="max-w-full mt-4"
+         src={"/images/mcp-gateway/github-copilot/visual-studio/step-5.png"}
+         width={VISUAL_STUDIO_STEP_5_WIDTH / IMAGE_SCALE_FACTOR}
+         height={VISUAL_STUDIO_STEP_5_HEIGHT / IMAGE_SCALE_FACTOR}
+       />
+
+    6. Once the server is enabled, it will be available in the list of tools. If tools are not available, you may need to open the `.mcp.json` file you picked as the destination. Visual Studio will display a "Configure" and "Reconnect" buttons on top of each entry. Clicking "Reconnect" should fix any issues.
+
+       <Image
+         alt={"GitHub Copilot enabled server"}
+         className="max-w-full mt-4"
+         src={"/images/mcp-gateway/github-copilot/visual-studio/step-6.png"}
+         width={VISUAL_STUDIO_STEP_6_WIDTH / IMAGE_SCALE_FACTOR}
+         height={VISUAL_STUDIO_STEP_6_HEIGHT / IMAGE_SCALE_FACTOR}
+       />
+
+    <Tabs items={["Arcade Headers", "Arcade Auth"]} storageKey="preferredMCPAuthMode">
+      <Tabs.Tab>
+
+      ```json
+      {
+        "servers": {
+          "mcp-arcade": {
+            "url": "https://api.arcade.dev/mcp/<YOUR-GATEWAY-SLUG>",
+            "headers": {
+              "Authorization": "Bearer {arcade_api_key}",
+              "Arcade-User-ID": "{arcade_user_id}"
+            }
+          }
+        }
+      }
+      ```
+
+      </Tabs.Tab>
+      <Tabs.Tab>
+        The GitHub Copilot extension for Visual Studio does not currently support every remote MCP server with Dynamic Client Registration. To use an Arcade MCP Gateway with GitHub Copilot on Visual Studio, you must configure the MCP gateway as `Arcade Headers` in the dashboard.
+      </Tabs.Tab>
+    </Tabs>
+
+  </Tabs.Tab>
+  <Tabs.Tab>
+    Coming soon...
+  </Tabs.Tab>
+  <Tabs.Tab>
+    Coming soon...
+  </Tabs.Tab>
+</Tabs>
+
+### Try it out
+
+1. Open the chat pane (typically command-l)
+1. Make sure you are in **Agent** mode
+1. Ask the agent to use a tool.

app/en/home/landing-page.tsx

@@ -205,10 +205,10 @@ export function LandingPage() {
       <section className="relative isolate px-6 lg:px-8">
         <div
           aria-hidden="true"
-          className="absolute inset-x-0 -top-24 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-40"
+          className="-top-24 -z-10 sm:-top-40 absolute inset-x-0 transform-gpu overflow-hidden blur-3xl"
         >
           <div
-            className="relative left-[calc(50%-11rem)] aspect-1155/678 w-sm -translate-x-1/2 rotate-30 bg-linear-to-tr from-[#ee175e] to-[#9089fc] opacity-20 sm:left-[calc(50%-30rem)] sm:w-3xl"
+            className="-translate-x-1/2 relative left-[calc(50%-11rem)] aspect-1155/678 w-sm rotate-30 bg-linear-to-tr from-[#ee175e] to-[#9089fc] opacity-20 sm:left-[calc(50%-30rem)] sm:w-3xl"
             style={{
               clipPath:
                 "polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
@@ -685,10 +685,10 @@ export function LandingPage() {
       {/* Background decoration at bottom */}
       <div
         aria-hidden="true"
-        className="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"
+        className="-z-10 absolute inset-x-0 top-[calc(100%-13rem)] transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"
       >
         <div
-          className="relative left-[calc(50%+3rem)] aspect-1155/678 w-sm -translate-x-1/2 bg-linear-to-tr from-[#ee175e] to-[#9089fc] opacity-20 sm:left-[calc(50%+36rem)] sm:w-3xl"
+          className="-translate-x-1/2 relative left-[calc(50%+3rem)] aspect-1155/678 w-sm bg-linear-to-tr from-[#ee175e] to-[#9089fc] opacity-20 sm:left-[calc(50%+36rem)] sm:w-3xl"
           style={{
             clipPath:
               "polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",

app/en/resources/integrations/components/filters-bar.tsx

@@ -54,7 +54,7 @@ export function FiltersBar({ resultsCount }: FiltersBarProps) {
         <div className="flex flex-wrap items-center justify-between gap-3">
           {/* Search */}
           <div className="relative w-full flex-1 sm:min-w-[200px] sm:max-w-md">
-            <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-500 dark:text-gray-400" />
+            <Search className="-translate-y-1/2 absolute top-1/2 left-3 h-4 w-4 text-gray-500 dark:text-gray-400" />
             <Input
               className="pr-9 pl-9"
               onChange={handleSearchChange}
@@ -65,7 +65,7 @@ export function FiltersBar({ resultsCount }: FiltersBarProps) {
             {searchQuery && (
               <button
                 aria-label="Clear search"
-                className="absolute top-1/2 right-3 -translate-y-1/2 text-gray-500 transition-colors hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+                className="-translate-y-1/2 absolute top-1/2 right-3 text-gray-500 transition-colors hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
                 onClick={() => setSearchQuery("")}
                 type="button"
               >