Streamline server "Connect" details

Author: mattrossman

src/app/[serverId]/client.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { Plus } from "lucide-react"
+import { Plus, Plug } from "lucide-react"
 import { z } from "zod"
 import { zodResolver } from "@hookform/resolvers/zod"
 import { useForm } from "react-hook-form"
@@ -34,6 +34,8 @@ import { useState } from "react"
 import { Database } from "../../../database.types"
 import { createClient } from "@/lib/supabase/client"
 import { useRouter } from "next/navigation"
+import { CodeBlock } from "@/components/code-block"
+import { getServerUrl } from "@/lib/get-server-url"
 
 type ToolsRow = Database["public"]["Tables"]["tools"]["Row"]
 type ParametersRow = Database["public"]["Tables"]["parameters"]["Row"]
@@ -434,3 +436,92 @@ export function ParameterForm({
     </Dialog>
   )
 }
+
+export function ConnectButton({
+  serverId,
+  accessToken,
+}: {
+  serverId: string
+  accessToken: string
+}) {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <>
+      <Button
+        onClick={() => setOpen(true)}
+        className="flex items-center gap-2"
+        variant="outline"
+      >
+        <Plug className="h-4 w-4" />
+        Connect
+      </Button>
+      <ConnectDialog
+        serverId={serverId}
+        accessToken={accessToken}
+        open={open}
+        onOpenChange={setOpen}
+      />
+    </>
+  )
+}
+
+export function ConnectDialog({
+  serverId,
+  accessToken,
+  open,
+  onOpenChange,
+}: {
+  serverId: string
+  accessToken: string
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}) {
+  const serverUrl = getServerUrl(serverId)
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-2xl">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Plug className="h-5 w-5" />
+            Connect to Server
+          </DialogTitle>
+          <DialogDescription>
+            Use these credentials to connect your MCP client to this server.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="grid gap-6">
+          <div className="min-w-0">
+            <h4 className="text-sm font-medium mb-2">Server URL</h4>
+            <CodeBlock className="min-w-0" code={serverUrl} />
+          </div>
+
+          <div className="min-w-0">
+            <h4 className="text-sm font-medium mb-2">Bearer Token</h4>
+            <CodeBlock className="min-w-0" code={accessToken} />
+          </div>
+
+          <div className="bg-card rounded-lg p-4">
+            <h4 className="text-sm font-medium mb-2">
+              Connection Instructions
+            </h4>
+            <div className="text-sm text-muted-foreground space-y-2">
+              <p>In your MCP client (e.g. Cursor, Claude Code, VS Code):</p>
+              <p>1. Copy the URL and set it as the remote server URL</p>
+              <p>{`2. Copy the token and add it an "Authorization" header with the value "Bearer <TOKEN>"`}</p>
+              <p>
+                3. Connect to the server and try using your configured tools!
+              </p>
+              <p className="text-xs italic mt-3">
+                Note: Tokens expire after 1 week, so you may need to copy it
+                again later
+              </p>
+            </div>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}

src/app/[serverId]/page.tsx

@@ -1,12 +1,10 @@
 import { ChevronLeft } from "lucide-react"
 import Link from "next/link"
-import { notFound } from "next/navigation"
+import { notFound, redirect } from "next/navigation"
 
-import { CodeBlock } from "@/components/code-block"
 import { Button } from "@/components/ui/button"
-import { getServerUrl } from "@/lib/get-server-url"
 import { createClient } from "@/lib/supabase/server"
-import { ToolSection } from "@/app/[serverId]/client"
+import { ToolSection, ConnectButton } from "@/app/[serverId]/client"
 
 export default async function ServerPage({
   params,
@@ -17,6 +15,14 @@ export default async function ServerPage({
 
   const { serverId } = await params
 
+  // Get user session for access token
+  const $session = await client.auth.getSession()
+  const accessToken = $session.data.session?.access_token
+
+  if (!accessToken) {
+    redirect("/auth/login")
+  }
+
   const $server = await client
     .from("servers")
     .select("*, tools(*, parameters(*))")
@@ -43,11 +49,12 @@ export default async function ServerPage({
           </Button>
         </div>
 
-        <h1 className="text-2xl font-bold mb-10 grow">{server.name}</h1>
+        <div className="flex items-center justify-between mb-10">
+          <h1 className="text-2xl font-bold grow">{server.name}</h1>
+          <ConnectButton serverId={server.id} accessToken={accessToken} />
+        </div>
       </header>
 
-      <CodeBlock label="URL" code={getServerUrl(server.id)} />
-
       <ToolSection serverId={server.id} tools={server.tools} />
     </div>
   )

src/app/client.tsx

@@ -1,11 +1,10 @@
 "use client"
-import { Link as LinkIcon, Plus } from "lucide-react"
+import { Plus } from "lucide-react"
 import Link from "next/link"
 import { useRouter } from "next/navigation"
 
-import { CopyButton } from "@/components/copy-button"
 import { Button } from "@/components/ui/button"
-import { getServerUrl } from "@/lib/get-server-url"
+
 import { createClient } from "@/lib/supabase/client"
 import { Database } from "../../database.types"
 
@@ -26,12 +25,6 @@ export function ServerCard({
     <div className="bg-card border rounded-md px-6 py-6 flex items-center">
       <span className="grow">{server.name}</span>
       <div className="flex items-center gap-2">
-        <CopyButton
-          label="Copy URL"
-          variant="outline"
-          defaultIcon={<LinkIcon />}
-          text={getServerUrl(server.id)}
-        />
         <Button variant="outline" asChild>
           <Link href={`/${server.id}`}>Edit</Link>
         </Button>

src/components/navbar.tsx

@@ -4,7 +4,6 @@ import Image from "next/image"
 import { createClient } from "@/lib/supabase/server"
 import { cn } from "@/lib/utils"
 import z from "zod"
-import { CopyToken } from "@/components/copy-token"
 
 const ClaimsSchema = z.object({
   email: z.string().email(),
@@ -42,7 +41,6 @@ export async function Navbar({ className }: { className?: string }) {
 
       {userData && (
         <div className="flex gap-6 items-center">
-          <CopyToken token={userData.accessToken} />
           <span className="text-muted-foreground text-sm">
             {userData.email}
           </span>