--- schema_version: "1" id: 9b448a50cb086fc1017a79089f36e53a097032772bb2abc59fa26f3bdd676d06 title: Validate and Optimize Your React Apps (Developer Preview) collection: developer version: current locale: en-us portal_url: https://docs.salesforce.com/developer/current/en-us/salesforcedx/agentforcevibes/guides/files/afv-reactdev-mcpvalidate.md canonical_url: https://developer.salesforce.com/docs/platform/code-builder/guide/afv-reactdev-mcpvalidate.html source_site: developer.salesforce.com content_type: documentation content_hash: 7a75b431a7260c9e7a1902a96c3d8f27840922c6ecdcfb21893601c1e7a996ad products: - Agentforce Vibes IDE - salesforcedx --- # Validate and Optimize Your React Apps (Developer Preview) Agentforce Vibes provides several Model Context Protocol (MCP) tools that orchestrate a quality validation workflow for Salesforce Multi-Framework. The validation workflow runs a set of validators and reports the results to help you get your apps ready for production. After the results are returned, the workflow stops so you can choose whether to fix the identified issues or revalidate. These tools are available via the [Salesforce DX MCP server](https://developer.salesforce.com/docs/platform/code-builder/guide/afv-mcp-servers.md) in the `experts-validation` toolset. - `validate_and_optimize` - `score_issues` To invoke the validation tools, ask about validating your React app. Example prompts include: - Validate and score `componentName` - Run `validate_and_optimize` on this component for accessibility only - Is my app production-ready? ## Validate and Optimize Tool (`validate_and_optimize`) The `validate_and_optimize` tool scores code quality across multiple validators: - Code Analyzer: `run_code_analyzer` - Security: `guide_lws_security` - Accessibility: `guide_component_accessibility` Each validator runs and invokes the `score_issues` tool, producing a **readiness score** (0–100) and a **quality grade**. After all validators run, `score_issues` returns the overall score. **note:** Validators are weighted by importance — security issues impact the overall score far more than best-practice issues. Use this tool for React apps: - After adding or refactoring UI components and pages - Before PR merge or deployment to ensure accessibility, responsiveness, and UX standards - When performance or structure is suboptimal, such as in expensive renders or large lists ## Scoring Tool (`score_issues`) The `score_issues` tool consumes the validation findings from `validate_and_optimize`. The `validate_and_optimize` tool invokes each validator to run an analysis and then calls `score_issues`. After all validators are run, `score_issues` provide an overall readiness score. `score_issues` computes a readiness score (0-100) and a quality grade (`prototype`, `draft`, `review-for-production`). You get a list of identified issues with recommendations on how to fix them. You can choose to fix them automatically and re-validate your component. | Grade | Score | Meaning | | ----------------------- | ----- | ---------------------------------- | | `review-for-production` | ≥ 90 | Ready for human review | | `prototype` | 60–89 | Functional but has notable issues | | `draft` | < 60 | Significant issues need addressing | ### Impact of a single issue on a validator's score An issue in your code can be identified as an error, warning, or note. Each issue results in points taken off from the total score. | Finding | Score | Points Lost | | --------- | ----- | ----------- | | 1 error | 80 | −20 | | 1 warning | 96 | −4 | | 1 note | 100 | ~0 | ### Validator weights in the overall score Aggregate scoring uses a weighted average across all the validators, weighted based on tier. | Tier | Weight | Validators | | ----------- | ------ | ------------------------------- | | **Blocker** | 50 | `guide_lws_security` | | Critical | 30 | `run_code_analyzer` | | Important | 20 | `guide_component_accessibility` | For example, a single security error alone can drop the overall score from 100 to 93. ## Validators The `validate_and_optimize` tool invokes several validators and returns issues per validator before presenting the results and a readiness score with actionable recommendations. ### Code Analyzer Tool (`run_code_analyzer`) The [`run_code_analyzer` MCP tool](https://developer.salesforce.com/docs/platform/salesforce-code-analyzer/guide/mcp.html) runs static analysis across selected files to detect code quality, security, and performance issues. The tool returns a JSON result with a path to the results file (if created) and an overall status. The `run_code_analyzer` tool complements `npm run lint` (ESLint) and `npm run build` (TypeScript and Vite). It adds a static-analysis layer, such as for security, performance, or anti-patterns beyond ESLint rules. The tool checks for code issues, including: - ESLint (JavaScript/TypeScript linting) - Syntax and parse errors - Code-quality rules such as no-unused-vars or no-undef - Framework-specific or plugin-specific configuration - PMD (Apex and JavaScript patterns) - Best-practice and maintainability rules - Potential bug patterns - Complexity and structure checks - CPD (Copy and Paste Detector) - Detects duplicated blocks across files - Highlights maintainability risks from code duplication **note:** Configure the Code Analyzer tool to ignore `eslint.config.js`. For more information, see [Customize the Configuration](https://developer.salesforce.com/docs/platform/salesforce-code-analyzer/guide/config-custom.html) in the Salesforce Code Analyzer Developer Guide. ### Accessibility Guidelines Tool (`guide_component_accessibility`) The `guide_component_accessibility` tool analyzes component accessibility and provides fixes and guidance that are aligned to WCAG and Salesforce standards. It analyzes your code in accessibility areas such as roles, labels, focus management, color contrast, and ARIA patterns. If you have images in your component, the tool provides recommendations for images, such as for alt text quality, decorative vs informative, and contrast with imagery. In analysis mode, the tool returns a list of identified violations, and it asks for your permission to apply the fixes. In fix mode, the tool applies the fixes and provides an accessibility fix report with the identified issues. The tool checks for accessibility issues, including: - Non-text content (SC 1.1.1): img alt text, decorative vs informative handling - Info and Relationships (SC 1.3.1): lists and regions semantics; programmatic relationships - Identify Input Purpose (SC 1.3.5): autocomplete tokens for personal info inputs - Keyboard (SC 2.1.1): focusability, key handling for interactive elements, tabindex pitfalls - Link Purpose (SC 2.4.4): descriptive link text or sufficient context - Pointer Gestures (SC 2.5.1) and Pointer Cancellation (SC 2.5.2): single-pointer alternatives and up-event or cancel mechanisms - Dragging Movements (SC 2.5.7): non-drag alternatives - Label in Name (SC 2.5.3): accessible name contains a visible label - Name Only, Role Only, Value Only (SC 4.1.2 subsets): programmatic name, correct roles, valid ARIA values ### Security Guidelines Tool (`guide_lws_security`) The `guide_lws_security` tool provides a comprehensive security analysis aligned with Lightning Web Security (LWS) and product security guidelines. The tool identifies risky browser patterns, DOM access, sandbox escapes, unsafe script/style injection, and common anti-patterns in your React code. The tool checks for security issues, including: - Direct window or document access - Insecure URL handling, such as open redirects or JavaScript-based URLs - Unsafe DOM manipulation: innerHTML, outerHTML, insertAdjacentHTML, document.write, dangerouslySetInnerHTML - Unsafe event handler strings or dynamic script or style injection, such as the use of eval, `Function` constructor, and blob URLs for scripts - Cross-surface access assumptions that can break under LWS compartmentalization - Inadequate input validation or encoding and unsafe HTML templates - CSRF/auth bypass in API calls (React must use @salesforce/platform-sdk; no raw fetch for Salesforce APIs)