React Native Mac-OS Desktop AI Chatbot with MCP!

Key Concepts

• Model Context Protocol (MCP)
• React Native for Mac OS
• Standard IO protocol server
• Native modules
• JSON RPC
• AI tool invocation
• Native Wind (Tailwind port for React Native)

Creating a React Native Mac OS Application

1. Project Setup:
   • Use React Native CLI version 0.78.2 (verified working version).
   • Create a new React Native project: npx react-native init RNMCP.
   • Initialize Mac OS target: npx react-native-macos init.
2. Project Configuration:
   • Remove Android and iOS directories (focus on Mac OS).
   • Modify package.json:
     • Remove Android and iOS versions.
     • Add Mac OS run script: "macos": "react-native-macos run".
     • Add pod install script: "pod-install": "cd macos && pod install".
3. Running the Application:
   • Open two terminal windows.
   • Start Metro Bundler: npm run start.
   • Build and run the Mac OS application: npm run macos.

Extending Native Functionality with Swift

1. Adding Swift Code:
   • Open the Xcode project located in the macos directory.
   • Create a new group named "MCP".
   • Create a new Swift file named MCPClient.swift (without a bridging header initially).
2. MCPClient Class:
   • Define a class MCPClient with a function runCommand.
   • runCommand takes an array of arguments (args: [String]) and input (input: String).
   • The function executes a command-line process, sends input to its standard input, and retrieves output from its standard output.
3. Objective-C Bridge:
   • Create an Objective-C file (e.g., MCPClientBridge.m) to bridge the Swift code to React Native.
   • Use Objective-C macros (RCT_EXTERN_MODULE, RCT_EXTERN_METHOD) to expose the MCPClient class and runCommand function to React Native.
4. Native Module Directory:
   • Create a native_modules directory in the project root.
   • Create a TypeScript file (e.g., MCPClient.ts) to act as the adapter to the native code.
5. TypeScript Adapter:
   • Import NativeModules and Platform from react-native.
   • Define a TypeScript interface for the runCommand function, specifying arguments and input types.
   • Get a reference to the native MCPClient using NativeModules.MCPClient.
   • Create a client module that exposes the runCommand function, which calls the native MCPClient.runCommand.

Interacting with the MCP Server

1. Command Configuration:
   • Define the command to run (e.g., node) and the absolute path to the MCP server script.
2. Getting Available Tools:
   • Create a function getTools to retrieve the list of available tools from the MCP server.
   • Cache the list of tools to avoid redundant requests.
   • Use the MCPClient module to run the command with a JSON RPC 2.0 request.
   • The method for listing tools is tools.list with no parameters.
3. Calling a Tool:
   • Create a function callTool to invoke a specific tool on the MCP server.
   • The function takes the tool name and arguments as input.
   • Use the MCPClient module to run the command with a JSON RPC 2.0 request.
   • The method for calling a tool is tools.call with parameters including the tool name and arguments.
   • Handle the JSON response from the MCP server, which may contain encoded JSON within the content text.

Integrating with an AI (Claude)

1. API Key Setup:
   • Create a file (e.g., APIKey.ts) to store the AI API key.
2. Message Type Definition:
   • Define a TypeScript type for messages exchanged with the AI, including role (assistant or user), ID, and content.
   • The content can be an array of different parts, such as tool invocations or plain text.
3. AI Interface Code:
   • Create a file (e.g., AI.ts) to handle communication with the AI.
   • Import callTool and getTools from the MCPClient module.
   • Create a function runAI that takes a list of messages as input.
4. Calling the AI:
   • Create a function callAIWithTools that sends messages to the AI, including the list of available tools.
   • Use the Anthropic API endpoint for Claude.
   • Include the API key, API version, and messages in the request body.
   • The messages should include the name, description, and input schema of the tools.
5. Handling Tool Calls:
   • In the runAI function, check if the AI's response includes a tool use.
   • If a tool use is present, call the corresponding tool using the callTool function.
   • Add the output from the tool call to the messages as a tool result with the ID from the tool use.
   • Recycle the loop to allow the AI to analyze the results of the tool call.
   • If there is no tool call, break out of the loop and return the output from the AI.

User Interface (UI)

1. Native Wind Installation:
   • Install Native Wind, a React Native port of Tailwind CSS, for styling the UI.
2. UI Implementation:
   • Implement a chat interface using React Native components.
   • Allow the user to send messages to the AI.
   • Display the AI's responses, including tool invocations and results.

Conclusion

The video demonstrates how to build a Mac OS application using React Native for Mac OS that interacts with an MCP standard IO protocol server and integrates with an AI (Claude). It covers the steps involved in setting up the React Native project, extending native functionality with Swift, communicating with the MCP server using JSON RPC, and integrating with the AI to handle tool invocations. The application allows the AI to leverage the tools available on the MCP server to perform tasks based on user input.