feat: Add MCP server config sanitization for sensitive data

[Cristhianzl]

This pull request introduces a utility to sanitize sensitive data from MCP (Model Context Protocol) server configurations and integrates this utility into the flow sanitization process. The main goal is to ensure that any exported or processed configuration data does not contain secrets such as API keys, tokens, or sensitive headers.

Key changes include:

Sensitive Data Sanitization for MCP Server Configs:

• Added a new utility function cleanMcpConfig in clean-mcp-config.ts that removes sensitive fields (API keys, tokens, headers, environment variables, and arguments) from an MCPServerValue configuration object.
• Defined new TypeScript types MCPServerConfig and MCPServerValue to provide type safety and clarity for MCP server configuration objects.

Integration with Flow Sanitization:

• Updated the removeApiKeys function in reactflowUtils.ts to use cleanMcpConfig for any node field named mcp_server, ensuring sensitive data is cleared from MCP server configurations during flow sanitization.
• Imported the new utility and types into reactflowUtils.ts for use in the sanitization logic.

Before:

After:

Summary by CodeRabbit

• New Features

  • MCP server configurations now automatically sanitize and remove sensitive information including API keys, tokens, environment variables, headers, and authorization credentials.

• Tests

  • Comprehensive test suite added to validate sanitization functionality across various scenarios and edge cases.

[coderabbitai]

Important

Review skipped

Auto incremental reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Walkthrough

A new utility module sanitizes sensitive data from MCP server configurations by removing fields like API keys, tokens, headers, environment variables, and arguments. Comprehensive tests validate this behavior across edge cases and real-world scenarios. The sanitization is integrated into the existing API key sanitization logic in reactflowUtils.

Changes

Cohort / File(s)	Summary
MCP Config Sanitization Implementation src/frontend/src/utils/helpers/clean-mcp-config.ts	Introduces MCPServerConfig and MCPServerValue types, and cleanMcpConfig() function to remove sensitive fields (api_key, apiKey, token, access_token, authorization, headers, env, args) while preserving non-sensitive fields.
Integration with Existing Sanitization src/frontend/src/utils/reactflowUtils.ts	Adds conditional logic to call cleanMcpConfig() on MCP server configuration objects during template field sanitization, alongside existing password-field clearing.
Test Suite src/frontend/src/utils/__tests__/clean-mcp-config.test.ts	Comprehensive test suite validating sensitive field removal, camelCase/snake_case handling, edge cases (empty/null/undefined inputs), mutation behavior, nested configurations, and real-world MCP scenarios.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant ReactFlow as reactflowUtils
    participant Sanitize as cleanMcpConfig
    
    User->>ReactFlow: Template with mcp_server field
    ReactFlow->>ReactFlow: Iterate template fields
    
    alt Field is password
        ReactFlow->>ReactFlow: Clear to empty string
    else Field is mcp_server
        ReactFlow->>Sanitize: cleanMcpConfig(mcp_server_value)
        
        Sanitize->>Sanitize: Clear headers to {}
        Sanitize->>Sanitize: Clear env to {}
        Sanitize->>Sanitize: Empty args array
        Sanitize->>Sanitize: Delete api_key/apiKey
        Sanitize->>Sanitize: Delete token/access_token
        Sanitize->>Sanitize: Delete authorization
        
        Sanitize-->>ReactFlow: Sanitized MCPServerValue
    end
    
    ReactFlow-->>User: Sanitized template

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• Type definitions and function logic: Verify the complete set of sensitive fields is covered and field deletion/clearing approach is appropriate
• Test coverage comprehensiveness: Validate that edge cases (null, undefined, non-objects) and real-world scenarios are adequately covered
• Integration correctness: Ensure the conditional logic in reactflowUtils properly handles mcp_server fields and doesn't interfere with existing password-field sanitization

Suggested labels

lgtm

Suggested reviewers

• lucaseduoli
• mfortman11
• deon-sanchez

Pre-merge checks and finishing touches

Important

Pre-merge checks failed

Please resolve all errors before merging. Addressing warnings is optional.

❌ Failed checks (1 error, 1 warning, 2 inconclusive)

Check name	Status	Explanation	Resolution
Test Coverage For New Implementations	❌ Error	The cleanMcpConfig utility has comprehensive unit test coverage (20+ test cases), but the integration of this utility into reactflowUtils.ts lacks corresponding test coverage.	Add integration tests for reactflowUtils.ts to verify that removeApiKeys() correctly calls cleanMcpConfig() for mcp_server fields and properly sanitizes sensitive data.
Docstring Coverage	⚠️ Warning	Docstring coverage is 50.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.
Test Quality And Coverage	❓ Inconclusive	Test file could not be located at the specified path to verify test quality and coverage.	Verify that the test file exists at src/frontend/src/utils/tests/clean-mcp-config.test.ts and provide its contents for evaluation.
Excessive Mock Usage Warning	❓ Inconclusive	Unable to access the actual test file to verify mock usage patterns; the pure utility function being tested does not require external mocking based on its design.	Review the test file for: (1) jest.mock() calls, (2) Mock<> type usage instead of real objects, (3) jest.fn() for non-existent callbacks, (4) whether tests use real test data or mocked structures.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The pull request title clearly and concisely describes the main change: adding sanitization for sensitive data in MCP server configurations, which aligns with the core objective of the changeset.
Test File Naming And Structure	✅ Passed	Test file follows correct frontend testing patterns with proper naming convention, vitest imports, logical describe blocks, descriptive test names, comprehensive edge case coverage, and proper assertions.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

Frontend Unit Test Coverage Report

Coverage Summary

Lines	Statements	Branches	Functions
	14.68% (3983/27130)	7.57% (1560/20599)	8.94% (535/5982)

Unit Test Results

Tests	Skipped	Failures	Errors	Time
1630	0 💤	0 ❌	0 🔥	19.082s ⏱️

[codecov]

Codecov Report

❌ Patch coverage is 73.07692% with 7 lines in your changes missing coverage. Please review.
✅ Project coverage is 39.33%. Comparing base (b73123b) to head (6c631cb).
⚠️ Report is 1 commits behind head on main.

Files with missing lines	Patch %	Lines
src/frontend/src/utils/reactflowUtils.ts	14.28%	6 Missing ⚠️
src/frontend/src/utils/helpers/clean-mcp-config.ts	94.73%	0 Missing and 1 partial ⚠️

❌ Your project status has failed because the head coverage (39.35%) is below the target coverage (60.00%). You can increase the head coverage or adjust the target coverage.

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #10552      +/-   ##
==========================================
+ Coverage   31.43%   39.33%   +7.89%     
==========================================
  Files        1347     1494     +147     
  Lines       60889    82303   +21414     
  Branches     9103     9003     -100     
==========================================
+ Hits        19141    32374   +13233     
- Misses      40838    49022    +8184     
+ Partials      910      907       -3     

Flag	Coverage Δ
frontend	13.59% <73.07%> (+0.06%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines	Coverage Δ
src/frontend/src/utils/helpers/clean-mcp-config.ts	94.73% <94.73%> (ø)
src/frontend/src/utils/reactflowUtils.ts	9.91% <14.28%> (+0.05%)	⬆️

... and 301 files with indirect coverage changes

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (2)

src/frontend/src/utils/reactflowUtils.ts (1)

482-497: Consider documenting mutation behavior.

The integration correctly sanitizes MCP server configurations. However, since cleanMcpConfig mutates the input object and returns it, the unused return value at line 496 might confuse readers about whether mutation or reassignment is intended.

Consider one of these approaches for clarity:

Option 1: Use the return value (preferred for consistency with cleanMcpConfig's API):

       // Handle MCP server configurations
       if (
         key === "mcp_server" &&
         field.value &&
         typeof field.value === "object"
       ) {
         // Type assertion is safe here as we've verified it's an object with runtime checks
-        cleanMcpConfig(field.value as MCPServerValue);
+        field.value = cleanMcpConfig(field.value as MCPServerValue);
       }

Option 2: Add a comment explaining the mutation:

       // Handle MCP server configurations
       if (
         key === "mcp_server" &&
         field.value &&
         typeof field.value === "object"
       ) {
         // Type assertion is safe here as we've verified it's an object with runtime checks
+        // cleanMcpConfig mutates the input object
         cleanMcpConfig(field.value as MCPServerValue);
       }

src/frontend/src/utils/helpers/clean-mcp-config.ts (1)

40-82: Consider documenting mutation behavior in JSDoc.

The function implementation is correct and handles sensitive data removal properly. However, the JSDoc doesn't mention that the function mutates the input object, which might surprise API consumers.

Consider adding a note about mutation to the JSDoc:

 /**
  * Cleans sensitive data from MCP (Model Context Protocol) server configuration.
  *
  * This function removes sensitive authentication data that should not be exported,
  * including:
  * - Headers (may contain API keys, authorization tokens)
  * - Environment variables (may contain secrets)
  * - Command arguments (may contain sensitive parameters)
  * - API keys, tokens, and authorization fields
  *
+ * Note: This function mutates the input object.
+ *
  * @param mcpValue - The MCP server configuration object
  * @returns The cleaned configuration with sensitive data removed
  */

Alternatively, if you want to avoid mutation, consider cloning the config object before modifying it. However, since removeApiKeys (the caller) already clones the entire flow with cloneDeep, the current mutation approach is acceptable and avoids unnecessary deep cloning.

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between bfbaeab and d7039aa.

📒 Files selected for processing (3)

• src/frontend/src/utils/__tests__/clean-mcp-config.test.ts (1 hunks)
• src/frontend/src/utils/helpers/clean-mcp-config.ts (1 hunks)
• src/frontend/src/utils/reactflowUtils.ts (2 hunks)

🧰 Additional context used

📓 Path-based instructions (4)

src/frontend/src/**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.cursor/rules/frontend_development.mdc)

src/frontend/src/**/*.{ts,tsx,js,jsx}: All frontend TypeScript and JavaScript code should be located under src/frontend/src/ and organized into components, pages, icons, stores, types, utils, hooks, services, and assets directories as per the specified directory layout.
Use React 18 with TypeScript for all UI components in the frontend.
Format all TypeScript and JavaScript code using the make format_frontend command.
Lint all TypeScript and JavaScript code using the make lint command.

Files:

• src/frontend/src/utils/helpers/clean-mcp-config.ts
• src/frontend/src/utils/reactflowUtils.ts
• src/frontend/src/utils/__tests__/clean-mcp-config.test.ts

src/frontend/src/utils/**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.cursor/rules/frontend_development.mdc)

All utility functions should be placed in the utils directory.

Files:

• src/frontend/src/utils/helpers/clean-mcp-config.ts
• src/frontend/src/utils/reactflowUtils.ts
• src/frontend/src/utils/__tests__/clean-mcp-config.test.ts

src/frontend/src/**/__tests__/**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.cursor/rules/frontend_development.mdc)

All frontend code should be tested using appropriate component and integration tests.

Files:

• src/frontend/src/utils/__tests__/clean-mcp-config.test.ts

src/frontend/**/*.@(test|spec).{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.cursor/rules/testing.mdc)

src/frontend/**/*.@(test|spec).{ts,tsx,js,jsx}: Frontend test files should be located in 'src/frontend/' and use '.test.{ts,tsx,js,jsx}' or '.spec.{ts,tsx,js,jsx}' extensions.
Test both sync and async code paths in frontend test files.
Mock external dependencies appropriately in frontend test files to isolate unit tests from external services.
Test error handling and edge cases in frontend test files.
Validate input/output behavior and test component initialization and configuration in frontend test files.
Each frontend test should have a clear description or comment explaining its purpose, especially for complex setups or mocks.

Files:

• src/frontend/src/utils/__tests__/clean-mcp-config.test.ts

🧠 Learnings (10)

📚 Learning: 2025-07-18T18:27:12.609Z

Learnt from: CR
Repo: langflow-ai/langflow PR: 0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-07-18T18:27:12.609Z
Learning: Applies to src/frontend/src/components/**/@(FlowGraph|nodes)/**/*.{ts,tsx,js,jsx} : Use React Flow for flow graph visualization components.

Applied to files:

• src/frontend/src/utils/reactflowUtils.ts

📚 Learning: 2025-06-23T12:46:42.048Z

Learnt from: CR
Repo: langflow-ai/langflow PR: 0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-23T12:46:42.048Z
Learning: Custom React Flow node types should be implemented as memoized components, using Handle components for connection points and supporting optional icons and labels.

Applied to files:

• src/frontend/src/utils/reactflowUtils.ts

📚 Learning: 2025-06-23T12:46:42.048Z

Learnt from: CR
Repo: langflow-ai/langflow PR: 0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-23T12:46:42.048Z
Learning: React Flow should be used for flow graph visualization, with nodes and edges passed as props, and changes handled via onNodesChange and onEdgesChange callbacks.

Applied to files:

• src/frontend/src/utils/reactflowUtils.ts

📚 Learning: 2025-07-21T14:16:14.125Z

Learnt from: CR
Repo: langflow-ai/langflow PR: 0
File: .cursor/rules/testing.mdc:0-0
Timestamp: 2025-07-21T14:16:14.125Z
Learning: Applies to src/frontend/**/*.@(test|spec).{ts,tsx,js,jsx} : Mock external dependencies appropriately in frontend test files to isolate unit tests from external services.

Applied to files:

• src/frontend/src/utils/__tests__/clean-mcp-config.test.ts

📚 Learning: 2025-07-21T14:16:14.125Z

Learnt from: CR
Repo: langflow-ai/langflow PR: 0
File: .cursor/rules/testing.mdc:0-0
Timestamp: 2025-07-21T14:16:14.125Z
Learning: Applies to src/frontend/**/*.@(test|spec).{ts,tsx,js,jsx} : Validate input/output behavior and test component initialization and configuration in frontend test files.

Applied to files:

• src/frontend/src/utils/__tests__/clean-mcp-config.test.ts

📚 Learning: 2025-07-21T14:16:14.125Z

Learnt from: CR
Repo: langflow-ai/langflow PR: 0
File: .cursor/rules/testing.mdc:0-0
Timestamp: 2025-07-21T14:16:14.125Z
Learning: Applies to src/frontend/**/*.@(test|spec).{ts,tsx,js,jsx} : Each frontend test should have a clear description or comment explaining its purpose, especially for complex setups or mocks.

Applied to files:

• src/frontend/src/utils/__tests__/clean-mcp-config.test.ts

📚 Learning: 2025-07-21T14:16:14.125Z

Learnt from: CR
Repo: langflow-ai/langflow PR: 0
File: .cursor/rules/testing.mdc:0-0
Timestamp: 2025-07-21T14:16:14.125Z
Learning: Applies to src/frontend/**/*.@(test|spec).{ts,tsx,js,jsx} : Test error handling and edge cases in frontend test files.

Applied to files:

• src/frontend/src/utils/__tests__/clean-mcp-config.test.ts

📚 Learning: 2025-07-21T14:16:14.125Z

Learnt from: CR
Repo: langflow-ai/langflow PR: 0
File: .cursor/rules/testing.mdc:0-0
Timestamp: 2025-07-21T14:16:14.125Z
Learning: Applies to src/frontend/**/*.@(test|spec).{ts,tsx,js,jsx} : Test both sync and async code paths in frontend test files.

Applied to files:

• src/frontend/src/utils/__tests__/clean-mcp-config.test.ts

📚 Learning: 2025-07-18T18:27:12.609Z

Learnt from: CR
Repo: langflow-ai/langflow PR: 0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-07-18T18:27:12.609Z
Learning: Applies to src/frontend/src/**/__tests__/**/*.{ts,tsx,js,jsx} : All frontend code should be tested using appropriate component and integration tests.

Applied to files:

• src/frontend/src/utils/__tests__/clean-mcp-config.test.ts

📚 Learning: 2025-07-21T14:16:14.125Z

Learnt from: CR
Repo: langflow-ai/langflow PR: 0
File: .cursor/rules/testing.mdc:0-0
Timestamp: 2025-07-21T14:16:14.125Z
Learning: Applies to src/backend/tests/**/*.md : Create comprehensive unit tests for all new components. If unit tests are incomplete, create a Markdown file with manual testing steps in the same directory as the unit tests, using the same filename as the component but with a '.md' extension.

Applied to files:

• src/frontend/src/utils/__tests__/clean-mcp-config.test.ts

🧬 Code graph analysis (2)

src/frontend/src/utils/reactflowUtils.ts (1)

src/frontend/src/utils/helpers/clean-mcp-config.ts (2)

• cleanMcpConfig (40-82)
• MCPServerValue (21-25)

src/frontend/src/utils/__tests__/clean-mcp-config.test.ts (1)

src/frontend/src/utils/helpers/clean-mcp-config.ts (3)

• MCPServerValue (21-25)
• cleanMcpConfig (40-82)
• MCPServerConfig (4-16)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)

• GitHub Check: Run Frontend Unit Tests / Frontend Jest Unit Tests
• GitHub Check: Test Docker Images / Test docker images
• GitHub Check: Run Frontend Tests / Determine Test Suites and Shard Distribution
• GitHub Check: Test Starter Templates

🔇 Additional comments (3)

src/frontend/src/utils/reactflowUtils.ts (1)

64-67: LGTM!

The import statement correctly brings in the new MCP sanitization utility and its type definition.

src/frontend/src/utils/__tests__/clean-mcp-config.test.ts (1)

1-507: Excellent test coverage!

This test suite is comprehensive and well-structured, covering all critical scenarios:

• ✅ Validates removal of all sensitive fields (headers, env, args, API keys, tokens, authorization)
• ✅ Confirms preservation of non-sensitive fields (command, url, name)
• ✅ Tests both snake_case (api_key) and camelCase (apiKey) variants
• ✅ Covers edge cases: null, undefined, empty objects, non-objects, non-arrays
• ✅ Documents mutation behavior explicitly (lines 310-338)
• ✅ Includes real-world scenarios (production MCP, GitHub MCP, HTTP-based MCP)
• ✅ Tests special cases: Unicode characters, large datasets, complex nested values
• ✅ Clear test descriptions per coding guidelines

The test organization into logical describe blocks makes it easy to understand what's being tested and why.

src/frontend/src/utils/helpers/clean-mcp-config.ts (1)

1-25: LGTM!

The type definitions are well-structured:

• Support for both snake_case and camelCase naming conventions (e.g., api_key and apiKey)
• Index signatures provide flexibility for additional properties
• Clear JSDoc comments
• All fields appropriately marked as optional

[Adam-Aghili]

If it fails to merge and there are merge conflicts it is likely: #10440

[Adam-Aghili]

LGTM!