feat: integrate MCP context for server management

- Introduced MCPProvider to manage MCP server state and selection using context.
- Updated Providers component to wrap children with MCPProvider.
- Refactored ChatSidebar and Chat components to utilize MCP context for server data.
- Removed redundant MCP server types and interfaces from local storage hooks.
- Enhanced overall structure for better state management and code clarity.

app/api/chat/route.ts

@@ -56,7 +56,7 @@ export async function POST(req: Request) {
 
   // Check if chat already exists for the given ID
   // If not, we'll create it in onFinish
-  let isNewChat = false;
+  var isNewChat = false;
   if (chatId) {
     try {
       const existingChat = await db.query.chats.findFirst({
@@ -186,6 +186,8 @@ export async function POST(req: Request) {
     You can run multiple steps using all the tools!!!!
     Make sure to use the right tool to respond to the user's question.
 
+    Multiple tools can be used in a single response and multiple steps can be used to answer the user's question.
+
     ## Response Format
     - Markdown is supported.
     - Respond according to tool's response.
@@ -198,33 +200,18 @@ export async function POST(req: Request) {
     onError: (error) => {
       console.error(JSON.stringify(error, null, 2));
     },
-    async onFinish({ response, steps, toolCalls, toolResults }) {
-      console.log("onFinish", response.messages.map(m => {
-        return {
-          id: m.id,
-          content: JSON.stringify(m.content),
-          role: m.role,
-        }
-      }));
-      console.log("steps", steps);
-      console.log("toolCalls", toolCalls);
-      console.log("toolResults", toolResults);
-      
-      // Combine messages for processing
+    async onFinish({ response }) {
       const allMessages = appendResponseMessages({
         messages,
         responseMessages: response.messages,
       });
       
-      // Step 1: Save chat with messages for proper title generation
       await saveChat({
         id,
         userId,
         messages: allMessages,
-        // No title specified - will be generated
       });
       
-      // Step 2: Save all messages
       const dbMessages = convertToDBMessages(allMessages, id);
       await saveMessages({ messages: dbMessages });
       // close all mcp clients

app/providers.tsx

@@ -7,6 +7,7 @@ import { Toaster } from "sonner";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { useLocalStorage } from "@/lib/hooks/use-local-storage";
 import { STORAGE_KEYS } from "@/lib/constants";
+import { MCPProvider } from "@/lib/context/mcp-context";
 
 // Create a client
 const queryClient = new QueryClient({
@@ -32,10 +33,12 @@ export function Providers({ children }: { children: ReactNode }) {
         enableSystem
         disableTransitionOnChange
       >
-        <SidebarProvider defaultOpen={sidebarOpen} open={sidebarOpen} onOpenChange={setSidebarOpen}>
-          {children}
-          <Toaster position="top-center" richColors />
-        </SidebarProvider>
+        <MCPProvider>
+          <SidebarProvider defaultOpen={sidebarOpen} open={sidebarOpen} onOpenChange={setSidebarOpen}>
+            {children}
+            <Toaster position="top-center" richColors />
+          </SidebarProvider>
+        </MCPProvider>
       </ThemeProvider>
     </QueryClientProvider>
   );

components/chat-sidebar.tsx

@@ -22,7 +22,7 @@ import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { toast } from "sonner";
 import Image from "next/image";
-import { MCPServerManager, type MCPServer } from "./mcp-server-manager";
+import { MCPServerManager } from "./mcp-server-manager";
 import { ThemeToggle } from "./theme-toggle";
 import { getUserId, updateUserId } from "@/lib/user-id";
 import { useLocalStorage } from "@/lib/hooks/use-local-storage";
@@ -50,19 +50,21 @@ import {
 } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import { useMCP } from "@/lib/context/mcp-context";
 
 export function ChatSidebar() {
     const router = useRouter();
     const pathname = usePathname();
     const [userId, setUserId] = useState<string>('');
-    const [mcpServers, setMcpServers] = useLocalStorage<MCPServer[]>(STORAGE_KEYS.MCP_SERVERS, []);
-    const [selectedMcpServers, setSelectedMcpServers] = useLocalStorage<string[]>(STORAGE_KEYS.SELECTED_MCP_SERVERS, []);
     const [mcpSettingsOpen, setMcpSettingsOpen] = useState(false);
     const { state } = useSidebar();
     const isCollapsed = state === "collapsed";
     const [editUserIdOpen, setEditUserIdOpen] = useState(false);
     const [newUserId, setNewUserId] = useState('');
 
+    // Get MCP server data from context
+    const { mcpServers, setMcpServers, selectedMcpServers, setSelectedMcpServers } = useMCP();
+
     // Initialize userId
     useEffect(() => {
         setUserId(getUserId());

components/chat.tsx

@@ -9,31 +9,15 @@ import { Messages } from "./messages";
 import { toast } from "sonner";
 import { useRouter, useParams } from "next/navigation";
 import { getUserId } from "@/lib/user-id";
-import { useLocalStorageValue, useLocalStorage } from "@/lib/hooks/use-local-storage";
+import { useLocalStorage } from "@/lib/hooks/use-local-storage";
 import { STORAGE_KEYS } from "@/lib/constants";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { convertToUIMessages } from "@/lib/chat-store";
 import { type Message as DBMessage } from "@/lib/db/schema";
 import { nanoid } from "nanoid";
+import { useMCP } from "@/lib/context/mcp-context";
 
-// Define types for MCP server
-interface KeyValuePair {
-  key: string;
-  value: string;
-}
-
-interface MCPServer {
-  id: string;
-  name: string;
-  url: string;
-  type: 'sse' | 'stdio';
-  command?: string;
-  args?: string[];
-  env?: KeyValuePair[];
-  headers?: KeyValuePair[];
-}
-
-
+// Type for chat data from DB
 interface ChatData {
   id: string;
   messages: DBMessage[];
@@ -51,9 +35,8 @@ export default function Chat() {
   const [userId, setUserId] = useState<string>('');
   const [generatedChatId, setGeneratedChatId] = useState<string>('');
   
-  // Get MCP server data from localStorage via our custom hooks
-  const mcpServers = useLocalStorageValue<MCPServer[]>(STORAGE_KEYS.MCP_SERVERS, []);
-  const selectedMcpServers = useLocalStorageValue<string[]>(STORAGE_KEYS.SELECTED_MCP_SERVERS, []);
+  // Get MCP server data from context
+  const { mcpServersForApi } = useMCP();
   
   // Initialize userId
   useEffect(() => {
@@ -98,23 +81,6 @@ export default function Chat() {
     staleTime: 1000 * 60 * 5, // 5 minutes
     refetchOnWindowFocus: false
   });
-
-  // Memoize MCP server configuration for API
-  const mcpServersForApi = useMemo(() => {
-    if (!selectedMcpServers.length) return [];
-    
-    return selectedMcpServers
-      .map(id => mcpServers.find(server => server.id === id))
-      .filter((server): server is MCPServer => Boolean(server))
-      .map(server => ({
-        type: server.type,
-        url: server.url,
-        command: server.command,
-        args: server.args,
-        env: server.env,
-        headers: server.headers
-      }));
-  }, [mcpServers, selectedMcpServers]);
   
   // Prepare initial messages from query data
   const initialMessages = useMemo(() => {

components/mcp-server-manager.tsx

@@ -40,12 +40,7 @@ import {
     AccordionItem,
     AccordionTrigger
 } from "./ui/accordion";
-
-// Key-value pair for environment variables and headers
-interface KeyValuePair {
-    key: string;
-    value: string;
-}
+import { KeyValuePair, MCPServer } from "@/lib/context/mcp-context";
 
 // Default template for a new MCP server
 const INITIAL_NEW_SERVER: Omit<MCPServer, 'id'> = {
@@ -58,18 +53,6 @@ const INITIAL_NEW_SERVER: Omit<MCPServer, 'id'> = {
     headers: []
 };
 
-export interface MCPServer {
-    id: string;
-    name: string;
-    url: string;
-    type: 'sse' | 'stdio';
-    command?: string;
-    args?: string[];
-    env?: KeyValuePair[];
-    headers?: KeyValuePair[];
-    description?: string;
-}
-
 interface MCPServerManagerProps {
     servers: MCPServer[];
     onServersChange: (servers: MCPServer[]) => void;

components/model-picker.tsx

@@ -168,7 +168,7 @@ export const ModelPicker = ({ selectedModel, setSelectedModel }: ModelPickerProp
             </div>
             
             {/* Model details column - hidden on smallest screens, visible on sm+ */}
-            <div className="p-2 sm:p-3 md:p-4 flex flex-col sm:block hidden">
+            <div className="sm:block hidden p-2 sm:p-3 md:p-4 flex-col">
               <div>
                 <div className="flex items-center gap-2 mb-1">
                   {getProviderIcon(currentModelDetails.provider)}

lib/context/mcp-context.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import React, { createContext, useContext, useEffect, useState } from "react";
+import { useLocalStorage } from "@/lib/hooks/use-local-storage";
+import { STORAGE_KEYS } from "@/lib/constants";
+
+// Define types for MCP server
+export interface KeyValuePair {
+  key: string;
+  value: string;
+}
+
+export interface MCPServer {
+  id: string;
+  name: string;
+  url: string;
+  type: 'sse' | 'stdio';
+  command?: string;
+  args?: string[];
+  env?: KeyValuePair[];
+  headers?: KeyValuePair[];
+  description?: string;
+}
+
+// Type for processed MCP server config for API
+export interface MCPServerApi {
+  type: 'sse' | 'stdio';
+  url: string;
+  command?: string;
+  args?: string[];
+  env?: KeyValuePair[];
+  headers?: KeyValuePair[];
+}
+
+interface MCPContextType {
+  mcpServers: MCPServer[];
+  setMcpServers: (servers: MCPServer[]) => void;
+  selectedMcpServers: string[];
+  setSelectedMcpServers: (serverIds: string[]) => void;
+  mcpServersForApi: MCPServerApi[];
+}
+
+const MCPContext = createContext<MCPContextType | undefined>(undefined);
+
+export function MCPProvider({ children }: { children: React.ReactNode }) {
+  const [mcpServers, setMcpServers] = useLocalStorage<MCPServer[]>(
+    STORAGE_KEYS.MCP_SERVERS, 
+    []
+  );
+  const [selectedMcpServers, setSelectedMcpServers] = useLocalStorage<string[]>(
+    STORAGE_KEYS.SELECTED_MCP_SERVERS, 
+    []
+  );
+  const [mcpServersForApi, setMcpServersForApi] = useState<MCPServerApi[]>([]);
+
+  // Process MCP servers for API consumption whenever server data changes
+  useEffect(() => {
+    if (!selectedMcpServers.length) {
+      setMcpServersForApi([]);
+      return;
+    }
+    
+    const processedServers: MCPServerApi[] = selectedMcpServers
+      .map(id => mcpServers.find(server => server.id === id))
+      .filter((server): server is MCPServer => Boolean(server))
+      .map(server => ({
+        type: server.type,
+        url: server.url,
+        command: server.command,
+        args: server.args,
+        env: server.env,
+        headers: server.headers
+      }));
+    
+    setMcpServersForApi(processedServers);
+  }, [mcpServers, selectedMcpServers]);
+
+  return (
+    <MCPContext.Provider 
+      value={{ 
+        mcpServers, 
+        setMcpServers, 
+        selectedMcpServers, 
+        setSelectedMcpServers,
+        mcpServersForApi 
+      }}
+    >
+      {children}
+    </MCPContext.Provider>
+  );
+}
+
+export function useMCP() {
+  const context = useContext(MCPContext);
+  if (context === undefined) {
+    throw new Error("useMCP must be used within an MCPProvider");
+  }
+  return context;
+}