@nqminds/mcp-client 1.0.4 → 1.0.5

package/README.md

@@ -1,4 +1,4 @@
-# @flair/mcp-client
+# @nqminds/mcp-client
 
 A complete, ready-to-use React component and backend client for MCP (Model Context Protocol) AI chat with OpenAI integration. Includes both the UI component and the OpenAI-powered backend logic.
 
@@ -13,7 +13,7 @@ A complete, ready-to-use React component and backend client for MCP (Model Conte
 ## Installation
 
 ```bash
-npm install @flair/mcp-client
+npm install @nqminds/mcp-client
 ```
 
 ## Quick Start
@@ -33,7 +33,7 @@ OPENAI_MODEL=chatgpt-5-mini
 Create `app/api/mcp/chat/route.ts`:
 
 ```typescript
-import { createMCPChatHandler, createMCPClearHandler } from "@flair/mcp-client/server";
+import { createMCPChatHandler, createMCPClearHandler } from "@nqminds/mcp-client/server";
 
 const chatHandler = createMCPChatHandler({
   openaiApiKey: process.env.OPENAI_API_KEY!,
@@ -55,8 +55,8 @@ export async function DELETE(req: Request) {
 ### 3. Add the component to your app
 
 ```tsx
-import { MCPChat } from '@flair/mcp-client';
-import '@flair/mcp-client/dist/styles/MCPChat.css';
+import { MCPChat } from '@nqminds/mcp-client';
+import '@nqminds/mcp-client/dist/styles/MCPChat.css';
 
 export default function Page() {
   return (
@@ -71,7 +71,7 @@ export default function Page() {
 ### 4. Import CSS in your layout
 
 ```tsx
-import '@flair/mcp-client/dist/styles/MCPChat.css';
+import '@nqminds/mcp-client/dist/styles/MCPChat.css';
 ```
 
 That's it! Your MCP chat is ready to use.
@@ -117,7 +117,7 @@ Available CSS variables:
 If you need more control, use the client directly (server-side only):
 
 ```typescript
-import { MCPClientOpenAI } from '@flair/mcp-client/server';
+import { MCPClientOpenAI } from '@nqminds/mcp-client/server';
 
 const client = new MCPClientOpenAI({
   openaiApiKey: process.env.OPENAI_API_KEY!,
@@ -138,7 +138,7 @@ await client.cleanup();
 Create your own streaming handler (server-side):
 
 ```typescript
-import { MCPClientOpenAI } from '@flair/mcp-client/server';
+import { MCPClientOpenAI } from '@nqminds/mcp-client/server';
 
 export async function POST(req: Request) {
   const { message } = await req.json();

package/dist/MCPChat.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MCPChat.d.ts","sourceRoot":"","sources":["../src/MCPChat.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAE3D,OAAO,KAAK,EAAyB,YAAY,EAAe,MAAM,SAAS,CAAC;AAEhF,wBAAgB,OAAO,CAAC,EACtB,aAAa,EACb,WAA6B,EAC7B,YAAiB,EACjB,SAAc,EACf,EAAE,YAAY,qBAgTd"}
+{"version":3,"file":"MCPChat.d.ts","sourceRoot":"","sources":["../src/MCPChat.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAE3D,OAAO,KAAK,EAAyB,YAAY,EAAe,MAAM,SAAS,CAAC;AAEhF,wBAAgB,OAAO,CAAC,EACtB,aAAa,EACb,WAA6B,EAC7B,YAAiB,EACjB,SAAc,EACf,EAAE,YAAY,qBAoVd"}

package/dist/MCPChat.js

@@ -9,6 +9,7 @@ export function MCPChat({ companyNumber, apiEndpoint = "/api/mcp/chat", customSt
     const [isExpanded, setIsExpanded] = useState(false);
     const messagesEndRef = useRef(null);
     const thinkingEndRef = useRef(null);
+    const abortControllerRef = useRef(null);
     // Merge custom styles with default CSS variables
     const containerStyle = {
         ...customStyles,
@@ -19,10 +20,22 @@ export function MCPChat({ companyNumber, apiEndpoint = "/api/mcp/chat", customSt
     useEffect(() => {
         scrollToBottom();
     }, [messages]);
+    const cancelRequest = () => {
+        if (abortControllerRef.current) {
+            abortControllerRef.current.abort();
+            abortControllerRef.current = null;
+            setIsLoading(false);
+            setThinkingSteps([]);
+            // Remove any streaming message that was in progress
+            setMessages((prev) => prev.filter((m) => !m.isStreaming));
+        }
+    };
     const handleSubmit = async (e) => {
         e.preventDefault();
         if (!input.trim() || isLoading)
             return;
+        // Set loading state immediately to show cancel button
+        setIsLoading(true);
         const userMessage = {
             role: "user",
             content: input.trim(),
@@ -30,7 +43,6 @@ export function MCPChat({ companyNumber, apiEndpoint = "/api/mcp/chat", customSt
         };
         setMessages((prev) => [...prev, userMessage]);
         setInput("");
-        setIsLoading(true);
         setThinkingSteps([]);
         // Add initial thinking step
         let thinkingStepCounter = 0;
@@ -44,7 +56,9 @@ export function MCPChat({ companyNumber, apiEndpoint = "/api/mcp/chat", customSt
                 thinkingEndRef.current?.scrollIntoView({ behavior: "smooth" });
             }, 50);
         };
-        addThinkingStep("🤔 Analyzing your question...");
+        // Create abort controller for this request
+        const abortController = new AbortController();
+        abortControllerRef.current = abortController;
         try {
             // Call your API route that communicates with MCP
             const response = await fetch(apiEndpoint, {
@@ -54,6 +68,7 @@ export function MCPChat({ companyNumber, apiEndpoint = "/api/mcp/chat", customSt
                     message: userMessage.content,
                     context: companyNumber ? { company_number: companyNumber } : undefined,
                 }),
+                signal: abortController.signal,
             });
             if (!response.ok) {
                 throw new Error("Failed to get response");
@@ -135,6 +150,11 @@ export function MCPChat({ companyNumber, apiEndpoint = "/api/mcp/chat", customSt
             }
         }
         catch (error) {
+            // Don't show error message if request was cancelled
+            if (error instanceof Error && error.name === 'AbortError') {
+                console.log("Request was cancelled");
+                return;
+            }
             console.error("Error:", error);
             const errorMessage = {
                 role: "assistant",
@@ -148,6 +168,8 @@ export function MCPChat({ companyNumber, apiEndpoint = "/api/mcp/chat", customSt
             });
         }
         finally {
+            // Clean up abort controller
+            abortControllerRef.current = null;
             setIsLoading(false);
             // Clear thinking steps after a brief delay
             setTimeout(() => setThinkingSteps([]), 2000);
@@ -203,5 +225,5 @@ export function MCPChat({ companyNumber, apiEndpoint = "/api/mcp/chat", customSt
             React.createElement("div", { ref: messagesEndRef })),
         React.createElement("form", { onSubmit: handleSubmit, className: "mcp-chat-input-form" },
             React.createElement("input", { type: "text", value: input, onChange: (e) => setInput(e.target.value), placeholder: "Ask a question...", className: "mcp-chat-input", disabled: isLoading }),
-            React.createElement("button", { type: "submit", className: "mcp-chat-button mcp-chat-button-primary", disabled: isLoading || !input.trim() }, "Send"))));
+            isLoading ? (React.createElement("button", { type: "button", onClick: cancelRequest, className: "mcp-chat-button mcp-chat-button-secondary" }, "Cancel")) : (React.createElement("button", { type: "submit", className: "mcp-chat-button mcp-chat-button-primary", disabled: !input.trim() }, "Send")))));
 }

package/dist/api-helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"api-helpers.d.ts","sourceRoot":"","sources":["../src/api-helpers.ts"],"names":[],"mappings":"AAAA;;GAEG;AAOH,MAAM,WAAW,sBAAsB;IACrC,YAAY,EAAE,MAAM,CAAC;IACrB,gBAAgB,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,sBAAsB,IACnD,SAAS,OAAO,uBAiE/B;AAED;;GAEG;AACH,wBAAgB,qBAAqB,KACrB,SAAS,OAAO,uBAU/B;AAED;;GAEG;AACH,wBAAsB,iBAAiB,kBAKtC"}
+{"version":3,"file":"api-helpers.d.ts","sourceRoot":"","sources":["../src/api-helpers.ts"],"names":[],"mappings":"AAAA;;GAEG;AAOH,MAAM,WAAW,sBAAsB;IACrC,YAAY,EAAE,MAAM,CAAC;IACrB,gBAAgB,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,sBAAsB,IACnD,SAAS,OAAO,uBAgG/B;AAED;;GAEG;AACH,wBAAgB,qBAAqB,KACrB,SAAS,OAAO,uBAU/B;AAED;;GAEG;AACH,wBAAsB,iBAAiB,kBAKtC"}

package/dist/api-helpers.js

@@ -21,22 +21,43 @@ export function createMCPChatHandler(config) {
             await client.connect();
             clients.set(sessionId, client);
         }
+        // Create an AbortController to handle client disconnection
+        const abortController = new AbortController();
         // Create a streaming response
         const stream = new ReadableStream({
             async start(controller) {
                 const encoder = new TextEncoder();
                 const sendEvent = (type, data) => {
-                    controller.enqueue(encoder.encode(`data: ${JSON.stringify({ type, ...data })}\n\n`));
+                    // Check if client disconnected before sending more data
+                    if (abortController.signal.aborted) {
+                        return;
+                    }
+                    try {
+                        controller.enqueue(encoder.encode(`data: ${JSON.stringify({ type, ...data })}\n\n`));
+                    }
+                    catch (error) {
+                        // Client disconnected, abort processing
+                        abortController.abort();
+                    }
                 };
                 try {
                     sendEvent("thinking", { message: "🤔 Analyzing your question..." });
-                    // Process the query with thinking callback
+                    // Process the query with thinking callback and abort signal
                     const response = await client.processQuery(context ? `${message}\nContext: ${JSON.stringify(context)}` : message, (thinkingMessage) => {
                         sendEvent("thinking", { message: thinkingMessage });
-                    });
+                    }, abortController.signal // Pass abort signal to enable cancellation
+                    );
+                    // Check if aborted before streaming response
+                    if (abortController.signal.aborted) {
+                        return;
+                    }
                     // Stream the response in chunks
                     const chunkSize = 10;
                     for (let i = 0; i < response.length; i += chunkSize) {
+                        // Check for cancellation between chunks
+                        if (abortController.signal.aborted) {
+                            return;
+                        }
                         const chunk = response.slice(i, i + chunkSize);
                         sendEvent("content", { chunk });
                         // Small delay for better streaming effect
@@ -45,14 +66,22 @@ export function createMCPChatHandler(config) {
                     sendEvent("done", {});
                 }
                 catch (error) {
-                    sendEvent("error", {
-                        message: error instanceof Error ? error.message : "An error occurred",
-                    });
+                    // Don't send error if request was aborted
+                    if (!abortController.signal.aborted) {
+                        sendEvent("error", {
+                            message: error instanceof Error ? error.message : "An error occurred",
+                        });
+                    }
                 }
                 finally {
                     controller.close();
                 }
             },
+            cancel() {
+                // This is called when client disconnects/cancels
+                console.log("Client disconnected, aborting server processing");
+                abortController.abort();
+            }
         });
         return new Response(stream, {
             headers: {

package/dist/openai-client.d.ts

@@ -19,7 +19,7 @@ export declare class MCPClientOpenAI {
     constructor(config: MCPClientConfig);
     private compactConversation;
     connect(): Promise<void>;
-    processQuery(query: string, onThinking?: (message: string) => void): Promise<string>;
+    processQuery(query: string, onThinking?: (message: string) => void, abortSignal?: AbortSignal): Promise<string>;
     clearHistory(): void;
     cleanup(): Promise<void>;
 }

package/dist/openai-client.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"openai-client.d.ts","sourceRoot":"","sources":["../src/openai-client.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAMH,MAAM,WAAW,eAAe;IAC9B,YAAY,EAAE,MAAM,CAAC;IACrB,gBAAgB,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,qBAAa,eAAe;IAC1B,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,SAAS,CAAuB;IACxC,OAAO,CAAC,mBAAmB,CAAsB;IACjD,OAAO,CAAC,cAAc,CAAa;IACnC,OAAO,CAAC,MAAM,CAA4B;gBAE9B,MAAM,EAAE,eAAe;YAkCrB,mBAAmB;IAoB3B,OAAO,IAAI,OAAO,CAAC,IAAI,CAAC;IAIxB,YAAY,CAAC,KAAK,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,MAAM,CAAC;IAqL1F,YAAY,IAAI,IAAI;IAId,OAAO,IAAI,OAAO,CAAC,IAAI,CAAC;CAG/B"}
+{"version":3,"file":"openai-client.d.ts","sourceRoot":"","sources":["../src/openai-client.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAMH,MAAM,WAAW,eAAe;IAC9B,YAAY,EAAE,MAAM,CAAC;IACrB,gBAAgB,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,qBAAa,eAAe;IAC1B,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,SAAS,CAAuB;IACxC,OAAO,CAAC,mBAAmB,CAAsB;IACjD,OAAO,CAAC,cAAc,CAAa;IACnC,OAAO,CAAC,MAAM,CAA4B;gBAE9B,MAAM,EAAE,eAAe;YAkCrB,mBAAmB;IAoB3B,OAAO,IAAI,OAAO,CAAC,IAAI,CAAC;IAIxB,YAAY,CAAC,KAAK,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,EAAE,WAAW,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC,MAAM,CAAC;IAoMrH,YAAY,IAAI,IAAI;IAId,OAAO,IAAI,OAAO,CAAC,IAAI,CAAC;CAG/B"}

package/dist/openai-client.js

@@ -56,7 +56,11 @@ export class MCPClientOpenAI {
     async connect() {
         await this.client.connect(this.transport);
     }
-    async processQuery(query, onThinking) {
+    async processQuery(query, onThinking, abortSignal) {
+        // Check for cancellation at start
+        if (abortSignal?.aborted) {
+            throw new Error("Request was cancelled");
+        }
         // Check if we should compact
         const shouldCompact = this.conversationHistory.length >= 40 &&
             (Date.now() - this.lastCompaction > 10 * 60 * 1000);
@@ -91,6 +95,10 @@ export class MCPClientOpenAI {
         let outOfToolCalls = false;
         while (loopCount < maxLoops) {
             loopCount++;
+            // Check for cancellation before each API call
+            if (abortSignal?.aborted) {
+                throw new Error("Request was cancelled");
+            }
             // Call OpenAI Responses API with error handling
             let response;
             try {
@@ -140,6 +148,10 @@ export class MCPClientOpenAI {
             if (functionCalls.length > 0) {
                 this.conversationHistory.push(...output);
                 for (const functionCall of functionCalls) {
+                    // Check for cancellation before each tool call
+                    if (abortSignal?.aborted) {
+                        throw new Error("Request was cancelled");
+                    }
                     const functionName = functionCall.name;
                     const functionArgs = typeof functionCall.arguments === 'string'
                         ? JSON.parse(functionCall.arguments)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nqminds/mcp-client",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "Reusable MCP client component with AI chat interface",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",