├── .gitignore
├── README.md
├── agent
    ├── .gitignore
    ├── .vscode
    │   ├── cspell.json
    │   └── settings.json
    ├── langgraph.json
    ├── math_server.py
    ├── poetry.lock
    ├── pyproject.toml
    ├── sample_agent
    │   ├── __init__.py
    │   └── agent.py
    └── uv.lock
├── app
    ├── api
    │   └── copilotkit
    │   │   └── route.ts
    ├── components
    │   ├── CopilotActionHandler.tsx
    │   ├── ExampleConfigs.tsx
    │   ├── MCPConfigForm.tsx
    │   ├── PreviewSpreadsheetChanges.tsx
    │   ├── SingleSpreadsheet.tsx
    │   ├── SpreadsheetRenderer.tsx
    │   └── ToolCallRenderer.tsx
    ├── favicon.ico
    ├── globals.css
    ├── hooks
    │   └── useLocalStorage.ts
    ├── instructions.ts
    ├── layout.tsx
    ├── page.tsx
    ├── types.ts
    └── utils
    │   └── canonicalSpreadsheetData.ts
├── components.json
├── eslint.config.mjs
├── lib
    └── utils.ts
├── next.config.ts
├── package.json
├── pnpm-lock.yaml
├── postcss.config.mjs
├── public
    ├── file.svg
    ├── globe.svg
    ├── next.svg
    ├── vercel.svg
    └── window.svg
├── renovate.json
└── tsconfig.json


/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.*
 7 | .yarn/*
 8 | !.yarn/patches
 9 | !.yarn/plugins
10 | !.yarn/releases
11 | !.yarn/versions
12 | 
13 | # pnpm store
14 | /.pnpm-store/
15 | 
16 | # testing
17 | /coverage
18 | 
19 | # next.js
20 | /.next/
21 | /out/
22 | 
23 | # production
24 | /build
25 | 
26 | # misc
27 | .DS_Store
28 | *.pem
29 | 
30 | # debug
31 | npm-debug.log*
32 | yarn-debug.log*
33 | yarn-error.log*
34 | .pnpm-debug.log*
35 | 
36 | # env files (can opt-in for committing if needed)
37 | .env*
38 | 
39 | # vercel
40 | .vercel
41 | 
42 | # typescript
43 | *.tsbuildinfo
44 | next-env.d.ts
45 | 
46 | # langgraph
47 | .langgraph_api
48 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <div align="center">
 2 |   
 3 | # Open MCP Client
 4 | 
 5 | ![CopilotKit-Banner](https://github.com/user-attachments/assets/8167c845-0381-45d9-ad1c-83f995d48290)
 6 | </div>
 7 | 
 8 | https://github.com/user-attachments/assets/364b6705-14d4-4e6d-bea7-fb9f12664fab
 9 | 
10 | 
11 | # Getting Started
12 | 
13 | ## Set Up Environment Variables 
14 | Create a `.env` file at the root of your project:
15 | 
16 | 
17 | 
18 | ```sh
19 | touch .env
20 | ```
21 | 
22 | Add the following to `.env`:
23 | 
24 | 
25 | ```sh
26 | LANGSMITH_API_KEY=lsv2_...
27 | OPENAI_API_KEY=sk-...
28 | ```
29 | 
30 | Next, navigate to the `agent` folder and create another `.env` file:
31 | 
32 | 
33 | 
34 | ```sh
35 | cd agent
36 | touch .env
37 | ```
38 | 
39 | Add the following inside `agent/.env`:
40 | 
41 | ```sh
42 | OPENAI_API_KEY=sk-...
43 | LANGSMITH_API_KEY=lsv2_...
44 | ```
45 | 
46 | ## Set Up Poetry:
47 | 
48 | Poetry manages dependencies for the agent service. Install it with:
49 | 
50 | 
51 | ```sh
52 | pip install poetry
53 | ```
54 | 
55 | Verify the installation by running:
56 | 
57 | 
58 | ```sh
59 | poetry --version
60 | ```
61 | 
62 | ## Development
63 | 
64 | For easier debugging, run the `frontend` and `agent` in separate terminals:
65 | 
66 | 
67 | ```bash
68 | # Terminal 1 - Frontend
69 | pnpm run dev-frontend
70 | 
71 | # Terminal 2 - Agent
72 | pnpm run dev-agent
73 | ```
74 | 
75 | Alternatively, launch both services together:
76 | 
77 | 
78 | ```bash
79 | pnpm run dev
80 | ```
81 | 
82 | Visit [http://localhost:3000](http://localhost:3000) in your browser to view the application.
83 | 
84 | 
85 | ## Architecture
86 | 
87 | The codebase is organized into two primary components:
88 | 
89 | 
90 | - **Frontend** -  Handles the user interface.
91 | - **Agent** - Manages the core functionality.
92 | 
93 | ## License
94 | Distributed under the MIT License. See LICENSE for more info.
95 | 


--------------------------------------------------------------------------------
/agent/.gitignore:
--------------------------------------------------------------------------------
1 | venv/
2 | __pycache__/
3 | *.pyc
4 | .env
5 | .vercel
6 | .langgraph_api


--------------------------------------------------------------------------------
/agent/.vscode/cspell.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "version": "0.2",
 3 |   "language": "en",
 4 |   "words": [
 5 |     "langgraph",
 6 |     "langchain",
 7 |     "perplexity",
 8 |     "openai",
 9 |     "ainvoke",
10 |     "pydantic",
11 |     "tavily",
12 |     "copilotkit",
13 |     "fastapi",
14 |     "uvicorn",
15 |     "checkpointer",
16 |     "dotenv"
17 |   ]
18 | }
19 | 


--------------------------------------------------------------------------------
/agent/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |   "python.analysis.typeCheckingMode": "basic"
3 | }
4 | 


--------------------------------------------------------------------------------
/agent/langgraph.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "python_version": "3.12",
 3 |   "dockerfile_lines": [],
 4 |   "dependencies": ["."],
 5 |   "graphs": {
 6 |     "sample_agent": "./sample_agent/agent.py:graph"
 7 |   },
 8 |   "env": ".env"
 9 | }
10 | 


--------------------------------------------------------------------------------
/agent/math_server.py:
--------------------------------------------------------------------------------
 1 | # math_server.py
 2 | from mcp.server.fastmcp import FastMCP
 3 | 
 4 | mcp = FastMCP("Math")
 5 | 
 6 | @mcp.tool()
 7 | def add(a: int, b: int) -> int:
 8 |     """Add two numbers"""
 9 |     return a + b
10 | 
11 | @mcp.tool()
12 | def multiply(a: int, b: int) -> int:
13 |     """Multiply two numbers"""
14 |     return a * b
15 | 
16 | if __name__ == "__main__":
17 |     mcp.run(transport="stdio")


--------------------------------------------------------------------------------
/agent/pyproject.toml:
--------------------------------------------------------------------------------
 1 | [tool.poetry]
 2 | name = "sample_agent"
 3 | version = "0.1.0"
 4 | description = "Starter"
 5 | authors = ["Markus Ecker <markus.ecker@gmail.com>"]
 6 | license = "MIT"
 7 | 
 8 | [project]
 9 | name = "sample_agent"
10 | version = "0.0.1"
11 | dependencies = [
12 |     "langchain-openai>=0.2.1",
13 |     "langchain-anthropic>=0.2.1",
14 |     "langchain>=0.3.1",
15 |     "openai>=1.51.0",
16 |     "langchain-community>=0.3.1",
17 |     "copilotkit==0.1.39",
18 |     "uvicorn>=0.31.0",
19 |     "python-dotenv>=1.0.1",
20 |     "langchain-core>=0.3.25",
21 |     "langgraph-cli[inmem]>=0.1.64",
22 |     "langchain-mcp-adapters>=0.0.3",
23 |     "fastmcp>=0.4.1",
24 |     "langgraph>=0.3.5"
25 | ]
26 | 
27 | [build-system]
28 | requires = ["setuptools >= 61.0"]
29 | build-backend = "setuptools.build_meta"
30 | 
31 | [tool.poetry.dependencies]
32 | python = ">=3.10,<3.13"
33 | langchain-openai = "^0.2.1"
34 | langchain-anthropic = "^0.2.1"
35 | langchain = "^0.3.1"
36 | openai = "^1.51.0"
37 | langchain-community = "^0.3.1"
38 | copilotkit = "0.1.39"
39 | uvicorn = "^0.31.0"
40 | python-dotenv = "^1.0.1"
41 | langchain-core = "^0.3.25"
42 | langgraph-cli = {extras = ["inmem"], version = "^0.1.64"}
43 | langchain-mcp-adapters = "^0.0.3"
44 | fastmcp = "^0.4.1"
45 | langgraph = "^0.3.5"
46 | 
47 | [tool.poetry.scripts]
48 | demo = "sample_agent.demo:main"
49 | 


--------------------------------------------------------------------------------
/agent/sample_agent/__init__.py:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CopilotKit/open-mcp-client/c8ea97b205ac860f08a4017dc36acba4d255b126/agent/sample_agent/__init__.py


--------------------------------------------------------------------------------
/agent/sample_agent/agent.py:
--------------------------------------------------------------------------------
 1 | """
 2 | This is the main entry point for the agent.
 3 | It defines the workflow graph, state, tools, nodes and edges.
 4 | """
 5 | 
 6 | from typing_extensions import Literal, TypedDict, Dict, List, Any, Union, Optional
 7 | from langchain_openai import ChatOpenAI
 8 | from langchain_core.runnables import RunnableConfig
 9 | from langgraph.graph import StateGraph, END
10 | from langgraph.checkpoint.memory import MemorySaver
11 | from langgraph.types import Command
12 | from copilotkit import CopilotKitState
13 | from langchain_mcp_adapters.client import MultiServerMCPClient
14 | from langgraph.prebuilt import create_react_agent
15 | from copilotkit.langgraph import (copilotkit_exit)
16 | import os
17 | 
18 | # Define the connection type structures
19 | class StdioConnection(TypedDict):
20 |     command: str
21 |     args: List[str]
22 |     transport: Literal["stdio"]
23 | 
24 | class SSEConnection(TypedDict):
25 |     url: str
26 |     transport: Literal["sse"]
27 | 
28 | # Type for MCP configuration
29 | MCPConfig = Dict[str, Union[StdioConnection, SSEConnection]]
30 | 
31 | class AgentState(CopilotKitState):
32 |     """
33 |     Here we define the state of the agent
34 | 
35 |     In this instance, we're inheriting from CopilotKitState, which will bring in
36 |     the CopilotKitState fields. We're also adding a custom field, `mcp_config`,
37 |     which will be used to configure MCP services for the agent.
38 |     """
39 |     # Define mcp_config as an optional field without skipping validation
40 |     mcp_config: Optional[MCPConfig]
41 | 
42 | # Default MCP configuration to use when no configuration is provided in the state
43 | # Uses relative paths that will work within the project structure
44 | DEFAULT_MCP_CONFIG: MCPConfig = {
45 |     "math": {
46 |         "command": "python",
47 |         # Use a relative path that will be resolved based on the current working directory
48 |         "args": [os.path.join(os.path.dirname(__file__), "..", "math_server.py")],
49 |         "transport": "stdio",
50 |     },
51 | }
52 | 
53 | async def chat_node(state: AgentState, config: RunnableConfig) -> Command[Literal["__end__"]]:
54 |     """
55 |     This is a simplified agent that uses the ReAct agent as a subgraph.
56 |     It handles both chat responses and tool execution in one node.
57 |     """
58 |     # Get MCP configuration from state, or use the default config if not provided
59 |     mcp_config = state.get("mcp_config", DEFAULT_MCP_CONFIG)
60 | 
61 |     print(f"mcp_config: {mcp_config}, default: {DEFAULT_MCP_CONFIG}")
62 |     
63 |     # Set up the MCP client and tools using the configuration from state
64 |     async with MultiServerMCPClient(mcp_config) as mcp_client:
65 |         # Get the tools
66 |         mcp_tools = mcp_client.get_tools()
67 |         
68 |         # Create the react agent
69 |         model = ChatOpenAI(model="gpt-4o")
70 |         react_agent = create_react_agent(model, mcp_tools)
71 |         
72 |         # Prepare messages for the react agent
73 |         agent_input = {
74 |             "messages": state["messages"]
75 |         }
76 |         
77 |         # Run the react agent subgraph with our input
78 |         agent_response = await react_agent.ainvoke(agent_input)
79 |         
80 |         # Update the state with the new messages
81 |         updated_messages = state["messages"] + agent_response.get("messages", []) 
82 |         await copilotkit_exit(config)
83 |         # End the graph with the updated messages
84 |         return Command(
85 |             goto=END,
86 |             update={"messages": updated_messages},
87 |         )
88 | 
89 | # Define the workflow graph with only a chat node
90 | workflow = StateGraph(AgentState)
91 | workflow.add_node("chat_node", chat_node)
92 | workflow.set_entry_point("chat_node")
93 | 
94 | # Compile the workflow graph
95 | graph = workflow.compile(MemorySaver())


--------------------------------------------------------------------------------
/agent/uv.lock:
--------------------------------------------------------------------------------
1 | version = 1
2 | requires-python = ">=3.13"
3 | 
4 | [[package]]
5 | name = "sample-agent"
6 | version = "0.0.1"
7 | source = { editable = "." }
8 | 


--------------------------------------------------------------------------------
/app/api/copilotkit/route.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 |   CopilotRuntime,
 3 |   copilotRuntimeNextJSAppRouterEndpoint,
 4 |   langGraphPlatformEndpoint,
 5 |   LangChainAdapter
 6 | } from "@copilotkit/runtime";
 7 | import { NextRequest } from "next/server";
 8 | import { ChatOpenAI } from "@langchain/openai";
 9 | 
10 | // You can use any service adapter here for multi-agent support.
11 | const serviceAdapter = new LangChainAdapter({
12 |   chainFn: async ({ messages, tools }) => {
13 |     return model.bindTools(tools, { strict: true }).stream(messages);
14 |   },
15 | })
16 | 
17 | const model = new ChatOpenAI({
18 |   modelName: "gpt-4o-mini",
19 |   temperature: 0,
20 |   apiKey: process.env["OPENAI_API_KEY"],
21 | });
22 | 
23 | const runtime = new CopilotRuntime({
24 |   remoteEndpoints: [
25 |     langGraphPlatformEndpoint({
26 |       deploymentUrl: `${process.env.AGENT_DEPLOYMENT_URL || 'http://localhost:8123'}`,
27 |       langsmithApiKey: process.env.LANGSMITH_API_KEY,
28 |       agents: [
29 |         {
30 |           name: 'sample_agent', 
31 |           description: 'A helpful LLM agent.',
32 |         }
33 |       ]
34 |     }),
35 |   ],
36 | });
37 | 
38 | export const POST = async (req: NextRequest) => {
39 |   const { handleRequest } = copilotRuntimeNextJSAppRouterEndpoint({
40 |     runtime,
41 |     serviceAdapter,
42 |     endpoint: "/api/copilotkit",
43 |   });
44 | 
45 |   return handleRequest(req);
46 | };


--------------------------------------------------------------------------------
/app/components/CopilotActionHandler.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { useCopilotAction } from "@copilotkit/react-core";
 4 | import { ToolCallRenderer } from "../components/ToolCallRenderer";
 5 | 
 6 | /**
 7 |  * Client component that handles Copilot actions
 8 |  * This component has no UI of its own, it just sets up the action handler
 9 |  */
10 | export const CopilotActionHandler: React.FC = () => {
11 | 
12 |   // add a custom action renderer for all actions
13 |   useCopilotAction({
14 |     name: "*",
15 |     render: ({ name, args, status, result }: any) => {
16 |       return (
17 |         <ToolCallRenderer
18 |           name={name}
19 |           args={args}
20 |           status={status || "unknown"}
21 |           result={result}
22 |         />
23 |       );
24 |     },
25 |   });
26 |   
27 |   // Return null as this component doesn't render anything visible
28 |   return null;
29 | }; 


--------------------------------------------------------------------------------
/app/components/ExampleConfigs.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import {
  4 |   Calculator,
  5 |   Search,
  6 |   Database,
  7 |   ArrowRight,
  8 | } from "lucide-react";
  9 | import { JSX } from "react";
 10 | 
 11 | type ExampleConfig = {
 12 |   name: string;
 13 |   description: string;
 14 |   config: Record<string, any>;
 15 |   icon: JSX.Element;
 16 | };
 17 | 
 18 | const EXAMPLE_CONFIGS: ExampleConfig[] = [
 19 |   {
 20 |     name: "Math Service",
 21 |     description:
 22 |       "A simple Python server that can perform mathematical operations",
 23 |     icon: <Calculator className="h-4 w-4 text-gray-600" />,
 24 |     config: {
 25 |       math: {
 26 |         command: "python",
 27 |         args: ["agent/math_server.py"],
 28 |         transport: "stdio",
 29 |       },
 30 |     },
 31 |   },
 32 |   {
 33 |     name: "Web Search",
 34 |     description: "Connect to a search service via SSE",
 35 |     icon: <Search className="h-4 w-4 text-gray-600" />,
 36 |     config: {
 37 |       search: {
 38 |         url: "http://localhost:8000/search/events",
 39 |         transport: "sse",
 40 |       },
 41 |     },
 42 |   },
 43 |   {
 44 |     name: "Full Stack",
 45 |     description:
 46 |       "A combination of multiple services for comprehensive functionality",
 47 |     icon: <Database className="h-4 w-4 text-gray-600" />,
 48 |     config: {
 49 |       math: {
 50 |         command: "python",
 51 |         args: ["agent/math_server.py"],
 52 |         transport: "stdio",
 53 |       },
 54 |       search: {
 55 |         url: "http://localhost:8000/search/events",
 56 |         transport: "sse",
 57 |       },
 58 |       database: {
 59 |         command: "node",
 60 |         args: ["scripts/db_server.js"],
 61 |         transport: "stdio",
 62 |       },
 63 |     },
 64 |   },
 65 | ];
 66 | 
 67 | interface ExampleConfigsProps {
 68 |   onSelectConfig: (config: Record<string, any>) => void;
 69 | }
 70 | 
 71 | export function ExampleConfigs({ onSelectConfig }: ExampleConfigsProps) {
 72 |   return (
 73 |     <div className="bg-white border rounded-md p-4">
 74 |       <div className="grid grid-cols-1 gap-3">
 75 |         {EXAMPLE_CONFIGS.map((example) => (
 76 |           <div
 77 |             key={example.name}
 78 |             className="border rounded-md p-3 hover:border-gray-500 hover:bg-gray-50 transition-colors duration-200"
 79 |           >
 80 |             <div className="flex justify-between items-start">
 81 |               <div className="flex">
 82 |                 <div className="mt-1 mr-2">{example.icon}</div>
 83 |                 <div>
 84 |                   <h4 className="font-medium">{example.name}</h4>
 85 |                   <p className="text-sm text-gray-600">{example.description}</p>
 86 |                 </div>
 87 |               </div>
 88 |               <button
 89 |                 onClick={() => onSelectConfig(example.config)}
 90 |                 className="px-2 py-1 bg-gray-800 text-white text-xs rounded hover:bg-gray-700 flex items-center"
 91 |               >
 92 |                 Use This
 93 |                 <ArrowRight className="ml-1 h-3 w-3" />
 94 |               </button>
 95 |             </div>
 96 |             <div className="mt-2">
 97 |               <pre className="text-xs bg-gray-50 p-2 rounded overflow-auto max-h-24">
 98 |                 {JSON.stringify(example.config, null, 2)}
 99 |               </pre>
100 |             </div>
101 |           </div>
102 |         ))}
103 |       </div>
104 |     </div>
105 |   );
106 | }
107 | 


--------------------------------------------------------------------------------
/app/components/MCPConfigForm.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { useState, useEffect } from "react";
  4 | import { useCoAgent } from "@copilotkit/react-core";
  5 | import { ExampleConfigs } from "./ExampleConfigs";
  6 | import { useLocalStorage } from "../hooks/useLocalStorage";
  7 | 
  8 | type ConnectionType = "stdio" | "sse";
  9 | 
 10 | interface StdioConfig {
 11 |   command: string;
 12 |   args: string[];
 13 |   transport: "stdio";
 14 | }
 15 | 
 16 | interface SSEConfig {
 17 |   url: string;
 18 |   transport: "sse";
 19 | }
 20 | 
 21 | type ServerConfig = StdioConfig | SSEConfig;
 22 | 
 23 | // Define a generic type for our state
 24 | interface AgentState {
 25 |   mcp_config: Record<string, ServerConfig>;
 26 | }
 27 | 
 28 | // Local storage key for saving agent state
 29 | const STORAGE_KEY = "mcp-agent-state";
 30 | 
 31 | const ExternalLink = () => (
 32 |   <svg
 33 |     xmlns="http://www.w3.org/2000/svg"
 34 |     className="w-3 h-3 ml-1"
 35 |     fill="none"
 36 |     viewBox="0 0 24 24"
 37 |     stroke="currentColor"
 38 |   >
 39 |     <path
 40 |       strokeLinecap="round"
 41 |       strokeLinejoin="round"
 42 |       strokeWidth={2}
 43 |       d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
 44 |     />
 45 |   </svg>
 46 | );
 47 | 
 48 | export function MCPConfigForm({ showSpreadsheet, setShowSpreadsheet }: { showSpreadsheet: boolean, setShowSpreadsheet: (value: boolean) => void }) {
 49 |   // Use our localStorage hook for persistent storage
 50 |   const [savedConfigs, setSavedConfigs] = useLocalStorage<
 51 |     Record<string, ServerConfig>
 52 |   >(STORAGE_KEY, {});
 53 | 
 54 |   // Initialize agent state with the data from localStorage
 55 |   const { state: agentState, setState: setAgentState } = useCoAgent<AgentState>(
 56 |     {
 57 |       name: "sample_agent",
 58 |       initialState: {
 59 |         mcp_config: savedConfigs,
 60 |       },
 61 |     }
 62 |   );
 63 | 
 64 |   // Simple getter for configs
 65 |   const configs = agentState?.mcp_config || {};
 66 | 
 67 |   // Simple setter wrapper for configs
 68 |   const setConfigs = (newConfigs: Record<string, ServerConfig>) => {
 69 |     setAgentState({ ...agentState, mcp_config: newConfigs });
 70 |     setSavedConfigs(newConfigs);
 71 |   };
 72 | 
 73 |   const [serverName, setServerName] = useState("");
 74 |   const [connectionType, setConnectionType] = useState<ConnectionType>("stdio");
 75 |   const [command, setCommand] = useState("");
 76 |   const [args, setArgs] = useState("");
 77 |   const [url, setUrl] = useState("");
 78 |   const [isLoading, setIsLoading] = useState(true);
 79 |   const [showAddServerForm, setShowAddServerForm] = useState(false);
 80 |   const [showExampleConfigs, setShowExampleConfigs] = useState(false);
 81 | 
 82 |   // Calculate server statistics
 83 |   const totalServers = Object.keys(configs).length;
 84 |   const stdioServers = Object.values(configs).filter(
 85 |     (config) => config.transport === "stdio"
 86 |   ).length;
 87 |   const sseServers = Object.values(configs).filter(
 88 |     (config) => config.transport === "sse"
 89 |   ).length;
 90 | 
 91 |   // Set loading to false when state is loaded
 92 |   useEffect(() => {
 93 |     if (agentState) {
 94 |       setIsLoading(false);
 95 |     }
 96 |   }, [agentState]);
 97 | 
 98 |   const handleExampleConfig = (exampleConfig: Record<string, ServerConfig>) => {
 99 |     // Merge the example with existing configs or replace them based on user preference
100 |     if (Object.keys(configs).length > 0) {
101 |       const shouldReplace = window.confirm(
102 |         "Do you want to replace your current configuration with this example? Click 'OK' to replace, or 'Cancel' to merge."
103 |       );
104 | 
105 |       if (shouldReplace) {
106 |         setConfigs(exampleConfig);
107 |       } else {
108 |         setConfigs({ ...configs, ...exampleConfig });
109 |       }
110 |     } else {
111 |       setConfigs(exampleConfig);
112 |     }
113 | 
114 |     // Close the examples panel after selection
115 |     setShowExampleConfigs(false);
116 |   };
117 | 
118 |   const addConfig = () => {
119 |     if (!serverName) return;
120 | 
121 |     const newConfig =
122 |       connectionType === "stdio"
123 |         ? {
124 |             command,
125 |             args: args.split(" ").filter((arg) => arg.trim() !== ""),
126 |             transport: "stdio" as const,
127 |           }
128 |         : {
129 |             url,
130 |             transport: "sse" as const,
131 |           };
132 | 
133 |     setConfigs({
134 |       ...configs,
135 |       [serverName]: newConfig,
136 |     });
137 | 
138 |     // Reset form
139 |     setServerName("");
140 |     setCommand("");
141 |     setArgs("");
142 |     setUrl("");
143 |     setShowAddServerForm(false);
144 |   };
145 | 
146 |   const removeConfig = (name: string) => {
147 |     const newConfigs = { ...configs };
148 |     delete newConfigs[name];
149 |     setConfigs(newConfigs);
150 |   };
151 | 
152 |   if (isLoading) {
153 |     return <div className="p-4">Loading configuration...</div>;
154 |   }
155 | 
156 |   return (
157 |     <div className="max-w-5xl mx-auto space-y-6">
158 |       {/* Header */}
159 |       <div className="mb-6">
160 |         <div className="flex flex-col sm:flex-row sm:items-center gap-4 mb-1">
161 |           <div className="flex items-center">
162 |             <svg
163 |               xmlns="http://www.w3.org/2000/svg"
164 |               className="h-6 w-6 mr-2 text-gray-700"
165 |               fill="none"
166 |               viewBox="0 0 24 24"
167 |               stroke="currentColor"
168 |             >
169 |               <path
170 |                 strokeLinecap="round"
171 |                 strokeLinejoin="round"
172 |                 strokeWidth={2}
173 |                 d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01"
174 |               />
175 |             </svg>
176 |             <h1 className="text-3xl sm:text-5xl font-semibold">
177 |               Open MCP Client
178 |             </h1>
179 |           </div>
180 |         </div>
181 |         <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center mt-4 gap-4">
182 |           <div className="flex flex-col sm:flex-row sm:items-center gap-3">
183 |             <p className="text-sm text-gray-600">
184 |               Manage and configure your MCP servers
185 |             </p>
186 |             <div className="flex items-center gap-4">
187 |               <a
188 |                 href="https://github.com/CopilotKit/mcp-client-langgraph"
189 |                 target="_blank"
190 |                 rel="noopener noreferrer"
191 |                 className="text-sm text-blue-600 hover:text-blue-800 flex items-center"
192 |               >
193 |                 <span className="mr-1">GitHub Repo</span>
194 |                 <svg
195 |                   xmlns="http://www.w3.org/2000/svg"
196 |                   className="h-3.5 w-3.5"
197 |                   fill="none"
198 |                   viewBox="0 0 24 24"
199 |                   stroke="currentColor"
200 |                 >
201 |                   <path
202 |                     strokeLinecap="round"
203 |                     strokeLinejoin="round"
204 |                     strokeWidth={2}
205 |                     d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
206 |                   />
207 |                 </svg>
208 |               </a>
209 |               <a
210 |                 href="https://docs.copilotkit.ai/"
211 |                 target="_blank"
212 |                 rel="noopener noreferrer"
213 |                 className="text-sm text-blue-600 hover:text-blue-800 flex items-center"
214 |               >
215 |                 <span className="mr-1">Documentation</span>
216 |                 <svg
217 |                   xmlns="http://www.w3.org/2000/svg"
218 |                   className="h-3.5 w-3.5"
219 |                   fill="none"
220 |                   viewBox="0 0 24 24"
221 |                   stroke="currentColor"
222 |                 >
223 |                   <path
224 |                     strokeLinecap="round"
225 |                     strokeLinejoin="round"
226 |                     strokeWidth={2}
227 |                     d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
228 |                   />
229 |                 </svg>
230 |               </a>
231 |             </div>
232 |           </div>
233 |           <div className="flex gap-2">
234 |             <button
235 |               onClick={() => setShowSpreadsheet(!showSpreadsheet)}
236 |               className="w-full sm:w-auto px-3 py-1.5 bg-gray-800 text-white rounded-md text-sm font-medium hover:bg-gray-700 flex items-center gap-1 justify-center"
237 |             >
238 |               {showSpreadsheet ? 'Hide Spreadsheet' : 'Show Spreadsheet'}
239 |             </button>
240 |             <button
241 |               onClick={() => setShowAddServerForm(true)}
242 |               className="w-full sm:w-auto px-3 py-1.5 bg-gray-800 text-white rounded-md text-sm font-medium hover:bg-gray-700 flex items-center gap-1 justify-center"
243 |             >
244 |               <svg
245 |                 xmlns="http://www.w3.org/2000/svg"
246 |                 className="h-4 w-4"
247 |                 fill="none"
248 |                 viewBox="0 0 24 24"
249 |                 stroke="currentColor"
250 |               >
251 |                 <path
252 |                   strokeLinecap="round"
253 |                   strokeLinejoin="round"
254 |                   strokeWidth={2}
255 |                   d="M12 4v16m8-8H4"
256 |                 />
257 |               </svg>
258 |               Add Server
259 |             </button>
260 |           </div>
261 |         </div>
262 |       </div>
263 | 
264 |       {/* Server Statistics */}
265 |       <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-8">
266 |         <div className="bg-white border rounded-md p-4">
267 |           <div className="text-sm text-gray-500">Total Servers</div>
268 |           <div className="text-3xl font-bold">{totalServers}</div>
269 |         </div>
270 |         <div className="bg-white border rounded-md p-4">
271 |           <div className="text-sm text-gray-500">Stdio Servers</div>
272 |           <div className="text-3xl font-bold">{stdioServers}</div>
273 |         </div>
274 |         <div className="bg-white border rounded-md p-4">
275 |           <div className="text-sm text-gray-500">SSE Servers</div>
276 |           <div className="text-3xl font-bold">{sseServers}</div>
277 |         </div>
278 |       </div>
279 | 
280 |       {/* Example Configs Button */}
281 |       <div className="mb-4">
282 |         <button
283 |           onClick={() => setShowExampleConfigs(!showExampleConfigs)}
284 |           className="flex items-center text-sm font-medium text-gray-700 hover:text-gray-900"
285 |         >
286 |           <span>Example Configurations</span>
287 |           <svg
288 |             xmlns="http://www.w3.org/2000/svg"
289 |             className={`w-4 h-4 ml-1 transition-transform ${
290 |               showExampleConfigs ? "rotate-180" : ""
291 |             }`}
292 |             fill="none"
293 |             viewBox="0 0 24 24"
294 |             stroke="currentColor"
295 |           >
296 |             <path
297 |               strokeLinecap="round"
298 |               strokeLinejoin="round"
299 |               strokeWidth={2}
300 |               d="M19 9l-7 7-7-7"
301 |             />
302 |           </svg>
303 |         </button>
304 | 
305 |         {showExampleConfigs && (
306 |           <div className="mt-2">
307 |             <ExampleConfigs onSelectConfig={handleExampleConfig} />
308 |           </div>
309 |         )}
310 |       </div>
311 | 
312 |       {/* Server List */}
313 |       <div className="bg-white border rounded-md p-6">
314 |         <h2 className="text-lg font-semibold mb-4">Server List</h2>
315 | 
316 |         {totalServers === 0 ? (
317 |           <div className="text-gray-500 text-center py-10">
318 |             No servers configured. Click &quot;Add Server&quot; to get started.
319 |           </div>
320 |         ) : (
321 |           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
322 |             {Object.entries(configs).map(([name, config]) => (
323 |               <div
324 |                 key={name}
325 |                 className="border rounded-md overflow-hidden bg-white shadow-sm"
326 |               >
327 |                 <div className="p-4">
328 |                   <div className="flex justify-between items-start">
329 |                     <div>
330 |                       <h3 className="font-semibold">{name}</h3>
331 |                       <div className="inline-flex items-center px-2 py-0.5 bg-gray-100 text-xs rounded mt-1">
332 |                         {config.transport === "stdio" ? (
333 |                           <svg
334 |                             xmlns="http://www.w3.org/2000/svg"
335 |                             className="w-3 h-3 mr-1"
336 |                             fill="none"
337 |                             viewBox="0 0 24 24"
338 |                             stroke="currentColor"
339 |                           >
340 |                             <path
341 |                               strokeLinecap="round"
342 |                               strokeLinejoin="round"
343 |                               strokeWidth={2}
344 |                               d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
345 |                             />
346 |                           </svg>
347 |                         ) : (
348 |                           <svg
349 |                             xmlns="http://www.w3.org/2000/svg"
350 |                             className="w-3 h-3 mr-1"
351 |                             fill="none"
352 |                             viewBox="0 0 24 24"
353 |                             stroke="currentColor"
354 |                           >
355 |                             <path
356 |                               strokeLinecap="round"
357 |                               strokeLinejoin="round"
358 |                               strokeWidth={2}
359 |                               d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"
360 |                             />
361 |                           </svg>
362 |                         )}
363 |                         {config.transport}
364 |                       </div>
365 |                     </div>
366 |                     <button
367 |                       onClick={() => removeConfig(name)}
368 |                       className="text-gray-400 hover:text-red-500"
369 |                     >
370 |                       <svg
371 |                         xmlns="http://www.w3.org/2000/svg"
372 |                         className="w-4 h-4"
373 |                         fill="none"
374 |                         viewBox="0 0 24 24"
375 |                         stroke="currentColor"
376 |                       >
377 |                         <path
378 |                           strokeLinecap="round"
379 |                           strokeLinejoin="round"
380 |                           strokeWidth={2}
381 |                           d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
382 |                         />
383 |                       </svg>
384 |                     </button>
385 |                   </div>
386 |                   <div className="mt-3 text-sm text-gray-600">
387 |                     {config.transport === "stdio" ? (
388 |                       <>
389 |                         <p>Command: {config.command}</p>
390 |                         <p className="truncate">
391 |                           Args: {config.args.join(" ")}
392 |                         </p>
393 |                       </>
394 |                     ) : (
395 |                       <p className="truncate">URL: {config.url}</p>
396 |                     )}
397 |                   </div>
398 |                 </div>
399 |               </div>
400 |             ))}
401 |           </div>
402 |         )}
403 | 
404 |         {/* Composio & mcp.run reference */}
405 |         <div className="mt-10 pt-4 border-t text-center text-sm text-gray-500">
406 |           More MCP servers available on the web, e.g.{" "}
407 |           <a
408 |             href="https://mcp.composio.dev/"
409 |             target="_blank"
410 |             rel="noopener noreferrer"
411 |             className="text-gray-700 hover:text-gray-900 inline-flex items-center mr-2"
412 |           >
413 |             mcp.composio.dev
414 |             <ExternalLink />
415 |           </a>
416 |           and{" "}
417 |           <a
418 |             href="https://www.mcp.run/"
419 |             target="_blank"
420 |             rel="noopener noreferrer"
421 |             className="text-gray-700 hover:text-gray-900 inline-flex items-center"
422 |           >
423 |             mcp.run
424 |             <ExternalLink />
425 |           </a>
426 |         </div>
427 |       </div>
428 | 
429 |       {/* Add Server Modal */}
430 |       {showAddServerForm && (
431 |         <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
432 |           <div className="bg-white rounded-lg p-6 w-full max-w-md">
433 |             <div className="flex justify-between items-center mb-4">
434 |               <h2 className="text-lg font-semibold flex items-center">
435 |                 <svg
436 |                   xmlns="http://www.w3.org/2000/svg"
437 |                   className="w-5 h-5 mr-2"
438 |                   fill="none"
439 |                   viewBox="0 0 24 24"
440 |                   stroke="currentColor"
441 |                 >
442 |                   <path
443 |                     strokeLinecap="round"
444 |                     strokeLinejoin="round"
445 |                     strokeWidth={2}
446 |                     d="M12 4v16m8-8H4"
447 |                   />
448 |                 </svg>
449 |                 Add New Server
450 |               </h2>
451 |               <button
452 |                 onClick={() => setShowAddServerForm(false)}
453 |                 className="text-gray-500 hover:text-gray-700"
454 |               >
455 |                 <svg
456 |                   xmlns="http://www.w3.org/2000/svg"
457 |                   className="w-5 h-5"
458 |                   fill="none"
459 |                   viewBox="0 0 24 24"
460 |                   stroke="currentColor"
461 |                 >
462 |                   <path
463 |                     strokeLinecap="round"
464 |                     strokeLinejoin="round"
465 |                     strokeWidth={2}
466 |                     d="M6 18L18 6M6 6l12 12"
467 |                   />
468 |                 </svg>
469 |               </button>
470 |             </div>
471 | 
472 |             <div className="space-y-4">
473 |               <div>
474 |                 <label className="block text-sm font-medium mb-1">
475 |                   Server Name
476 |                 </label>
477 |                 <input
478 |                   type="text"
479 |                   value={serverName}
480 |                   onChange={(e) => setServerName(e.target.value)}
481 |                   className="w-full px-3 py-2 border rounded-md text-sm"
482 |                   placeholder="e.g., api-service, data-processor"
483 |                 />
484 |               </div>
485 | 
486 |               <div>
487 |                 <label className="block text-sm font-medium mb-1">
488 |                   Connection Type
489 |                 </label>
490 |                 <div className="grid grid-cols-2 gap-2">
491 |                   <button
492 |                     type="button"
493 |                     onClick={() => setConnectionType("stdio")}
494 |                     className={`px-3 py-2 border rounded-md text-center flex items-center justify-center ${
495 |                       connectionType === "stdio"
496 |                         ? "bg-gray-200 border-gray-400 text-gray-800"
497 |                         : "bg-white text-gray-700"
498 |                     }`}
499 |                   >
500 |                     <svg
501 |                       xmlns="http://www.w3.org/2000/svg"
502 |                       className="w-4 h-4 mr-1"
503 |                       fill="none"
504 |                       viewBox="0 0 24 24"
505 |                       stroke="currentColor"
506 |                     >
507 |                       <path
508 |                         strokeLinecap="round"
509 |                         strokeLinejoin="round"
510 |                         strokeWidth={2}
511 |                         d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
512 |                       />
513 |                     </svg>
514 |                     Standard IO
515 |                   </button>
516 |                   <button
517 |                     type="button"
518 |                     onClick={() => setConnectionType("sse")}
519 |                     className={`px-3 py-2 border rounded-md text-center flex items-center justify-center ${
520 |                       connectionType === "sse"
521 |                         ? "bg-gray-200 border-gray-400 text-gray-800"
522 |                         : "bg-white text-gray-700"
523 |                     }`}
524 |                   >
525 |                     <svg
526 |                       xmlns="http://www.w3.org/2000/svg"
527 |                       className="w-4 h-4 mr-1"
528 |                       fill="none"
529 |                       viewBox="0 0 24 24"
530 |                       stroke="currentColor"
531 |                     >
532 |                       <path
533 |                         strokeLinecap="round"
534 |                         strokeLinejoin="round"
535 |                         strokeWidth={2}
536 |                         d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"
537 |                       />
538 |                     </svg>
539 |                     SSE
540 |                   </button>
541 |                 </div>
542 |               </div>
543 | 
544 |               {connectionType === "stdio" ? (
545 |                 <>
546 |                   <div>
547 |                     <label className="block text-sm font-medium mb-1">
548 |                       Command
549 |                     </label>
550 |                     <input
551 |                       type="text"
552 |                       value={command}
553 |                       onChange={(e) => setCommand(e.target.value)}
554 |                       className="w-full px-3 py-2 border rounded-md text-sm"
555 |                       placeholder="e.g., python, node"
556 |                     />
557 |                   </div>
558 |                   <div>
559 |                     <label className="block text-sm font-medium mb-1">
560 |                       Arguments
561 |                     </label>
562 |                     <input
563 |                       type="text"
564 |                       value={args}
565 |                       onChange={(e) => setArgs(e.target.value)}
566 |                       className="w-full px-3 py-2 border rounded-md text-sm"
567 |                       placeholder="e.g., path/to/script.py"
568 |                     />
569 |                   </div>
570 |                 </>
571 |               ) : (
572 |                 <div>
573 |                   <label className="block text-sm font-medium mb-1">URL</label>
574 |                   <input
575 |                     type="text"
576 |                     value={url}
577 |                     onChange={(e) => setUrl(e.target.value)}
578 |                     className="w-full px-3 py-2 border rounded-md text-sm"
579 |                     placeholder="e.g., http://localhost:8000/events"
580 |                   />
581 |                 </div>
582 |               )}
583 | 
584 |               <div className="flex justify-end space-x-2 pt-2">
585 |                 <button
586 |                   onClick={() => setShowAddServerForm(false)}
587 |                   className="px-4 py-2 border text-gray-700 rounded-md hover:bg-gray-50 text-sm font-medium flex items-center"
588 |                 >
589 |                   <svg
590 |                     xmlns="http://www.w3.org/2000/svg"
591 |                     className="w-4 h-4 mr-1"
592 |                     fill="none"
593 |                     viewBox="0 0 24 24"
594 |                     stroke="currentColor"
595 |                   >
596 |                     <path
597 |                       strokeLinecap="round"
598 |                       strokeLinejoin="round"
599 |                       strokeWidth={2}
600 |                       d="M6 18L18 6M6 6l12 12"
601 |                     />
602 |                   </svg>
603 |                   Cancel
604 |                 </button>
605 |                 <button
606 |                   onClick={addConfig}
607 |                   className="px-4 py-2 bg-gray-800 text-white rounded-md hover:bg-gray-700 text-sm font-medium flex items-center"
608 |                 >
609 |                   <svg
610 |                     xmlns="http://www.w3.org/2000/svg"
611 |                     className="w-4 h-4 mr-1"
612 |                     fill="none"
613 |                     viewBox="0 0 24 24"
614 |                     stroke="currentColor"
615 |                   >
616 |                     <path
617 |                       strokeLinecap="round"
618 |                       strokeLinejoin="round"
619 |                       strokeWidth={2}
620 |                       d="M12 4v16m8-8H4"
621 |                     />
622 |                   </svg>
623 |                   Add Server
624 |                 </button>
625 |               </div>
626 |             </div>
627 |           </div>
628 |         </div>
629 |       )}
630 |     </div>
631 |   );
632 | }
633 | 


--------------------------------------------------------------------------------
/app/components/PreviewSpreadsheetChanges.tsx:
--------------------------------------------------------------------------------
 1 | import { CheckCircleIcon } from '@heroicons/react/20/solid'
 2 | import { SpreadsheetRow } from '../types';
 3 | import { useState } from 'react';
 4 | import Spreadsheet from 'react-spreadsheet';
 5 | 
 6 | 
 7 | export interface PreviewSpreadsheetChanges {
 8 |   preCommitTitle: string;
 9 |   postCommitTitle: string;
10 |   newRows: SpreadsheetRow[];
11 |   commit: (rows: SpreadsheetRow[]) => void;
12 | }
13 | 
14 | export function PreviewSpreadsheetChanges(props: PreviewSpreadsheetChanges) {
15 |   const [changesCommitted, setChangesCommitted] = useState(false);
16 | 
17 |   const commitChangesButton = () => {
18 |     return (
19 |       <button
20 |         className="inline-flex items-center gap-x-2 rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
21 |         onClick={() => {
22 |           props.commit(props.newRows);
23 |           setChangesCommitted(true);
24 |         }}
25 |       >
26 |         {props.preCommitTitle} 
27 |       </button>
28 |     );
29 |   }
30 | 
31 |   const changesCommittedButtonPlaceholder = () => {
32 |     return (
33 |       <button
34 |         className=" inline-flex items-center gap-x-2 rounded-md bg-gray-100 px-3.5 py-2.5 text-sm font-semibold text-green-600 shadow-sm cursor-not-allowed"
35 |         disabled
36 |       >
37 |         {props.postCommitTitle} 
38 |         <CheckCircleIcon className="-mr-0.5 h-5 w-5" aria-hidden="true" />
39 |       </button>
40 |     );
41 |   }
42 | 
43 |   return (
44 |     <div className="flex flex-col">
45 |       <Spreadsheet
46 |         data={props.newRows}
47 |       />
48 | 
49 |       <div className="mt-5">
50 |         {changesCommitted ? changesCommittedButtonPlaceholder() :  commitChangesButton() }
51 |       </div>
52 | 
53 |     </div>
54 |   );
55 | }
56 | 


--------------------------------------------------------------------------------
/app/components/SingleSpreadsheet.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | import {
  3 |   useCopilotAction,
  4 |   useCopilotReadable,
  5 | } from "@copilotkit/react-core";
  6 | import React from "react";
  7 | import Spreadsheet from "react-spreadsheet";
  8 | import { canonicalSpreadsheetData } from "../utils/canonicalSpreadsheetData";
  9 | import { SpreadsheetData, SpreadsheetRow } from "../types";
 10 | import { PreviewSpreadsheetChanges } from "./PreviewSpreadsheetChanges";
 11 | 
 12 | interface MainAreaProps {
 13 |   spreadsheet: SpreadsheetData;
 14 |   setSpreadsheet: (spreadsheet: SpreadsheetData) => void;
 15 | }
 16 | 
 17 | const SingleSpreadsheet = ({ spreadsheet, setSpreadsheet }: MainAreaProps) => {
 18 |   useCopilotReadable({
 19 |     description: "The current spreadsheet",
 20 |     value: spreadsheet,
 21 |   })
 22 | 
 23 |   useCopilotAction({
 24 |     name: "suggestSpreadsheetOverride",
 25 |     description: "Suggest an override of the current spreadsheet",
 26 |     parameters: [
 27 |       {
 28 |         name: "rows",
 29 |         type: "object[]",
 30 |         description: "The rows of the spreadsheet",
 31 |         attributes: [
 32 |           {
 33 |             name: "cells",
 34 |             type: "object[]",
 35 |             description: "The cells of the row",
 36 |             attributes: [
 37 |               {
 38 |                 name: "value",
 39 |                 type: "string",
 40 |                 description: "The value of the cell",
 41 |               },
 42 |             ],
 43 |           },
 44 |         ],
 45 |       },
 46 |       {
 47 |         name: "title",
 48 |         type: "string",
 49 |         description: "The title of the spreadsheet",
 50 |         required: false,
 51 |       },
 52 |     ],
 53 |     render: (props) => {
 54 |       const { rows } = props.args
 55 |       const newRows = canonicalSpreadsheetData(rows);
 56 | 
 57 |       return (
 58 |         <PreviewSpreadsheetChanges 
 59 |           preCommitTitle="Replace contents"
 60 |           postCommitTitle="Changes committed"
 61 |           newRows={newRows}
 62 |           commit={(rows) => {
 63 |             const updatedSpreadsheet: SpreadsheetData = {
 64 |               title: spreadsheet.title,
 65 |               rows: rows,
 66 |             };
 67 |             setSpreadsheet(updatedSpreadsheet);
 68 |           }}
 69 |         />
 70 |       )
 71 |     },
 72 |     handler: ({ rows, title }) => {
 73 |       // Do nothing.
 74 |       // The preview component will optionally handle committing the changes.
 75 |       console.log(rows, title)
 76 |     },
 77 |   });
 78 | 
 79 |   useCopilotAction({
 80 |     name: "appendToSpreadsheet",
 81 |     description: "Append rows to the current spreadsheet",
 82 |     parameters: [
 83 |       {
 84 |         name: "rows",
 85 |         type: "object[]",
 86 |         description: "The new rows of the spreadsheet",
 87 |         attributes: [
 88 |           {
 89 |             name: "cells",
 90 |             type: "object[]",
 91 |             description: "The cells of the row",
 92 |             attributes: [
 93 |               {
 94 |                 name: "value",
 95 |                 type: "string",
 96 |                 description: "The value of the cell",
 97 |               },
 98 |             ],
 99 |           },
100 |         ],
101 |       },
102 |     ],
103 |     render: (props) => {
104 |       const status = props.status;
105 |       const { rows } = props.args
106 |       const newRows = canonicalSpreadsheetData(rows);
107 |       return (
108 |         <div>
109 |           <p>Status: {status}</p>
110 |           <Spreadsheet
111 |             data={newRows}
112 |           />
113 |         </div>
114 |       )
115 |     },
116 |     handler: ({ rows }) => {
117 |       const canonicalRows = canonicalSpreadsheetData(rows);
118 |       const updatedSpreadsheet: SpreadsheetData = {
119 |         title: spreadsheet.title,
120 |         rows: [...spreadsheet.rows, ...canonicalRows],
121 |       };
122 |       setSpreadsheet(updatedSpreadsheet);
123 |     },
124 |   });
125 | 
126 |   return (
127 |     <div className="flex-1 overflow-auto p-5">
128 |       <input
129 |         type="text"
130 |         value={spreadsheet.title}
131 |         className="w-full p-2 mb-5 text-center text-2xl font-bold outline-none bg-transparent"
132 |         onChange={(e) =>
133 |           setSpreadsheet({ ...spreadsheet, title: e.target.value })
134 |         }
135 |       />
136 |       <div className="flex items-start">
137 |         <Spreadsheet
138 |           data={spreadsheet.rows}
139 |           onChange={(data) => {
140 |             console.log("data", data);
141 |             setSpreadsheet({ ...spreadsheet, rows: data as SpreadsheetRow[] });
142 |           }}
143 |         />
144 |         <button
145 |           className="bg-blue-500 text-white rounded-lg ml-6 w-8 h-8 mt-0.5"
146 |           onClick={() => {
147 |             // add an empty cell to each row
148 |             const spreadsheetRows = [...spreadsheet.rows];
149 |             for (let i = 0; i < spreadsheet.rows.length; i++) {
150 |               spreadsheet.rows[i].push({ value: "" });
151 |             }
152 |             setSpreadsheet({
153 |               ...spreadsheet,
154 |               rows: spreadsheetRows,
155 |             });
156 |           }}
157 |         >
158 |           +
159 |         </button>
160 |       </div>
161 |       <button
162 |         className="bg-blue-500 text-white rounded-lg w-8 h-8 mt-5 "
163 |         onClick={() => {
164 |           const numberOfColumns = spreadsheet.rows[0].length;
165 |           const newRow: SpreadsheetRow = [];
166 |           for (let i = 0; i < numberOfColumns; i++) {
167 |             newRow.push({ value: "" });
168 |           }
169 |           setSpreadsheet({
170 |             ...spreadsheet,
171 |             rows: [...spreadsheet.rows, newRow],
172 |           });
173 |         }}
174 |       >
175 |         +
176 |       </button>
177 |     </div>
178 |   );
179 | };
180 | 
181 | export default SingleSpreadsheet;
182 | 
183 | 
184 | 


--------------------------------------------------------------------------------
/app/components/SpreadsheetRenderer.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | import React,{useState} from "react"
 3 | import { SpreadsheetData } from "../types";
 4 | import SingleSpreadsheet from "./SingleSpreadsheet";
 5 | const SpreadsheetRenderer=()=>{
 6 |     const [spreadsheets, setSpreadsheets] = React.useState<SpreadsheetData[]>([
 7 |         {
 8 |           title: "Spreadsheet 1",
 9 |           rows: [
10 |             [{ value: "" }, { value: "" }, { value: "" }],
11 |             [{ value: "" }, { value: "" }, { value: "" }],
12 |             [{ value: "" }, { value: "" }, { value: "" }],
13 |           ],
14 |         },
15 |       ]);
16 |       // const [selectedSpreadsheetIndex, setSelectedSpreadsheetIndex] = useState(0);
17 |       const [selectedSpreadsheetIndex] = useState(0);
18 |       return (
19 |         <div className="max-w-5xl mx-auto space-y-6">
20 |           <SingleSpreadsheet
21 |             spreadsheet={spreadsheets[selectedSpreadsheetIndex]}
22 |             setSpreadsheet={(spreadsheet) => {
23 |               setSpreadsheets((prev) => {
24 |                 console.log("setSpreadsheet", spreadsheet);
25 |                 const newSpreadsheets = [...prev];
26 |                 newSpreadsheets[selectedSpreadsheetIndex] = spreadsheet;
27 |                 return newSpreadsheets;
28 |               });
29 |             }}
30 |           />
31 |         </div>
32 |       );
33 | }
34 | 
35 | export default SpreadsheetRenderer
36 | 


--------------------------------------------------------------------------------
/app/components/ToolCallRenderer.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { useState } from "react";
 4 | 
 5 | type ToolCallRendererProps = {
 6 |   name: string;
 7 |   args: any;
 8 |   status: string;
 9 |   result: any;
10 | };
11 | 
12 | export const ToolCallRenderer: React.FC<ToolCallRendererProps> = ({
13 |   name,
14 |   args,
15 |   status,
16 |   result,
17 | }) => {
18 |   const [isExpanded, setIsExpanded] = useState(false);
19 | 
20 |   const toggleExpand = () => {
21 |     setIsExpanded(!isExpanded);
22 |   };
23 | 
24 |   // Format JSON objects for display
25 |   const formatJSON = (obj: any) => {
26 |     try {
27 |       return JSON.stringify(obj, null, 2);
28 |     } catch {
29 |       return String(obj);
30 |     }
31 |   };
32 | 
33 |   // Status color mapping
34 |   const statusColors: Record<string, string> = {
35 |     running: "bg-yellow-100 text-yellow-800",
36 |     success: "bg-green-100 text-green-800",
37 |     error: "bg-red-100 text-red-800",
38 |     pending: "bg-blue-100 text-blue-800",
39 |   };
40 | 
41 |   const statusColor = statusColors[status.toLowerCase()] || "bg-gray-100 text-gray-800";
42 | 
43 |   return (
44 |     <div className="my-2 rounded-lg border border-gray-200 overflow-hidden shadow-sm">
45 |       {/* Header - always visible */}
46 |       <div 
47 |         className="flex items-center justify-between p-3 bg-gray-50 cursor-pointer hover:bg-gray-100 transition-colors"
48 |         onClick={toggleExpand}
49 |       >
50 |         <div className="flex items-center space-x-2">
51 |           <div className="font-medium text-gray-700">{name}</div>
52 |           <div className={`text-xs px-2 py-1 rounded-full ${statusColor}`}>
53 |             {status}
54 |           </div>
55 |         </div>
56 |         <button 
57 |           className="text-gray-500 hover:text-gray-700 focus:outline-none transition-transform transform"
58 |           aria-label={isExpanded ? "Collapse" : "Expand"}
59 |         >
60 |           <svg 
61 |             className={`h-5 w-5 transition-transform ${isExpanded ? "rotate-180" : ""}`} 
62 |             xmlns="http://www.w3.org/2000/svg" 
63 |             viewBox="0 0 20 20" 
64 |             fill="currentColor"
65 |           >
66 |             <path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" />
67 |           </svg>
68 |         </button>
69 |       </div>
70 | 
71 |       {/* Details - visible when expanded */}
72 |       {isExpanded && (
73 |         <div className="p-3 border-t border-gray-200">
74 |           {/* Arguments Section */}
75 |           <div className="mb-3">
76 |             <div className="text-sm font-medium text-gray-500 mb-1">Arguments:</div>
77 |             <pre className="text-xs bg-gray-50 p-2 rounded overflow-auto max-h-40">
78 |               {formatJSON(args)}
79 |             </pre>
80 |           </div>
81 | 
82 |           {/* Result Section - shown only if there's a result */}
83 |           {result && (
84 |             <div>
85 |               <div className="text-sm font-medium text-gray-500 mb-1">Result:</div>
86 |               <pre className="text-xs bg-gray-50 p-2 rounded overflow-auto max-h-40">
87 |                 {formatJSON(result)}
88 |               </pre>
89 |             </div>
90 |           )}
91 |         </div>
92 |       )}
93 |     </div>
94 |   );
95 | }; 


--------------------------------------------------------------------------------
/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CopilotKit/open-mcp-client/c8ea97b205ac860f08a4017dc36acba4d255b126/app/favicon.ico


--------------------------------------------------------------------------------
/app/globals.css:
--------------------------------------------------------------------------------
  1 | @import "tailwindcss";
  2 | 
  3 | @plugin "tailwindcss-animate";
  4 | 
  5 | @custom-variant dark (&:is(.dark *));
  6 | 
  7 | @theme {
  8 |   --font-sans: var(--font-geist-sans);
  9 |   --font-mono: var(--font-geist-mono);
 10 | }
 11 | 
 12 | :root {
 13 |   --background: oklch(1 0 0);
 14 |   --foreground: oklch(0.141 0.005 285.823);
 15 |   --card: oklch(1 0 0);
 16 |   --card-foreground: oklch(0.141 0.005 285.823);
 17 |   --popover: oklch(1 0 0);
 18 |   --popover-foreground: oklch(0.141 0.005 285.823);
 19 |   --primary: oklch(0.21 0.006 285.885);
 20 |   --primary-foreground: oklch(0.985 0 0);
 21 |   --secondary: oklch(0.967 0.001 286.375);
 22 |   --secondary-foreground: oklch(0.21 0.006 285.885);
 23 |   --muted: oklch(0.967 0.001 286.375);
 24 |   --muted-foreground: oklch(0.552 0.016 285.938);
 25 |   --accent: oklch(0.967 0.001 286.375);
 26 |   --accent-foreground: oklch(0.21 0.006 285.885);
 27 |   --destructive: oklch(0.577 0.245 27.325);
 28 |   --destructive-foreground: oklch(0.577 0.245 27.325);
 29 |   --border: oklch(0.92 0.004 286.32);
 30 |   --input: oklch(0.92 0.004 286.32);
 31 |   --ring: oklch(0.871 0.006 286.286);
 32 |   --chart-1: oklch(0.646 0.222 41.116);
 33 |   --chart-2: oklch(0.6 0.118 184.704);
 34 |   --chart-3: oklch(0.398 0.07 227.392);
 35 |   --chart-4: oklch(0.828 0.189 84.429);
 36 |   --chart-5: oklch(0.769 0.188 70.08);
 37 |   --radius: 0.625rem;;
 38 |   --sidebar: oklch(0.985 0 0);
 39 |   --sidebar-foreground: oklch(0.141 0.005 285.823);
 40 |   --sidebar-primary: oklch(0.21 0.006 285.885);
 41 |   --sidebar-primary-foreground: oklch(0.985 0 0);
 42 |   --sidebar-accent: oklch(0.967 0.001 286.375);
 43 |   --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
 44 |   --sidebar-border: oklch(0.92 0.004 286.32);
 45 |   --sidebar-ring: oklch(0.871 0.006 286.286);
 46 | }
 47 | 
 48 | .dark {
 49 |   --background: oklch(0.141 0.005 285.823);
 50 |   --foreground: oklch(0.985 0 0);
 51 |   --card: oklch(0.141 0.005 285.823);
 52 |   --card-foreground: oklch(0.985 0 0);
 53 |   --popover: oklch(0.141 0.005 285.823);
 54 |   --popover-foreground: oklch(0.985 0 0);
 55 |   --primary: oklch(0.985 0 0);
 56 |   --primary-foreground: oklch(0.21 0.006 285.885);
 57 |   --secondary: oklch(0.274 0.006 286.033);
 58 |   --secondary-foreground: oklch(0.985 0 0);
 59 |   --muted: oklch(0.274 0.006 286.033);
 60 |   --muted-foreground: oklch(0.705 0.015 286.067);
 61 |   --accent: oklch(0.274 0.006 286.033);
 62 |   --accent-foreground: oklch(0.985 0 0);
 63 |   --destructive: oklch(0.396 0.141 25.723);
 64 |   --destructive-foreground: oklch(0.637 0.237 25.331);
 65 |   --border: oklch(0.274 0.006 286.033);
 66 |   --input: oklch(0.274 0.006 286.033);
 67 |   --ring: oklch(0.442 0.017 285.786);
 68 |   --chart-1: oklch(0.488 0.243 264.376);
 69 |   --chart-2: oklch(0.696 0.17 162.48);
 70 |   --chart-3: oklch(0.769 0.188 70.08);
 71 |   --chart-4: oklch(0.627 0.265 303.9);
 72 |   --chart-5: oklch(0.645 0.246 16.439);
 73 |   --sidebar: oklch(0.21 0.006 285.885);
 74 |   --sidebar-foreground: oklch(0.985 0 0);
 75 |   --sidebar-primary: oklch(0.488 0.243 264.376);
 76 |   --sidebar-primary-foreground: oklch(0.985 0 0);
 77 |   --sidebar-accent: oklch(0.274 0.006 286.033);
 78 |   --sidebar-accent-foreground: oklch(0.985 0 0);
 79 |   --sidebar-border: oklch(0.274 0.006 286.033);
 80 |   --sidebar-ring: oklch(0.442 0.017 285.786);
 81 | }
 82 | 
 83 | @theme inline {
 84 |   --color-background: var(--background);
 85 |   --color-foreground: var(--foreground);
 86 |   --color-card: var(--card);
 87 |   --color-card-foreground: var(--card-foreground);
 88 |   --color-popover: var(--popover);
 89 |   --color-popover-foreground: var(--popover-foreground);
 90 |   --color-primary: var(--primary);
 91 |   --color-primary-foreground: var(--primary-foreground);
 92 |   --color-secondary: var(--secondary);
 93 |   --color-secondary-foreground: var(--secondary-foreground);
 94 |   --color-muted: var(--muted);
 95 |   --color-muted-foreground: var(--muted-foreground);
 96 |   --color-accent: var(--accent);
 97 |   --color-accent-foreground: var(--accent-foreground);
 98 |   --color-destructive: var(--destructive);
 99 |   --color-destructive-foreground: var(--destructive-foreground);
100 |   --color-border: var(--border);
101 |   --color-input: var(--input);
102 |   --color-ring: var(--ring);
103 |   --color-chart-1: var(--chart-1);
104 |   --color-chart-2: var(--chart-2);
105 |   --color-chart-3: var(--chart-3);
106 |   --color-chart-4: var(--chart-4);
107 |   --color-chart-5: var(--chart-5);
108 |   --radius-sm: calc(var(--radius) - 4px);
109 |   --radius-md: calc(var(--radius) - 2px);
110 |   --radius-lg: var(--radius);
111 |   --radius-xl: calc(var(--radius) + 4px);
112 |   --color-sidebar: var(--sidebar);
113 |   --color-sidebar-foreground: var(--sidebar-foreground);
114 |   --color-sidebar-primary: var(--sidebar-primary);
115 |   --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
116 |   --color-sidebar-accent: var(--sidebar-accent);
117 |   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
118 |   --color-sidebar-border: var(--sidebar-border);
119 |   --color-sidebar-ring: var(--sidebar-ring);
120 | }
121 | 
122 | @layer base {
123 |   * {
124 |     @apply border-border outline-ring/50;
125 |   }
126 |   body {
127 |     @apply bg-background text-foreground;
128 |   }
129 | }
130 | 


--------------------------------------------------------------------------------
/app/hooks/useLocalStorage.ts:
--------------------------------------------------------------------------------
 1 | import { useState, useEffect, useRef } from 'react';
 2 | 
 3 | export type SaveStatus = 'idle' | 'saving' | 'success' | 'error';
 4 | 
 5 | export function useLocalStorage<T>(
 6 |   key: string,
 7 |   initialValue: T
 8 | ): [T, (value: T) => void, SaveStatus] {
 9 |   // Function to get the initial value from localStorage
10 |   const getInitialValue = (): T => {
11 |     if (typeof window === 'undefined') return initialValue;
12 |     
13 |     try {
14 |       const item = localStorage.getItem(key);
15 |       // Check if the item exists in localStorage
16 |       if (item) {
17 |         return JSON.parse(item) as T;
18 |       }
19 |       // If not, return the initialValue and set it in localStorage
20 |       localStorage.setItem(key, JSON.stringify(initialValue));
21 |       return initialValue;
22 |     } catch (error) {
23 |       console.error(`Error reading from localStorage with key "${key}":`, error);
24 |       return initialValue;
25 |     }
26 |   };
27 | 
28 |   // State to store our value and save status
29 |   const [storedValue, setStoredValue] = useState<T>(getInitialValue);
30 |   const [saveStatus, setSaveStatus] = useState<SaveStatus>('idle');
31 |   
32 |   // Ref to track if this is the first render
33 |   const isFirstRender = useRef(true);
34 | 
35 |   // Save to localStorage whenever value changes (except on first render)
36 |   useEffect(() => {
37 |     // Skip saving on the first render
38 |     if (isFirstRender.current) {
39 |       isFirstRender.current = false;
40 |       return;
41 |     }
42 | 
43 |     try {
44 |       setSaveStatus('saving');
45 |       localStorage.setItem(key, JSON.stringify(storedValue));
46 |       setSaveStatus('success');
47 |       
48 |       // Reset status after delay
49 |       const timer = setTimeout(() => setSaveStatus('idle'), 2000);
50 |       return () => clearTimeout(timer);
51 |     } catch (error) {
52 |       console.error(`Error saving data to localStorage with key "${key}":`, error);
53 |       setSaveStatus('error');
54 |     }
55 |   }, [key, storedValue]);
56 | 
57 |   // Return a wrapped version of useState's setter function
58 |   const setValue = (value: T) => {
59 |     setSaveStatus('saving');
60 |     setStoredValue(value);
61 |   };
62 | 
63 |   return [storedValue, setValue, saveStatus];
64 | } 


--------------------------------------------------------------------------------
/app/instructions.ts:
--------------------------------------------------------------------------------
 1 | export const INSTRUCTIONS = `
 2 | All calculations will be performed by the sampleagent
 3 | You assist the user with a spreadsheet. Basic formulas are permitted, for example \`=SUM(B1:B9)\`. 
 4 | When setting numbers, don't use commas. For example, use 1000 instead of 1,000. 
 5 | Don't use words like 'million' etc, just the numbers.
 6 | 
 7 | When the user prompts you to create a new spreadsheet, focus on providing interesting numerical data and
 8 | insert formulas when appropriate. 
 9 | 
10 | If you have values that are a range, create a column for min and one for max.
11 | 
12 | Available functions in formulas:
13 | ABS, ACOS, ACOSH, ACOT, ACOTH, ADDRESS, AND, ARABIC, AREAS, ASC, ASIN, ASINH, ATAN, ATAN2, ATANH, AVEDEV, AVERAGE, AVERAGEA, AVERAGEIF, BAHTTEXT, BASE, BESSELI, BESSELJ, BESSELK, BESSELY, BETA.DIST, BETA.INV, BIN2DEC, BIN2HEX, BIN2OCT, BINOM.DIST, BINOM.DIST.RANGE, BINOM.INV, BITAND, BITLSHIFT, BITOR,
14 | BITRSHIFT, BITXOR, CEILING, CEILING.MATH, CEILING.PRECISE, CHAR, CHISQ.DIST, CHISQ.DIST.RT, CHISQ.INV, CHISQ.INV.RT, CHISQ.TEST, CLEAN, CODE, COLUMN, COLUMNS, COMBIN, COMBINA, COMPLEX, CONCAT, CONCATENATE, CONFIDENCE.NORM, CONFIDENCE.T, CORREL, COS, COSH, COT, COTH, COUNT, COUNTIF, COVARIANCE.P,
15 | COVARIANCE.S, CSC, CSCH, DATE, DATEDIF, DATEVALUE, DAY, DAYS, DAYS360, DBCS, DEC2BIN, DEC2HEX, DEC2OCT, DECIMAL, DEGREES, DELTA, DEVSQ, DOLLAR, EDATE, ENCODEURL, EOMONTH, ERF, ERFC, ERROR.TYPE, EVEN, EXACT, EXP, EXPON.DIST, F.DIST, F.DIST.RT, F.INV, F.INV.RT, F.TEST, FACT, FACTDOUBLE, FALSE, FIND, FINDB,
16 | FISHER, FISHERINV, FIXED, FLOOR, FLOOR.MATH, FLOOR.PRECISE, FORECAST, FORECAST.LINEAR, FREQUENCY, GAMMA, GAMMA.DIST, GAMMA.INV, GAMMALN, GAMMALN.PRECISE, GAUSS, GCD, GEOMEAN, GESTEP, GROWTH, HARMEAN, HEX2BIN, HEX2DEC, HEX2OCT, HLOOKUP, HOUR, HYPGEOM.DIST, IF, IFERROR, IFNA, IFS, IMABS, IMAGINARY, IMARGUMENT,
17 | IMCONJUGATE, IMCOS, IMCOSH, IMCOT, IMCSC, IMCSCH, IMDIV, IMEXP, IMLN, IMLOG10, IMLOG2, IMPOWER, IMPRODUCT, IMREAL, IMSEC, IMSECH, IMSIN, IMSINH, IMSQRT, IMSUB, IMSUM, IMTAN, INDEX, INT, INTERCEPT, ISBLANK, ISERR, ISERROR, ISEVEN, ISLOGICAL, ISNA, ISNONTEXT, ISNUMBER, ISO.CEILING, ISOWEEKNUM, ISREF, ISTEXT,
18 | KURT, LCM, LEFT, LEFTB, LN, LOG, LOG10, LOGNORM.DIST, LOGNORM.INV, LOWER, MDETERM, MID, MIDB, MINUTE, MMULT, MOD, MONTH, MROUND, MULTINOMIAL, MUNIT, N, NA, NEGBINOM.DIST, NETWORKDAYS, NETWORKDAYS.INTL, NORM.DIST, NORM.INV, NORM.S.DIST, NORM.S.INV, NOT, NOW, NUMBERVALUE, OCT2BIN, OCT2DEC, OCT2HEX, ODD, OR,
19 | PHI, PI, POISSON.DIST, POWER, PRODUCT, PROPER, QUOTIENT, RADIANS, RAND, RANDBETWEEN, REPLACE, REPLACEB, REPT, RIGHT, RIGHTB, ROMAN, ROUND, ROUNDDOWN, ROUNDUP, ROW, ROWS, SEARCH, SEARCHB, SEC, SECH, SECOND, SERIESSUM, SIGN, SIN, SINH, SQRT, SQRTPI, STANDARDIZE, SUM, SUMIF, SUMPRODUCT, SUMSQ, SUMX2MY2,
20 | SUMX2PY2, SUMXMY2, T, T.DIST, T.DIST.2T, T.DIST.RT, T.INV, T.INV.2T, TAN, TANH, TEXT, TIME, TIMEVALUE, TODAY, TRANSPOSE, TRIM, TRUE, TRUNC, TYPE, UNICHAR, UNICODE, UPPER, VLOOKUP, WEBSERVICE, WEEKDAY, WEEKNUM, WEIBULL.DIST, WORKDAY, WORKDAY.INTL, XOR, YEAR, YEARFRAC
21 | `;
22 | 


--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import type { Metadata } from "next";
 2 | import { Geist, Geist_Mono } from "next/font/google";
 3 | import "./globals.css";
 4 | import "@copilotkit/react-ui/styles.css";
 5 | import { CopilotKit } from "@copilotkit/react-core";
 6 | 
 7 | const geistSans = Geist({
 8 |   variable: "--font-geist-sans",
 9 |   subsets: ["latin"],
10 | });
11 | 
12 | const geistMono = Geist_Mono({
13 |   variable: "--font-geist-mono",
14 |   subsets: ["latin"],
15 | });
16 | 
17 | export const metadata: Metadata = {
18 |   title: "Open MCP Client",
19 |   description: "An open source MCP client built with CopilotKit 🪁",
20 | };
21 | 
22 | export default function RootLayout({
23 |   children,
24 | }: Readonly<{
25 |   children: React.ReactNode;
26 | }>) {
27 |   return (
28 |     <html lang="en">
29 |       <body
30 |         className={`${geistSans.variable} ${geistMono.variable} antialiased w-screen h-screen`}
31 |       >
32 |         <CopilotKit
33 |           runtimeUrl="/api/copilotkit"
34 |           // agent="sample_agent"
35 |           showDevConsole={false}
36 |         >
37 |           {children}
38 |         </CopilotKit>
39 |       </body>
40 |     </html>
41 |   );
42 | }
43 | 


--------------------------------------------------------------------------------
/app/page.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { CopilotChat } from "@copilotkit/react-ui";
 4 | import { CopilotActionHandler } from "./components/CopilotActionHandler";
 5 | import { CopilotKitCSSProperties } from "@copilotkit/react-ui";
 6 | import { MCPConfigForm } from "./components/MCPConfigForm";
 7 | import { useState } from "react";
 8 | import SpreadsheetRenderer from "./components/SpreadsheetRenderer";
 9 | import { INSTRUCTIONS } from "./instructions";
10 | 
11 | export default function Home() {
12 |   const [isChatOpen, setIsChatOpen] = useState(false);
13 |   const [showSpreadsheet, setShowSpreadsheet] = useState(false);
14 | 
15 |   return (
16 |     <div className="min-h-screen bg-gray-50 flex relative">
17 |       {/* Client component that sets up the Copilot action handler */}
18 |       <CopilotActionHandler />
19 | 
20 |       {/* Main content area */}
21 |       <div className="flex-1 p-4 md:p-8 lg:mr-[30vw]">
22 |         <MCPConfigForm showSpreadsheet={showSpreadsheet}
23 |           setShowSpreadsheet={setShowSpreadsheet} />
24 |         {showSpreadsheet && <SpreadsheetRenderer />}
25 |       </div>
26 |       {/* Mobile chat toggle button */}
27 |       <button
28 |         onClick={() => setIsChatOpen(!isChatOpen)}
29 |         className="fixed bottom-4 right-4 z-50 p-3 bg-gray-800 text-white rounded-full shadow-lg lg:hidden hover:bg-gray-700"
30 |         aria-label="Toggle chat"
31 |       >
32 |         {isChatOpen ? (
33 |           <svg
34 |             xmlns="http://www.w3.org/2000/svg"
35 |             className="h-6 w-6"
36 |             fill="none"
37 |             viewBox="0 0 24 24"
38 |             stroke="currentColor"
39 |           >
40 |             <path
41 |               strokeLinecap="round"
42 |               strokeLinejoin="round"
43 |               strokeWidth={2}
44 |               d="M6 18L18 6M6 6l12 12"
45 |             />
46 |           </svg>
47 |         ) : (
48 |           <svg
49 |             xmlns="http://www.w3.org/2000/svg"
50 |             className="h-6 w-6"
51 |             fill="none"
52 |             viewBox="0 0 24 24"
53 |             stroke="currentColor"
54 |           >
55 |             <path
56 |               strokeLinecap="round"
57 |               strokeLinejoin="round"
58 |               strokeWidth={2}
59 |               d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
60 |             />
61 |           </svg>
62 |         )}
63 |       </button>
64 | 
65 |       {/* Fixed sidebar - hidden on mobile, shown on larger screens */}
66 |       <div
67 |         className={`fixed top-0 right-0 h-full w-full md:w-[80vw] lg:w-[30vw] border-l bg-white shadow-md transition-transform duration-300 ${
68 |           isChatOpen ? "translate-x-0" : "translate-x-full lg:translate-x-0"
69 |         }`}
70 |         style={
71 |           {
72 |             "--copilot-kit-primary-color": "#4F4F4F",
73 |           } as CopilotKitCSSProperties
74 |         }
75 |       >
76 |         <CopilotChat
77 |           className="h-full flex flex-col"
78 |           // instructions={
79 |           //   "You are assisting the user as best as you can. Answer in the best way possible given the data you have."
80 |           // }
81 |           instructions={INSTRUCTIONS}
82 |           labels={{
83 |             title: "MCP Assistant",
84 |             initial: "Need any help?",
85 |           }}
86 |         />
87 |       </div>
88 |     </div>
89 |   );
90 | }
91 | 


--------------------------------------------------------------------------------
/app/types.ts:
--------------------------------------------------------------------------------
 1 | export interface Cell {
 2 |   value: string;
 3 | }
 4 |   
 5 | export type SpreadsheetRow = Cell[];
 6 |   
 7 | export interface SpreadsheetData {
 8 |   title: string;
 9 |   rows: SpreadsheetRow[];
10 | }
11 |   


--------------------------------------------------------------------------------
/app/utils/canonicalSpreadsheetData.ts:
--------------------------------------------------------------------------------
 1 | import { SpreadsheetRow } from "../types";
 2 | 
 3 | export interface RowLike {
 4 |     cells: CellLike[] | undefined;
 5 | }
 6 | 
 7 | export interface CellLike {
 8 |     value: string;
 9 | }
10 | 
11 | export function canonicalSpreadsheetData(
12 |     rows: RowLike[] | undefined
13 | ): SpreadsheetRow[] {
14 |     const canonicalRows: SpreadsheetRow[] = [];
15 | 
16 |     for (const row of rows || []) {
17 |         const canonicalRow: SpreadsheetRow = [];
18 |         for (const cell of row.cells || []) {
19 |             canonicalRow.push({value: cell.value});
20 |         }
21 |         canonicalRows.push(canonicalRow);
22 |     }
23 | 
24 |     return canonicalRows;
25 | }


--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://ui.shadcn.com/schema.json",
 3 |   "style": "new-york",
 4 |   "rsc": true,
 5 |   "tsx": true,
 6 |   "tailwind": {
 7 |     "config": "",
 8 |     "css": "app/globals.css",
 9 |     "baseColor": "zinc",
10 |     "cssVariables": true,
11 |     "prefix": ""
12 |   },
13 |   "aliases": {
14 |     "components": "@/components",
15 |     "utils": "@/lib/utils",
16 |     "ui": "@/components/ui",
17 |     "lib": "@/lib",
18 |     "hooks": "@/hooks"
19 |   },
20 |   "iconLibrary": "lucide"
21 | }


--------------------------------------------------------------------------------
/eslint.config.mjs:
--------------------------------------------------------------------------------
 1 | import { dirname } from "path";
 2 | import { fileURLToPath } from "url";
 3 | import { FlatCompat } from "@eslint/eslintrc";
 4 | 
 5 | const __filename = fileURLToPath(import.meta.url);
 6 | const __dirname = dirname(__filename);
 7 | 
 8 | const compat = new FlatCompat({
 9 |   baseDirectory: __dirname,
10 | });
11 | 
12 | const eslintConfig = [
13 |   ...compat.extends("next/core-web-vitals", "next/typescript"),
14 |   {
15 |     files: [
16 |       "app/components/CopilotActionHandler.tsx",
17 |       "app/components/ExampleConfigs.tsx",
18 |       "app/components/ToolCallRenderer.tsx",
19 |     ],
20 |     rules: {
21 |       "@typescript-eslint/no-explicit-any": "off",
22 |       "@typescript-eslint/ban-ts-comment": "off",
23 |     },
24 |   },
25 | ];
26 | 
27 | export default eslintConfig;
28 | 


--------------------------------------------------------------------------------
/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { clsx, type ClassValue } from "clsx";
2 | import { twMerge } from "tailwind-merge";
3 | 
4 | export function cn(...inputs: ClassValue[]) {
5 |   return twMerge(clsx(inputs))
6 | }
7 | 


--------------------------------------------------------------------------------
/next.config.ts:
--------------------------------------------------------------------------------
1 | import type { NextConfig } from "next";
2 | 
3 | const nextConfig: NextConfig = {
4 |   /* config options here */
5 | };
6 | 
7 | export default nextConfig;
8 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "whiteboard-canvas",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev-frontend": "pnpm i && next dev --turbopack",
 7 |     "dev-agent": "cd agent && poetry install && poetry run langgraph dev --host localhost --port 8123 --no-browser",
 8 |     "dev": "pnpx concurrently \"pnpm dev-frontend\" \"pnpm dev-agent\" --names ui,agent --prefix-colors blue,green",
 9 |     "build": "next build",
10 |     "start": "next start",
11 |     "lint": "next lint"
12 |   },
13 |   "dependencies": {
14 |     "@copilotkit/react-core": "^1.6.0",
15 |     "@copilotkit/react-ui": "^1.6.0",
16 |     "@copilotkit/runtime": "^1.6.0",
17 |     "@heroicons/react": "^2.2.0",
18 |     "@langchain/openai": "^0.4.5",
19 |     "class-validator": "^0.14.1",
20 |     "class-variance-authority": "^0.7.1",
21 |     "clsx": "^2.1.1",
22 |     "lucide-react": "^0.475.0",
23 |     "next": "15.2.0-canary.73",
24 |     "react": "^19.0.0",
25 |     "react-dom": "^19.0.0",
26 |     "react-spreadsheet": "^0.9.5",
27 |     "tailwind-merge": "^3.0.2",
28 |     "tailwindcss-animate": "^1.0.7"
29 |   },
30 |   "devDependencies": {
31 |     "@eslint/eslintrc": "^3",
32 |     "@tailwindcss/postcss": "^4",
33 |     "@types/node": "^20",
34 |     "@types/react": "^19",
35 |     "@types/react-dom": "^19",
36 |     "concurrently": "^9.1.2",
37 |     "eslint": "^9",
38 |     "eslint-config-next": "15.2.0-canary.73",
39 |     "tailwindcss": "^4",
40 |     "typescript": "^5"
41 |   },
42 |   "packageManager": "pnpm@10.2.1"
43 | }
44 | 


--------------------------------------------------------------------------------
/postcss.config.mjs:
--------------------------------------------------------------------------------
1 | const config = {
2 |   plugins: ["@tailwindcss/postcss"],
3 | };
4 | 
5 | export default config;
6 | 


--------------------------------------------------------------------------------
/public/file.svg:
--------------------------------------------------------------------------------
1 | <svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>


--------------------------------------------------------------------------------
/public/globe.svg:
--------------------------------------------------------------------------------
1 | <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>


--------------------------------------------------------------------------------
/public/next.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>


--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 | <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>


--------------------------------------------------------------------------------
/public/window.svg:
--------------------------------------------------------------------------------
1 | <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>


--------------------------------------------------------------------------------
/renovate.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://docs.renovatebot.com/renovate-schema.json",
 3 |   "dependencyDashboard": true,
 4 |   "extends": [
 5 |     "config:recommended"
 6 |   ],
 7 |   "poetry": {
 8 |     "enabled": true
 9 |   },
10 |   "pep621": {
11 |     "enabled": false
12 |   },
13 |   "npm": {
14 |     "enabled": true
15 |   },
16 |   "ignorePaths": [
17 |     "node_modules"
18 |   ],
19 |   "packageRules": [
20 |     {
21 |       "enabled": false,
22 |       "matchPackageNames": [
23 |         "*"
24 |       ],
25 |       "labels": [
26 |         "dependencies"
27 |       ]
28 |     },
29 |     {
30 |       "enabled": true,
31 |       "matchPackageNames": [
32 |         "/^@copilotkit/",
33 |         "/^copilotkit/"
34 |       ],
35 |       "labels": [
36 |         "copilotkit"
37 |       ],
38 |       "groupName": "CopilotKit dependencies"
39 |     }
40 |   ]
41 | }
42 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ES2017",
 4 |     "lib": ["dom", "dom.iterable", "esnext"],
 5 |     "allowJs": true,
 6 |     "skipLibCheck": true,
 7 |     "strict": true,
 8 |     "noEmit": true,
 9 |     "esModuleInterop": true,
10 |     "module": "esnext",
11 |     "moduleResolution": "bundler",
12 |     "resolveJsonModule": true,
13 |     "isolatedModules": true,
14 |     "jsx": "preserve",
15 |     "incremental": true,
16 |     "plugins": [
17 |       {
18 |         "name": "next"
19 |       }
20 |     ],
21 |     "paths": {
22 |       "@/*": ["./*"]
23 |     }
24 |   },
25 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
26 |   "exclude": ["node_modules"]
27 | }
28 | 


--------------------------------------------------------------------------------