Split Connections component into modular sub-components

app/docs/active-connection/page.mdx

@@ -0,0 +1,93 @@
+# Active Connection
+
+A component for viewing active connection details, handling OAuth authentication flow, and displaying available tools with execution capabilities.
+
+<ActiveConnectionPreview />
+
+## Installation
+
+<InstallCommand name="smithery-active-connection" />
+
+## Usage
+
+```tsx
+import { ActiveConnection } from "@/components/smithery/active-connection"
+
+export function MyApp() {
+  const [connectionId, setConnectionId] = useState("conn_123")
+
+  return (
+    <ActiveConnection
+      token="your-smithery-api-token"
+      namespace="your-namespace" // optional
+      connectionId={connectionId}
+    />
+  )
+}
+```
+
+## Props
+
+- `token` (required): Your Smithery API token for authentication
+- `namespace` (optional): The namespace the connection belongs to. Defaults to the first available namespace
+- `connectionId` (required): The ID of the connection to display
+
+## Features
+
+### Connection Details
+- Server avatar and name display
+- Website link if available
+- Server description
+- Connection creation timestamp
+- Connection ID display
+- Metadata viewer for custom connection data
+
+### Authentication Flow
+- Automatic detection of `auth_required` state
+- 5-second countdown before auto-redirect
+- Opens authentication in new window
+- Polls connection status every 2 seconds during auth
+- Manual authentication link fallback
+
+### Tools Panel Integration
+- Creates MCP client with SmitheryTransport
+- Fetches available tools from the connection
+- Integrates ToolsPanel for tool browsing and execution
+- Provides ConnectionConfigContext for code generation
+
+## Authentication States
+
+The component handles three connection states:
+
+1. **Loading**: Initial connection fetch
+2. **Auth Required**: Displays countdown and authorization link
+3. **Connected**: Shows tools panel with full functionality
+
+## MCP Client Setup
+
+The component automatically:
+- Creates SmitheryTransport instance
+- Initializes AI SDK MCP client
+- Fetches tools list
+- Handles tool execution with proper options
+
+## Context Provider
+
+Wraps ToolsPanel in ConnectionConfigContext with:
+- `mcpUrl`: The MCP server URL
+- `apiKey`: Your Smithery API token
+- `namespace`: The connection namespace
+- `connectionId`: The connection ID
+
+## Use Cases
+
+- Right panel in split-pane connection manager
+- Standalone tool browser for a specific connection
+- OAuth authentication handler for MCP servers
+- Tool execution interface with context
+
+## Related Components
+
+- Pairs with ConnectionsList for full management UI
+- Uses ToolsPanel for tool display and execution
+- Part of the full Connections component

app/docs/connection-card/page.mdx

@@ -0,0 +1,71 @@
+# Connection Card
+
+A reusable card component for displaying individual MCP server connection details with delete functionality.
+
+<ConnectionCardPreview />
+
+## Installation
+
+<InstallCommand name="smithery-connection-card" />
+
+## Usage
+
+```tsx
+import { ConnectionCard } from "@/components/smithery/connection-card"
+
+export function MyComponent() {
+  return (
+    <ConnectionCard
+      connection={connection}
+      token="your-smithery-api-token"
+      namespace="your-namespace"
+      className="hover:bg-muted"
+      onClick={() => handleClick(connection.connectionId)}
+    />
+  )
+}
+```
+
+## Props
+
+- `connection` (required): The connection object from Smithery API
+- `token` (required): Your Smithery API token for authentication
+- `namespace` (required): The namespace the connection belongs to
+- `className` (optional): Additional CSS classes for styling
+- `onClick` (optional): Click handler for the card
+- All standard HTML div attributes are also supported
+
+## Features
+
+- Displays connection avatar with icon or fallback initials
+- Shows connection name, ID, MCP URL, and creation date
+- Metadata display if available
+- Built-in delete button with mutation handling
+- Fully clickable card for selection
+- Query invalidation on successful deletion
+
+## Connection Object
+
+The `connection` prop should be a Smithery Connection object:
+
+```typescript
+interface Connection {
+  connectionId: string
+  name: string
+  iconUrl?: string
+  mcpUrl: string
+  createdAt?: string
+  metadata?: Record<string, unknown>
+  serverInfo?: {
+    name?: string
+    title?: string
+  }
+}
+```
+
+## Use Cases
+
+- Display connections in a list view
+- Allow users to select active connections
+- Quick access to delete unwanted connections
+- Part of the ConnectionsList component

app/docs/connections-list/page.mdx

@@ -0,0 +1,69 @@
+# Connections List
+
+A list component for browsing and managing MCP server connections with integrated server search functionality.
+
+<ConnectionsListPreview />
+
+## Installation
+
+<InstallCommand name="smithery-connections-list" />
+
+## Usage
+
+```tsx
+import { ConnectionsList } from "@/components/smithery/connections-list"
+
+export function MyApp() {
+  const [activeConnectionId, setActiveConnectionId] = useState<string | null>(null)
+
+  return (
+    <ConnectionsList
+      token="your-smithery-api-token"
+      namespace="your-namespace" // optional
+      onActiveConnectionIdChange={setActiveConnectionId}
+      defaultShowSearchServers={false}
+      defaultActiveConnectionId={activeConnectionId || undefined}
+    />
+  )
+}
+```
+
+## Props
+
+- `token` (required): Your Smithery API token for authentication
+- `namespace` (optional): The namespace to manage connections in. Defaults to the first available namespace
+- `onActiveConnectionIdChange` (required): Callback when active connection changes
+- `defaultActiveConnectionId` (optional): Initial active connection ID
+- `defaultShowSearchServers` (optional): Whether to show server search by default. Defaults to `true`
+
+## Features
+
+- List all connections in a scrollable panel
+- Search and add new connections via ServerSearch toggle
+- Refresh connections with loading state
+- Click to select active connection with visual feedback
+- Auto-selects first connection if none selected
+- Delete connections directly from the list
+- Query-based data fetching with automatic updates
+
+## Layout
+
+The component renders in a vertical layout with:
+- Header with "Connections" title and action buttons
+- Toggle button to show/hide server search
+- Refresh button with loading spinner
+- Scrollable list of ConnectionCard components
+- Visual selection state for active connection
+
+## Use Cases
+
+- Standalone connection browser
+- Left sidebar in split-pane layouts
+- Part of the full Connections component
+- Custom connection management interfaces
+
+## Related Components
+
+- Works with ConnectionCard for individual items
+- Integrates ServerSearch for adding connections
+- Pairs with ActiveConnection for full management UI

app/docs/connections/page.mdx

@@ -37,32 +37,32 @@ export function MyApp() {
 - Browse and execute tools from the selected connection
 - Real-time refresh of connection status
 
-## Sub-components
+## Architecture
+
+The Connections component is built from three modular sub-components that can be used independently:
 
 ### ConnectionCard
 
-Individual connection card with delete functionality:
+A reusable card for displaying individual connection details. [See full documentation →](/docs/connection-card)
 
 ```tsx
-import { ConnectionCard } from "@/components/smithery/connections"
-
-<ConnectionCard
-  connection={connection}
-  token="your-token"
-  namespace="your-namespace"
-/>
+import { ConnectionCard } from "@/components/smithery/connection-card"
 ```
 
 ### ConnectionsList
 
-Just the connections list without the tools panel:
+The connections list panel with search and management features. [See full documentation →](/docs/connections-list)
 
 ```tsx
-import { ConnectionsList } from "@/components/smithery/connections"
+import { ConnectionsList } from "@/components/smithery/connections-list"
+```
+
+### ActiveConnection
 
-<ConnectionsList
-  token="your-token"
-  namespace="your-namespace"
-  onActiveConnectionIdChange={(id) => console.log(id)}
-/>
+The active connection viewer with auth flow and tools panel. [See full documentation →](/docs/active-connection)
+
+```tsx
+import { ActiveConnection } from "@/components/smithery/active-connection"
 ```
+
+Each of these components can be installed and used independently, or together via the `smithery-connections` package.

app/docs/page.tsx

@@ -1,8 +1,11 @@
 import {
+	Activity,
+	CreditCard,
 	FileJson,
 	Key,
 	LayoutGrid,
 	Link2,
+	List,
 	Search,
 	Settings2,
 	Square,
@@ -35,6 +38,25 @@ const components = [
 		description: "Manage MCP server connections with tool browsing.",
 		icon: Link2,
 	},
+	{
+		title: "Connection Card",
+		slug: "connection-card",
+		description:
+			"Display individual connection details with delete functionality.",
+		icon: CreditCard,
+	},
+	{
+		title: "Connections List",
+		slug: "connections-list",
+		description: "Browse and manage connections with search integration.",
+		icon: List,
+	},
+	{
+		title: "Active Connection",
+		slug: "active-connection",
+		description: "View connection details with auth flow and tools panel.",
+		icon: Activity,
+	},
 	{
 		title: "Tools Panel",
 		slug: "tools-panel",

components/docs/component-preview.tsx

@@ -2,7 +2,7 @@
 
 import { createMCPClient } from "@ai-sdk/mcp";
 import Smithery from "@smithery/api";
-import { createConnection } from "@smithery/api/mcp";
+import { SmitheryTransport } from "@smithery/api/mcp";
 import type { Connection } from "@smithery/api/resources/beta/connect/connections.mjs";
 import { useQuery } from "@tanstack/react-query";
 import type { Tool, ToolExecutionOptions } from "ai";
@@ -65,7 +65,7 @@ function useConnectionTools(
 				throw new Error("Token and connection required");
 			const namespaceToUse =
 				namespace || (await getDefaultNamespace(getSmitheryClient(token)));
-			const { transport } = await createConnection({
+			const transport = new SmitheryTransport({
 				client: getSmitheryClient(token),
 				connectionId,
 				namespace: namespaceToUse,