Simplify Smithery auth flow and fix connection runtime errors

app/api/chat/route.ts

@@ -1,4 +1,4 @@
-import type { Connection } from "@smithery/api/resources/experimental/connect/connections.mjs";
+import type { Connection } from "@smithery/api/resources/connections/connections.mjs";
 import {
 	createAgentUIStreamResponse,
 	ToolLoopAgent,

app/api/tool-search/route.ts

@@ -2,7 +2,7 @@ import { Client } from "@modelcontextprotocol/sdk/client/index.js";
 import type { Tool } from "@modelcontextprotocol/sdk/types.js";
 import { Smithery } from "@smithery/api";
 import { createConnection } from "@smithery/api/lib/mcp-transport.mjs";
-import type { Connection } from "@smithery/api/resources/experimental/connect/connections";
+import type { Connection } from "@smithery/api/resources/connections/connections.mjs";
 import { Index } from "flexsearch";
 import { estimateTokenCount } from "tokenx";
 import type {

app/docs/docs-layout-client.tsx

@@ -4,9 +4,17 @@ import { Suspense } from "react";
 import { SharedSidebar } from "@/components/shared-sidebar";
 import { SmitheryProvider } from "@/registry/new-york/smithery/smithery-provider";
 
-export function DocsLayoutClient({ children }: { children: React.ReactNode }) {
+interface DocsLayoutClientProps {
+	children: React.ReactNode;
+	smitheryApiKey?: string;
+}
+
+export function DocsLayoutClient({
+	children,
+	smitheryApiKey,
+}: DocsLayoutClientProps) {
 	return (
-		<SmitheryProvider>
+		<SmitheryProvider smitheryApiKey={smitheryApiKey}>
 			<SharedSidebar>
 				<Suspense
 					fallback={

app/docs/layout.tsx

@@ -5,5 +5,9 @@ export default function DocsLayout({
 }: {
 	children: React.ReactNode;
 }) {
-	return <DocsLayoutClient>{children}</DocsLayoutClient>;
+	return (
+		<DocsLayoutClient smitheryApiKey={process.env.SMITHERY_API_KEY}>
+			{children}
+		</DocsLayoutClient>
+	);
 }

app/docs/tokens/page.mdx

@@ -1,8 +1,8 @@
 # Tokens
 
-The Tokens component provides a token selector and manager for Smithery API authentication. It allows users to manage multiple API tokens, switch between them, and create new ones.
+The Tokens component displays the configured Smithery API key and namespace settings. It reads the API key from the server and renders token details client-side.
 
-The preview for this component is displayed in the header above - click "Modify" to see the token management dialog.
+The preview for this component is displayed in the header above. Click "Settings" to manage namespace selection and creation.
 
 ## Installation
 
@@ -13,35 +13,18 @@ The preview for this component is displayed in the header above - click "Modify"
 ```tsx
 import { Tokens } from "@/registry/new-york/smithery/tokens"
 
-// You need an initial token response from your server
-const initialTokenResponse = {
-  token: "your-api-token",
-  expiresAt: "2024-12-31T23:59:59Z" // or "never"
-}
-
 export function MyApp() {
-  return (
-    <Tokens
-      initialTokenResponse={initialTokenResponse}
-      onCreateToken={async () => {
-        // Optional: fetch a new token from your server
-        const response = await fetch("/api/create-token")
-        return response.json()
-      }}
-    />
-  )
+  return <Tokens />
 }
 ```
 
 ## Props
 
-- `initialTokenResponse` (required): The initial token to display, with `token` and `expiresAt` fields
-- `onCreateToken` (optional): Async function to create a new token. If not provided, the "Create New Token" button won't appear
+- This component has no direct props. It consumes `useSmitheryContext` from `SmitheryProvider`.
 
 ## Features
 
-- Display the currently selected token (masked for security)
-- Switch between multiple tokens via a dropdown
-- Remove expired or unused tokens
-- Create new tokens via the optional callback
-- Persists tokens to localStorage using jotai atoms
+- Display the configured API key in masked form
+- Show the currently selected namespace
+- Switch namespaces from a dropdown
+- Create new namespaces directly from the settings dialog

app/page.tsx

@@ -1,5 +1,5 @@
 import { HomePage } from "@/components/home";
 
 export default function Home() {
-	return <HomePage />;
+	return <HomePage smitheryApiKey={process.env.SMITHERY_API_KEY} />;
 }

components/chat-block.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { useChat } from "@ai-sdk/react";
-import type { Connection } from "@smithery/api/resources/experimental/connect/connections.mjs";
+import type { Connection } from "@smithery/api/resources/connections/connections.mjs";
 import {
 	DefaultChatTransport,
 	lastAssistantMessageIsCompleteWithToolCalls,

components/docs/component-preview.tsx

@@ -3,7 +3,7 @@
 import { createMCPClient } from "@ai-sdk/mcp";
 import Smithery from "@smithery/api";
 import { createConnection } from "@smithery/api/mcp";
-import type { Connection } from "@smithery/api/resources/experimental/connect/connections.mjs";
+import type { Connection } from "@smithery/api/resources/connections/connections.mjs";
 import { useQuery } from "@tanstack/react-query";
 import type { Tool, ToolExecutionOptions } from "ai";
 import { useAtomValue } from "jotai";
@@ -40,8 +40,7 @@ function useConnections(
 			if (!token) throw new Error("Token required");
 			if (!namespace) throw new Error("Namespace required");
 			const client = getSmitheryClient(token);
-			const { connections } =
-				await client.experimental.connect.connections.list(namespace);
+			const { connections } = await client.connections.list(namespace);
 			return { connections, namespace };
 		},
 		enabled: !!token && !!namespace,

components/docs/previews.tsx

@@ -3,7 +3,7 @@
 import { createMCPClient } from "@ai-sdk/mcp";
 import Smithery from "@smithery/api";
 import { createConnection } from "@smithery/api/mcp";
-import type { Connection } from "@smithery/api/resources/experimental/connect/connections.mjs";
+import type { Connection } from "@smithery/api/resources/connections/connections.mjs";
 import { useQuery } from "@tanstack/react-query";
 import type { ToolExecutionOptions } from "ai";
 import { AlertCircle } from "lucide-react";
@@ -65,8 +65,7 @@ function useConnections(token: string, namespace: string) {
 		queryKey: ["connections", token, namespace],
 		queryFn: async () => {
 			const client = getSmitheryClient(token);
-			const { connections } =
-				await client.experimental.connect.connections.list(namespace);
+			const { connections } = await client.connections.list(namespace);
 			return { connections, namespace };
 		},
 	});

components/home.tsx

@@ -4,10 +4,14 @@ import { Suspense } from "react";
 import { SmitheryProvider } from "@/registry/new-york/smithery/smithery-provider";
 import { RegistryBrowser } from "./registry-browser";
 
-export function HomePage() {
+interface HomePageProps {
+	smitheryApiKey?: string;
+}
+
+export function HomePage({ smitheryApiKey }: HomePageProps) {
 	return (
 		<Suspense>
-			<SmitheryProvider>
+			<SmitheryProvider smitheryApiKey={smitheryApiKey}>
 				<RegistryBrowser />
 			</SmitheryProvider>
 		</Suspense>