@nqminds/mcp-client 1.0.4

package/README.md

@@ -0,0 +1,188 @@
+# @flair/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.
+
+## Features
+
+- 🎨 **Complete UI Component** - Ready-to-use chat interface with streaming support
+- 🤖 **OpenAI Integration** - Built-in OpenAI client with conversation management
+- 🔧 **API Helpers** - Simple Next.js API route helpers for instant setup
+- 🎨 **Customizable Styling** - CSS variables for easy theming
+- 📦 **All-in-One Package** - No need to configure MCP clients separately
+
+## Installation
+
+```bash
+npm install @flair/mcp-client
+```
+
+## Quick Start
+
+### 1. Set up environment variables
+
+Create a `.env.local` file:
+
+```env
+OPENAI_API_KEY=your_openai_api_key
+MCP_SERVER_COMMAND="node /path/to/your/mcp-server/build/index.js"
+OPENAI_MODEL=chatgpt-5-mini
+```
+
+### 2. Create API route
+
+Create `app/api/mcp/chat/route.ts`:
+
+```typescript
+import { createMCPChatHandler, createMCPClearHandler } from "@flair/mcp-client/server";
+
+const chatHandler = createMCPChatHandler({
+  openaiApiKey: process.env.OPENAI_API_KEY!,
+  mcpServerCommand: process.env.MCP_SERVER_COMMAND!,
+  openaiModel: process.env.OPENAI_MODEL,
+});
+
+const clearHandler = createMCPClearHandler();
+
+export async function POST(req: Request) {
+  return chatHandler(req);
+}
+
+export async function DELETE(req: Request) {
+  return clearHandler(req);
+}
+```
+
+### 3. Add the component to your app
+
+```tsx
+import { MCPChat } from '@flair/mcp-client';
+import '@flair/mcp-client/dist/styles/MCPChat.css';
+
+export default function Page() {
+  return (
+    <div>
+      <h1>My App</h1>
+      <MCPChat companyNumber="12345678" />
+    </div>
+  );
+}
+```
+
+### 4. Import CSS in your layout
+
+```tsx
+import '@flair/mcp-client/dist/styles/MCPChat.css';
+```
+
+That's it! Your MCP chat is ready to use.
+
+## Component Props
+
+```typescript
+interface MCPChatProps {
+  companyNumber?: string;      // Optional context
+  apiEndpoint?: string;         // Default: "/api/mcp/chat"
+  customStyles?: React.CSSProperties;  // CSS variable overrides
+  className?: string;           // Additional CSS class
+}
+```
+
+## Custom Styling
+
+Override CSS variables:
+
+```tsx
+const customStyles = {
+  '--mcp-primary-color': '#7c5cff',
+  '--mcp-border-radius': '24px',
+} as React.CSSProperties;
+
+<MCPChat customStyles={customStyles} />
+```
+
+Available CSS variables:
+- `--mcp-primary-color`
+- `--mcp-bg`
+- `--mcp-card-bg`
+- `--mcp-text`
+- `--mcp-text-secondary`
+- `--mcp-border`
+- `--mcp-border-radius`
+- `--mcp-spacing`
+
+## Advanced Usage
+
+### Direct Client Usage
+
+If you need more control, use the client directly (server-side only):
+
+```typescript
+import { MCPClientOpenAI } from '@flair/mcp-client/server';
+
+const client = new MCPClientOpenAI({
+  openaiApiKey: process.env.OPENAI_API_KEY!,
+  mcpServerCommand: process.env.MCP_SERVER_COMMAND!,
+  openaiModel: "chatgpt-5-mini",
+});
+
+await client.connect();
+const response = await client.processQuery("Hello!", (thinking) => {
+  console.log(thinking);
+});
+console.log(response);
+await client.cleanup();
+```
+
+### Custom API Implementation
+
+Create your own streaming handler (server-side):
+
+```typescript
+import { MCPClientOpenAI } from '@flair/mcp-client/server';
+
+export async function POST(req: Request) {
+  const { message } = await req.json();
+  
+  const client = new MCPClientOpenAI({
+    openaiApiKey: process.env.OPENAI_API_KEY!,
+    mcpServerCommand: process.env.MCP_SERVER_COMMAND!,
+  });
+  
+  await client.connect();
+  
+  const response = await client.processQuery(message, (thinking) => {
+    // Handle thinking steps
+  });
+  
+  await client.cleanup();
+  
+  return Response.json({ response });
+}
+```
+
+## API Reference
+
+See [EXAMPLES.md](EXAMPLES.md) for detailed examples.
+
+## Development
+
+### Building the Package
+
+```bash
+# Build with automatic patch version bump (1.0.0 → 1.0.1)
+npm run build
+
+# Build without version bump (development)
+npm run build:no-version
+
+# Bump minor version (1.0.0 → 1.1.0) for new features
+npm run version:minor
+
+# Bump major version (1.0.0 → 2.0.0) for breaking changes
+npm run version:major
+
+# Create release tarball
+npm run release
+```
+
+**Versioning:** Every `npm run build` automatically increments the patch version.

package/dist/MCPChat.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { MCPChatProps } from "./types";
+export declare function MCPChat({ companyNumber, apiEndpoint, customStyles, className }: MCPChatProps): React.JSX.Element;
+//# sourceMappingURL=MCPChat.d.ts.map

package/dist/MCPChat.d.ts.map

@@ -0,0 +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"}

package/dist/MCPChat.js

@@ -0,0 +1,207 @@
+"use client";
+import React, { useState, useRef, useEffect } from "react";
+import ReactMarkdown from "react-markdown";
+export function MCPChat({ companyNumber, apiEndpoint = "/api/mcp/chat", customStyles = {}, className = "" }) {
+    const [messages, setMessages] = useState([]);
+    const [input, setInput] = useState("");
+    const [isLoading, setIsLoading] = useState(false);
+    const [thinkingSteps, setThinkingSteps] = useState([]);
+    const [isExpanded, setIsExpanded] = useState(false);
+    const messagesEndRef = useRef(null);
+    const thinkingEndRef = useRef(null);
+    // Merge custom styles with default CSS variables
+    const containerStyle = {
+        ...customStyles,
+    };
+    const scrollToBottom = () => {
+        messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+    };
+    useEffect(() => {
+        scrollToBottom();
+    }, [messages]);
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        if (!input.trim() || isLoading)
+            return;
+        const userMessage = {
+            role: "user",
+            content: input.trim(),
+            timestamp: new Date(),
+        };
+        setMessages((prev) => [...prev, userMessage]);
+        setInput("");
+        setIsLoading(true);
+        setThinkingSteps([]);
+        // Add initial thinking step
+        let thinkingStepCounter = 0;
+        const addThinkingStep = (message) => {
+            setThinkingSteps((prev) => [
+                ...prev,
+                { id: `${Date.now()}-${thinkingStepCounter++}`, message, timestamp: new Date() },
+            ]);
+            // Auto-scroll thinking window
+            setTimeout(() => {
+                thinkingEndRef.current?.scrollIntoView({ behavior: "smooth" });
+            }, 50);
+        };
+        addThinkingStep("🤔 Analyzing your question...");
+        try {
+            // Call your API route that communicates with MCP
+            const response = await fetch(apiEndpoint, {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({
+                    message: userMessage.content,
+                    context: companyNumber ? { company_number: companyNumber } : undefined,
+                }),
+            });
+            if (!response.ok) {
+                throw new Error("Failed to get response");
+            }
+            const reader = response.body?.getReader();
+            const decoder = new TextDecoder();
+            if (!reader) {
+                throw new Error("No response body");
+            }
+            // Create a streaming message
+            const streamingMessage = {
+                role: "assistant",
+                content: "",
+                timestamp: new Date(),
+                isStreaming: true,
+            };
+            setMessages((prev) => [...prev, streamingMessage]);
+            let buffer = "";
+            let done = false;
+            while (!done) {
+                const { value, done: readerDone } = await reader.read();
+                done = readerDone;
+                if (value) {
+                    buffer += decoder.decode(value, { stream: true });
+                    const lines = buffer.split("\n");
+                    buffer = lines.pop() || "";
+                    for (const line of lines) {
+                        if (line.startsWith("data: ")) {
+                            const data = line.slice(6);
+                            if (data === "[DONE]") {
+                                continue;
+                            }
+                            try {
+                                const parsed = JSON.parse(data);
+                                if (parsed.type === "thinking") {
+                                    addThinkingStep(parsed.message || "Processing...");
+                                }
+                                else if (parsed.type === "content") {
+                                    // Update the streaming message with new content
+                                    setMessages((prev) => {
+                                        const updated = [...prev];
+                                        const lastIndex = updated.length - 1;
+                                        if (lastIndex >= 0 && updated[lastIndex].isStreaming) {
+                                            // Create a new message object instead of mutating
+                                            updated[lastIndex] = {
+                                                ...updated[lastIndex],
+                                                content: updated[lastIndex].content + (parsed.chunk || ""),
+                                            };
+                                        }
+                                        return updated;
+                                    });
+                                }
+                                else if (parsed.type === "done") {
+                                    // Mark streaming as complete
+                                    setMessages((prev) => {
+                                        const updated = [...prev];
+                                        const lastIndex = updated.length - 1;
+                                        if (lastIndex >= 0 && updated[lastIndex].isStreaming) {
+                                            // Create a new message object instead of mutating
+                                            updated[lastIndex] = {
+                                                ...updated[lastIndex],
+                                                isStreaming: false,
+                                            };
+                                        }
+                                        return updated;
+                                    });
+                                }
+                                else if (parsed.type === "error") {
+                                    // Handle error from stream
+                                    throw new Error(parsed.message || "Stream error");
+                                }
+                            }
+                            catch (e) {
+                                console.error("Error parsing SSE data:", e);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        catch (error) {
+            console.error("Error:", error);
+            const errorMessage = {
+                role: "assistant",
+                content: "Sorry, I encountered an error. Please try again.",
+                timestamp: new Date(),
+            };
+            setMessages((prev) => {
+                // Remove streaming message if it exists
+                const filtered = prev.filter((m) => !m.isStreaming);
+                return [...filtered, errorMessage];
+            });
+        }
+        finally {
+            setIsLoading(false);
+            // Clear thinking steps after a brief delay
+            setTimeout(() => setThinkingSteps([]), 2000);
+        }
+    };
+    const clearChat = async () => {
+        setMessages([]);
+        // Also clear server-side conversation history
+        try {
+            await fetch(apiEndpoint, {
+                method: "DELETE",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ sessionId: "default" }),
+            });
+        }
+        catch (error) {
+            console.error("Failed to clear server conversation:", error);
+        }
+    };
+    if (!isExpanded) {
+        return (React.createElement("div", { className: `mcp-chat-trigger ${className}`, style: containerStyle },
+            React.createElement("button", { onClick: () => setIsExpanded(true), className: "mcp-chat-trigger-button" }, "\uD83D\uDCAC Ask AI Assistant")));
+    }
+    return (React.createElement("div", { className: `mcp-chat-container ${className}`, style: containerStyle },
+        React.createElement("div", { className: "mcp-chat-header" },
+            React.createElement("h3", { className: "mcp-chat-title" }, "AI Assistant"),
+            React.createElement("div", { className: "mcp-chat-header-actions" },
+                messages.length > 0 && (React.createElement("button", { onClick: clearChat, className: "mcp-chat-button mcp-chat-button-secondary" }, "Clear")),
+                React.createElement("button", { onClick: () => setIsExpanded(false), className: "mcp-chat-button mcp-chat-button-secondary" }, "\u2715"))),
+        React.createElement("div", { className: "mcp-chat-messages" },
+            messages.length === 0 && (React.createElement("div", { className: "mcp-chat-welcome" },
+                React.createElement("p", { className: "mcp-chat-welcome-title" }, "\uD83D\uDC4B Hi! I can help you with company information."),
+                companyNumber && (React.createElement("p", { className: "mcp-chat-welcome-subtitle" },
+                    "Currently viewing: ",
+                    React.createElement("strong", null, companyNumber))),
+                React.createElement("p", { className: "mcp-chat-welcome-subtitle" }, "Try asking:"),
+                React.createElement("ul", { className: "mcp-chat-suggestions" },
+                    React.createElement("li", null, "\u201CSay hello\u201D"),
+                    companyNumber && (React.createElement(React.Fragment, null,
+                        React.createElement("li", null, "\u201CGet company info\u201D"),
+                        React.createElement("li", null, "\u201CShow me financial data from 2020\u201D")))))),
+            messages.map((msg, idx) => (React.createElement("div", { key: idx, className: `mcp-chat-message ${msg.role === "user" ? "mcp-chat-message-user" : "mcp-chat-message-assistant"}` },
+                React.createElement("div", { className: "mcp-chat-message-bubble" },
+                    msg.role === "assistant" ? (React.createElement("div", { className: "mcp-chat-message-content markdown-content" },
+                        React.createElement(ReactMarkdown, null, msg.content))) : (React.createElement("div", { className: "mcp-chat-message-content" }, msg.content)),
+                    React.createElement("div", { className: "mcp-chat-message-timestamp" }, msg.timestamp.toLocaleTimeString()))))),
+            isLoading && thinkingSteps.length > 0 && (React.createElement("div", { className: "mcp-chat-message mcp-chat-message-assistant" },
+                React.createElement("div", { className: "mcp-chat-thinking" },
+                    React.createElement("div", { className: "mcp-chat-thinking-title" }, "\uD83D\uDCAD Processing..."),
+                    React.createElement("div", { className: "mcp-chat-thinking-steps" },
+                        thinkingSteps.map((step) => (React.createElement("div", { key: step.id, className: "mcp-chat-thinking-step" }, step.message))),
+                        React.createElement("div", { ref: thinkingEndRef }))))),
+            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"))));
+}

package/dist/api-helpers.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Helper utilities for creating MCP API routes in Next.js
+ */
+export interface CreateMCPHandlerConfig {
+    openaiApiKey: string;
+    mcpServerCommand: string;
+    openaiModel?: string;
+}
+/**
+ * Creates a streaming MCP chat handler for Next.js API routes
+ */
+export declare function createMCPChatHandler(config: CreateMCPHandlerConfig): (request: Request) => Promise<Response>;
+/**
+ * Creates a handler for clearing conversation history
+ */
+export declare function createMCPClearHandler(): (request: Request) => Promise<Response>;
+/**
+ * Cleanup function to close all MCP clients
+ */
+export declare function cleanupMCPClients(): Promise<void>;
+//# sourceMappingURL=api-helpers.d.ts.map

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

@@ -0,0 +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"}

package/dist/api-helpers.js

@@ -0,0 +1,87 @@
+/**
+ * Helper utilities for creating MCP API routes in Next.js
+ */
+import { MCPClientOpenAI } from "./openai-client";
+// Global client instance (singleton per session)
+const clients = new Map();
+/**
+ * Creates a streaming MCP chat handler for Next.js API routes
+ */
+export function createMCPChatHandler(config) {
+    return async (request) => {
+        const { message, context, sessionId = "default" } = await request.json();
+        // Get or create client for this session
+        let client = clients.get(sessionId);
+        if (!client) {
+            client = new MCPClientOpenAI({
+                openaiApiKey: config.openaiApiKey,
+                mcpServerCommand: config.mcpServerCommand,
+                openaiModel: config.openaiModel,
+            });
+            await client.connect();
+            clients.set(sessionId, client);
+        }
+        // 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`));
+                };
+                try {
+                    sendEvent("thinking", { message: "🤔 Analyzing your question..." });
+                    // Process the query with thinking callback
+                    const response = await client.processQuery(context ? `${message}\nContext: ${JSON.stringify(context)}` : message, (thinkingMessage) => {
+                        sendEvent("thinking", { message: thinkingMessage });
+                    });
+                    // Stream the response in chunks
+                    const chunkSize = 10;
+                    for (let i = 0; i < response.length; i += chunkSize) {
+                        const chunk = response.slice(i, i + chunkSize);
+                        sendEvent("content", { chunk });
+                        // Small delay for better streaming effect
+                        await new Promise((resolve) => setTimeout(resolve, 20));
+                    }
+                    sendEvent("done", {});
+                }
+                catch (error) {
+                    sendEvent("error", {
+                        message: error instanceof Error ? error.message : "An error occurred",
+                    });
+                }
+                finally {
+                    controller.close();
+                }
+            },
+        });
+        return new Response(stream, {
+            headers: {
+                "Content-Type": "text/event-stream",
+                "Cache-Control": "no-cache",
+                Connection: "keep-alive",
+            },
+        });
+    };
+}
+/**
+ * Creates a handler for clearing conversation history
+ */
+export function createMCPClearHandler() {
+    return async (request) => {
+        const { sessionId = "default" } = await request.json();
+        const client = clients.get(sessionId);
+        if (client) {
+            client.clearHistory();
+        }
+        return Response.json({ success: true });
+    };
+}
+/**
+ * Cleanup function to close all MCP clients
+ */
+export async function cleanupMCPClients() {
+    for (const [sessionId, client] of clients.entries()) {
+        await client.cleanup();
+        clients.delete(sessionId);
+    }
+}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { MCPChat } from "./MCPChat";
+export type { MCPChatProps, Message, ThinkingStep, StreamEvent } from "./types";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC"}

package/dist/index.js

@@ -0,0 +1,2 @@
+// Client-side exports only (safe for browser)
+export { MCPChat } from "./MCPChat";

package/dist/openai-client.d.ts

@@ -0,0 +1,26 @@
+/**
+ * OpenAI-powered MCP Client
+ * Uses ChatGPT to intelligently interact with MCP tools
+ */
+export interface MCPClientConfig {
+    openaiApiKey: string;
+    mcpServerCommand: string;
+    openaiModel?: string;
+    clientName?: string;
+    clientVersion?: string;
+}
+export declare class MCPClientOpenAI {
+    private client;
+    private openai;
+    private transport;
+    private conversationHistory;
+    private lastCompaction;
+    private config;
+    constructor(config: MCPClientConfig);
+    private compactConversation;
+    connect(): Promise<void>;
+    processQuery(query: string, onThinking?: (message: string) => void): Promise<string>;
+    clearHistory(): void;
+    cleanup(): Promise<void>;
+}
+//# sourceMappingURL=openai-client.d.ts.map

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

@@ -0,0 +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"}

package/dist/openai-client.js

@@ -0,0 +1,225 @@
+/**
+ * OpenAI-powered MCP Client
+ * Uses ChatGPT to intelligently interact with MCP tools
+ */
+import { Client } from "@modelcontextprotocol/sdk/client/index.js";
+import { StdioClientTransport } from "@modelcontextprotocol/sdk/client/stdio.js";
+import OpenAI from "openai";
+export class MCPClientOpenAI {
+    constructor(config) {
+        this.conversationHistory = [];
+        this.lastCompaction = 0;
+        this.config = {
+            openaiApiKey: config.openaiApiKey,
+            mcpServerCommand: config.mcpServerCommand,
+            openaiModel: config.openaiModel || "chatgpt-5-mini",
+            clientName: config.clientName || "mcp-flair-client",
+            clientVersion: config.clientVersion || "1.0.0",
+        };
+        this.openai = new OpenAI({
+            apiKey: this.config.openaiApiKey,
+        });
+        // Parse the server command and args
+        const serverCmd = this.config.mcpServerCommand.split(" ");
+        const command = serverCmd[0];
+        const args = serverCmd.slice(1);
+        this.transport = new StdioClientTransport({
+            command: command,
+            args: args,
+        });
+        this.client = new Client({
+            name: this.config.clientName,
+            version: this.config.clientVersion,
+        }, {
+            capabilities: {},
+        });
+    }
+    async compactConversation() {
+        try {
+            const compactionResponse = await this.openai.responses.compact({
+                model: this.config.openaiModel,
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                input: this.conversationHistory,
+            });
+            this.conversationHistory = compactionResponse.output;
+            this.lastCompaction = Date.now();
+        }
+        catch (error) {
+            // Keep system message and last 25 items
+            if (this.conversationHistory.length > 26) {
+                const systemMessage = this.conversationHistory[0];
+                const recentItems = this.conversationHistory.slice(-25);
+                this.conversationHistory = [systemMessage, ...recentItems];
+            }
+        }
+    }
+    async connect() {
+        await this.client.connect(this.transport);
+    }
+    async processQuery(query, onThinking) {
+        // Check if we should compact
+        const shouldCompact = this.conversationHistory.length >= 40 &&
+            (Date.now() - this.lastCompaction > 10 * 60 * 1000);
+        if (shouldCompact) {
+            await this.compactConversation();
+        }
+        // Add user message to conversation history
+        this.conversationHistory.push({
+            type: "message",
+            role: "user",
+            content: [
+                {
+                    type: "input_text",
+                    text: query,
+                }
+            ],
+        });
+        // Get available tools from MCP server
+        const toolsResponse = await this.client.listTools();
+        // Convert MCP tools to OpenAI Responses API format
+        const tools = toolsResponse.tools.map((tool) => ({
+            type: "function",
+            name: tool.name,
+            description: tool.description || "",
+            parameters: tool.inputSchema,
+            strict: false,
+        }));
+        // Multi-turn conversation with tool calling
+        let loopCount = 0;
+        const maxLoops = 15;
+        let finalResponse = "";
+        let outOfToolCalls = false;
+        while (loopCount < maxLoops) {
+            loopCount++;
+            // Call OpenAI Responses API with error handling
+            let response;
+            try {
+                response = await this.openai.responses.create({
+                    model: this.config.openaiModel,
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    input: this.conversationHistory,
+                    tools: outOfToolCalls ? [] : tools,
+                });
+            }
+            catch (error) {
+                const err = error;
+                // Handle context length exceeded
+                if (err.status === 400 &&
+                    (err.code === 'context_length_exceeded' ||
+                        err.message?.includes('context') ||
+                        err.message?.includes('length'))) {
+                    await this.compactConversation();
+                    response = await this.openai.responses.create({
+                        model: this.config.openaiModel,
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        input: this.conversationHistory,
+                        tools: outOfToolCalls ? [] : tools,
+                    });
+                }
+                // Handle tool calls exhausted
+                else if (err.status === 400 &&
+                    (err.code === 'response_incomplete' ||
+                        err.message?.includes('incomplete') ||
+                        err.message?.includes('tool'))) {
+                    outOfToolCalls = true;
+                    response = await this.openai.responses.create({
+                        model: this.config.openaiModel,
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        input: this.conversationHistory,
+                        tools: [],
+                    });
+                }
+                else {
+                    throw error;
+                }
+            }
+            const output = response.output;
+            // Find function_call items
+            const functionCalls = output.filter((item) => item.type === "function_call");
+            // Check if AI wants to call tools
+            if (functionCalls.length > 0) {
+                this.conversationHistory.push(...output);
+                for (const functionCall of functionCalls) {
+                    const functionName = functionCall.name;
+                    const functionArgs = typeof functionCall.arguments === 'string'
+                        ? JSON.parse(functionCall.arguments)
+                        : functionCall.arguments;
+                    onThinking?.(`🔧 Using tool: ${functionName}`);
+                    try {
+                        // Execute the tool via MCP
+                        const result = await this.client.callTool({
+                            name: functionName,
+                            arguments: functionArgs,
+                        });
+                        // Add tool result to conversation history
+                        this.conversationHistory.push({
+                            type: "function_call_output",
+                            call_id: functionCall.call_id,
+                            output: JSON.stringify(result.content),
+                        });
+                    }
+                    catch (error) {
+                        this.conversationHistory.push({
+                            type: "function_call_output",
+                            call_id: functionCall.call_id,
+                            output: `Error: ${error instanceof Error ? error.message : String(error)}`,
+                        });
+                    }
+                }
+                continue;
+            }
+            else {
+                // No more tool calls, extract final response
+                for (const item of output) {
+                    if (item.type === "message" && item.role === "assistant") {
+                        for (const contentItem of item.content) {
+                            if (contentItem.type === "output_text") {
+                                finalResponse += contentItem.text;
+                            }
+                        }
+                    }
+                }
+                this.conversationHistory.push(...output);
+                break;
+            }
+        }
+        // If we hit max loops, make one final request without tools
+        if (loopCount >= maxLoops && !finalResponse) {
+            try {
+                const finalApiResponse = await this.openai.responses.create({
+                    model: this.config.openaiModel,
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    input: this.conversationHistory,
+                    tools: [],
+                });
+                const finalOutput = finalApiResponse.output;
+                for (const item of finalOutput) {
+                    if (item.type === "message" && item.role === "assistant") {
+                        for (const contentItem of item.content) {
+                            if (contentItem.type === "output_text") {
+                                finalResponse += contentItem.text;
+                            }
+                        }
+                    }
+                }
+                this.conversationHistory.push(...finalOutput);
+            }
+            catch (error) {
+                finalResponse = "I've gathered information but reached my reasoning limit. Please try rephrasing your question.";
+            }
+        }
+        // Keep conversation history manageable
+        if (this.conversationHistory.length > 50) {
+            const systemMessage = this.conversationHistory[0];
+            const recentItems = this.conversationHistory.slice(-49);
+            this.conversationHistory = [systemMessage, ...recentItems];
+        }
+        return finalResponse;
+    }
+    clearHistory() {
+        this.conversationHistory = [];
+    }
+    async cleanup() {
+        await this.client.close();
+    }
+}

package/dist/server.d.ts

@@ -0,0 +1,3 @@
+export { MCPClientOpenAI, type MCPClientConfig } from "./openai-client";
+export { createMCPChatHandler, createMCPClearHandler, cleanupMCPClients } from "./api-helpers";
+//# sourceMappingURL=server.d.ts.map

package/dist/server.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"server.d.ts","sourceRoot":"","sources":["../src/server.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,KAAK,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACxE,OAAO,EAAE,oBAAoB,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC"}

package/dist/server.js

@@ -0,0 +1,3 @@
+// Server-side exports only (Node.js)
+export { MCPClientOpenAI } from "./openai-client";
+export { createMCPChatHandler, createMCPClearHandler, cleanupMCPClients } from "./api-helpers";

package/dist/styles/MCPChat.css

@@ -0,0 +1,340 @@
+/* MCP Chat Component Styles */
+
+/* CSS Variables for customization */
+:root {
+  --mcp-primary-color: #4ea1ff;
+  --mcp-bg: #0b0d12;
+  --mcp-card-bg: #121621;
+  --mcp-text: #eaf0ff;
+  --mcp-text-secondary: #99a2b2;
+  --mcp-border: #1e2533;
+  --mcp-border-radius: 16px;
+  --mcp-border-radius-small: 10px;
+  --mcp-spacing: 24px;
+  --mcp-spacing-small: 12px;
+  --mcp-box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
+}
+
+/* Trigger Button (collapsed state) */
+.mcp-chat-trigger {
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  z-index: 1000;
+}
+
+.mcp-chat-trigger-button {
+  padding: 16px 32px;
+  font-size: 18px;
+  border-radius: 28px;
+  box-shadow: var(--mcp-box-shadow);
+  font-weight: 600;
+  background: var(--mcp-primary-color);
+  color: white;
+  border: none;
+  cursor: pointer;
+  font-family: inherit;
+  transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.mcp-chat-trigger-button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
+}
+
+.mcp-chat-trigger-button:active {
+  transform: translateY(0);
+}
+
+/* Main Container (expanded state) */
+.mcp-chat-container {
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  width: 550px;
+  max-width: calc(100vw - 48px);
+  height: 700px;
+  max-height: calc(100vh - 48px);
+  background: var(--mcp-bg);
+  border: 1px solid var(--mcp-border);
+  border-radius: var(--mcp-border-radius);
+  box-shadow: var(--mcp-box-shadow);
+  display: flex;
+  flex-direction: column;
+  z-index: 1000;
+}
+
+/* Header */
+.mcp-chat-header {
+  padding: 18px 24px;
+  border-bottom: 1px solid var(--mcp-border);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: var(--mcp-card-bg);
+  border-top-left-radius: var(--mcp-border-radius);
+  border-top-right-radius: var(--mcp-border-radius);
+}
+
+.mcp-chat-title {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 600;
+  color: var(--mcp-text);
+}
+
+.mcp-chat-header-actions {
+  display: flex;
+  gap: 10px;
+}
+
+/* Buttons */
+.mcp-chat-button {
+  padding: 8px 16px;
+  font-size: 14px;
+  border-radius: 8px;
+  border: none;
+  cursor: pointer;
+  font-family: inherit;
+  font-weight: 500;
+  transition: opacity 0.2s, background 0.2s;
+}
+
+.mcp-chat-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.mcp-chat-button-primary {
+  background: var(--mcp-primary-color);
+  color: white;
+  padding: 12px 24px;
+  font-size: 15px;
+  border-radius: var(--mcp-border-radius-small);
+}
+
+.mcp-chat-button-primary:hover:not(:disabled) {
+  opacity: 0.9;
+}
+
+.mcp-chat-button-secondary {
+  background: transparent;
+  border: 1px solid var(--mcp-border);
+  color: var(--mcp-text);
+}
+
+.mcp-chat-button-secondary:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.05);
+}
+
+/* Messages Area */
+.mcp-chat-messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--mcp-spacing);
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+/* Welcome Message */
+.mcp-chat-welcome {
+  text-align: center;
+  color: var(--mcp-text-secondary);
+  margin-top: 60px;
+}
+
+.mcp-chat-welcome-title {
+  font-size: 18px;
+  font-weight: 500;
+  color: var(--mcp-text);
+}
+
+.mcp-chat-welcome-subtitle {
+  font-size: 16px;
+  margin-top: 12px;
+}
+
+.mcp-chat-suggestions {
+  text-align: left;
+  font-size: 15px;
+  line-height: 2;
+  margin-top: 24px;
+  padding-left: 20px;
+}
+
+/* Message Bubbles */
+.mcp-chat-message {
+  display: flex;
+  max-width: 85%;
+}
+
+.mcp-chat-message-user {
+  align-self: flex-end;
+}
+
+.mcp-chat-message-assistant {
+  align-self: flex-start;
+}
+
+.mcp-chat-message-bubble {
+  padding: 14px 18px;
+  border-radius: 12px;
+}
+
+.mcp-chat-message-user .mcp-chat-message-bubble {
+  background: var(--mcp-primary-color);
+  color: #fff;
+}
+
+.mcp-chat-message-assistant .mcp-chat-message-bubble {
+  background: var(--mcp-card-bg);
+  border: 1px solid var(--mcp-border);
+  color: var(--mcp-text);
+}
+
+.mcp-chat-message-content {
+  font-size: 15px;
+  white-space: pre-wrap;
+  line-height: 1.6;
+}
+
+.mcp-chat-message-timestamp {
+  font-size: 12px;
+  opacity: 0.6;
+  margin-top: 6px;
+}
+
+/* Markdown Content */
+.markdown-content {
+  font-size: 15px;
+  line-height: 1.6;
+}
+
+.markdown-content p {
+  margin: 0 0 12px 0;
+}
+
+.markdown-content p:last-child {
+  margin-bottom: 0;
+}
+
+.markdown-content ul,
+.markdown-content ol {
+  margin: 0 0 12px 0;
+  padding-left: 20px;
+}
+
+.markdown-content li {
+  margin: 4px 0;
+}
+
+.markdown-content code {
+  background: rgba(255, 255, 255, 0.1);
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-size: 14px;
+  font-family: ui-monospace, monospace;
+}
+
+.markdown-content pre {
+  background: rgba(255, 255, 255, 0.05);
+  padding: 12px;
+  border-radius: 8px;
+  overflow-x: auto;
+  margin: 0 0 12px 0;
+}
+
+.markdown-content pre code {
+  background: none;
+  padding: 0;
+}
+
+/* Thinking Steps */
+.mcp-chat-thinking {
+  padding: 14px 18px;
+  border-radius: 12px;
+  background: var(--mcp-card-bg);
+  border: 1px solid var(--mcp-border);
+  width: 100%;
+}
+
+.mcp-chat-thinking-title {
+  font-size: 14px;
+  font-weight: 600;
+  margin-bottom: 8px;
+  opacity: 0.8;
+  color: var(--mcp-text);
+}
+
+.mcp-chat-thinking-steps {
+  max-height: 120px;
+  overflow-y: auto;
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--mcp-text-secondary);
+}
+
+.mcp-chat-thinking-step {
+  padding-bottom: 6px;
+  margin-bottom: 6px;
+  border-bottom: 1px solid var(--mcp-border);
+}
+
+.mcp-chat-thinking-step:last-child {
+  border-bottom: none;
+}
+
+/* Input Form */
+.mcp-chat-input-form {
+  padding: 20px;
+  border-top: 1px solid var(--mcp-border);
+  display: flex;
+  gap: var(--mcp-spacing-small);
+  background: var(--mcp-card-bg);
+  border-bottom-left-radius: var(--mcp-border-radius);
+  border-bottom-right-radius: var(--mcp-border-radius);
+}
+
+.mcp-chat-input {
+  flex: 1;
+  font-size: 15px;
+  padding: 12px 16px;
+  border-radius: var(--mcp-border-radius-small);
+  background: var(--mcp-bg);
+  border: 1px solid var(--mcp-border);
+  color: var(--mcp-text);
+  font-family: inherit;
+  outline: none;
+}
+
+.mcp-chat-input:focus {
+  border-color: var(--mcp-primary-color);
+}
+
+.mcp-chat-input:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Scrollbar styling */
+.mcp-chat-messages::-webkit-scrollbar,
+.mcp-chat-thinking-steps::-webkit-scrollbar {
+  width: 8px;
+}
+
+.mcp-chat-messages::-webkit-scrollbar-track,
+.mcp-chat-thinking-steps::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.mcp-chat-messages::-webkit-scrollbar-thumb,
+.mcp-chat-thinking-steps::-webkit-scrollbar-thumb {
+  background: var(--mcp-border);
+  border-radius: 4px;
+}
+
+.mcp-chat-messages::-webkit-scrollbar-thumb:hover,
+.mcp-chat-thinking-steps::-webkit-scrollbar-thumb:hover {
+  background: var(--mcp-text-secondary);
+}

package/dist/types.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Shared types for MCP client
+ */
+export interface Message {
+    role: "user" | "assistant";
+    content: string;
+    timestamp: Date;
+    isStreaming?: boolean;
+}
+export interface ThinkingStep {
+    id: string;
+    message: string;
+    timestamp: Date;
+}
+export interface MCPChatProps {
+    companyNumber?: string;
+    apiEndpoint?: string;
+    customStyles?: React.CSSProperties;
+    className?: string;
+}
+export interface StreamEvent {
+    type: "thinking" | "content" | "done" | "error";
+    message?: string;
+    chunk?: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,WAAW,OAAO;IACtB,IAAI,EAAE,MAAM,GAAG,WAAW,CAAC;IAC3B,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,IAAI,CAAC;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,IAAI,CAAC;CACjB;AAED,MAAM,WAAW,YAAY;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,UAAU,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;IAChD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB"}

package/dist/types.js

@@ -0,0 +1,4 @@
+/**
+ * Shared types for MCP client
+ */
+export {};

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@nqminds/mcp-client",
+  "version": "1.0.4",
+  "description": "Reusable MCP client component with AI chat interface",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./server": {
+      "types": "./dist/server.d.ts",
+      "default": "./dist/server.js"
+    },
+    "./dist/styles/MCPChat.css": "./dist/styles/MCPChat.css"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "npm run version:bump && tsc && npm run copy-css",
+    "build:no-version": "tsc && npm run copy-css",
+    "copy-css": "mkdir -p dist/styles && cp src/styles/MCPChat.css dist/styles/",
+    "dev": "tsc --watch",
+    "version:bump": "npm version patch --no-git-tag-version",
+    "version:minor": "npm version minor --no-git-tag-version && npm run build:no-version",
+    "version:major": "npm version major --no-git-tag-version && npm run build:no-version",
+    "release": "npm run build && npm pack",
+    "prepublishOnly": "npm run build:no-version"
+  },
+  "keywords": [
+    "mcp",
+    "ai",
+    "chat",
+    "react",
+    "component"
+  ],
+  "author": "Flair",
+  "license": "UNLICENSED",
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "react-markdown": "^9.0.0"
+  },
+  "dependencies": {
+    "@modelcontextprotocol/sdk": "^1.0.4",
+    "openai": "^6.15.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-markdown": "^9.1.0",
+    "typescript": "^5.0.0"
+  }
+}