From e6d7da7a76a399939bc3a9f325f451ab548e99af Mon Sep 17 00:00:00 2001 From: GitHub Copilot Date: Thu, 3 Sep 2026 19:45:10 +0800 Subject: [PATCH 1/2] Add Chrome DevTools MCP configuration for BookCatalog app - Add chrome-devtools-mcp.json: MCP server configuration with headless mode, stable channel, and 1280x720 viewport - Add DEVTOOLS_SETUP.md: Comprehensive setup guide covering installation, configuration scenarios, and troubleshooting - Enables agents to automate browser testing and verification during modernization tasks Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com> --- shared-legacy-app/DEVTOOLS_SETUP.md | 137 +++++++++++++++++++++ shared-legacy-app/chrome-devtools-mcp.json | 14 +++ 2 files changed, 151 insertions(+) create mode 100644 shared-legacy-app/DEVTOOLS_SETUP.md create mode 100644 shared-legacy-app/chrome-devtools-mcp.json diff --git a/shared-legacy-app/DEVTOOLS_SETUP.md b/shared-legacy-app/DEVTOOLS_SETUP.md new file mode 100644 index 0000000..fcd2e21 --- /dev/null +++ b/shared-legacy-app/DEVTOOLS_SETUP.md @@ -0,0 +1,137 @@ +# Chrome DevTools MCP Configuration + +This directory includes a Chrome DevTools Model Context Protocol (MCP) server configuration that enables AI agents to interact with and test the BookCatalog web application during modernization tasks. + +## Overview + +The Chrome DevTools MCP server allows agents to: +- Automate browser testing and verification +- Capture screenshots and performance metrics +- Interact with web elements for UI testing +- Analyze network activity and console output +- Verify application behavior across different states + +## Configuration File + +**File:** `chrome-devtools-mcp.json` + +This configuration sets up Chrome DevTools with the following defaults: + +| Option | Value | Purpose | +|--------|-------|---------| +| `--headless` | Enabled | Runs Chrome without a visible UI (suitable for automated testing) | +| `--channel` | `stable` | Uses the stable Chrome channel | +| `--viewport` | `1280x720` | Sets initial viewport size for consistent screenshots | + +## Setup Instructions + +### Prerequisites +- Node.js 18+ installed +- Chrome or Chromium browser available on your system + +### Enable the MCP Server + +1. **For GitHub Copilot App or VS Code:** + - Open your MCP configuration file (`claude_desktop_config.json` or equivalent) + - Add or update the Chrome DevTools server entry using the configuration from `chrome-devtools-mcp.json` + +2. **For Visual Studio (Windows):** + - The GitHub Copilot modernization agent will automatically detect this configuration + - Ensure Chrome is installed and accessible + +3. **Verify the Connection:** + ```bash + npx chrome-devtools-mcp@latest --headless + ``` + This should start the MCP server without errors. + +## Configuration Options + +### Common Scenarios + +#### Remote Debugging (Connect to Existing Browser) +If you want to connect to a browser session already signed in or with existing cookies: + +1. Start Chrome with remote debugging: + ```bash + # Windows + start chrome --remote-debugging-port=9222 --user-data-dir=%TEMP%\chrome-profile-stable + ``` + +2. Update `chrome-devtools-mcp.json`: + ```json + { + "mcpServers": { + "chrome-devtools": { + "command": "npx", + "args": [ + "-y", + "chrome-devtools-mcp@latest", + "--browser-url=http://127.0.0.1:9222" + ] + } + } + } + ``` + +#### Using Canary Channel +For testing with the latest Chrome features: + +Update the `--channel` argument: +```json +"args": ["-y", "chrome-devtools-mcp@latest", "--headless", "--channel=canary"] +``` + +#### Custom User Data Directory +To use a custom Chrome profile: + +```json +"args": [ + "-y", + "chrome-devtools-mcp@latest", + "--headless", + "--user-data-dir=/path/to/profile" +] +``` + +## Testing the Configuration + +Once configured, you can test the MCP server in your agent: + +1. **Start the BookCatalog app:** + ```bash + cd shared-legacy-app + # Follow the app startup instructions in the main README + ``` + +2. **In your agent interface (VS Code, GitHub Copilot app, or CLI):** + - Ask the agent to navigate to the app's URL (e.g., `http://localhost:port`) + - Request screenshots, element interactions, or network analysis + - Verify that Chrome DevTools responds with the expected data + +## Security Considerations + +- **Headless Mode:** The default configuration runs Chrome headless. For security-sensitive testing, consider running in an isolated environment. +- **Network Access:** By default, all network requests are allowed. Use `--blocked-url-pattern` to restrict access if needed. +- **Certificate Validation:** The configuration accepts valid certificates. Use `--accept-insecure-certs` cautiously in development only. + +## Troubleshooting + +| Issue | Solution | +|-------|----------| +| MCP server fails to start | Ensure Node.js is installed and Chrome is available in your PATH. Run `npx chrome-devtools-mcp@latest --headless` directly to see error details. | +| Agent can't connect to the browser | Verify the app is running on the expected port and accessible at `http://localhost:port`. Check firewall settings. | +| Screenshots are blank | Ensure the application has fully loaded before requesting screenshots. The agent may need a small delay. | +| Connection timeout | The Chrome instance may be busy. Try restarting the MCP server or increasing timeout settings. | + +## References + +- [Chrome DevTools MCP Documentation](https://developer.chrome.com/docs/devtools/agents/get-started/configuration) +- [Chrome DevTools MCP GitHub Repository](https://github.com/ChromeDevTools/chrome-devtools-mcp) +- [Model Context Protocol (MCP) Specification](https://modelcontextprotocol.io) + +## Next Steps + +- Use this configuration with the GitHub Copilot modernization agent for testing during .NET upgrades +- Combine with the BookCatalog upgrade plan to automate UI regression testing +- Extend the configuration for performance monitoring and accessibility checks diff --git a/shared-legacy-app/chrome-devtools-mcp.json b/shared-legacy-app/chrome-devtools-mcp.json new file mode 100644 index 0000000..5298a62 --- /dev/null +++ b/shared-legacy-app/chrome-devtools-mcp.json @@ -0,0 +1,14 @@ +{ + "mcpServers": { + "chrome-devtools": { + "command": "npx", + "args": [ + "-y", + "chrome-devtools-mcp@latest", + "--headless", + "--channel=stable", + "--viewport=1280x720" + ] + } + } +} From 4b5ec9746641d9fe867b979070b032a74f5648e4 Mon Sep 17 00:00:00 2001 From: GitHub Copilot Date: Thu, 1 Oct 2026 20:15:16 +0800 Subject: [PATCH 2/2] Add Facebook iOS SDK setup guide Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com> --- shared-legacy-app/FACEBOOK_IOS_SDK_SETUP.md | 123 ++++++++++++++++++++ 1 file changed, 123 insertions(+) create mode 100644 shared-legacy-app/FACEBOOK_IOS_SDK_SETUP.md diff --git a/shared-legacy-app/FACEBOOK_IOS_SDK_SETUP.md b/shared-legacy-app/FACEBOOK_IOS_SDK_SETUP.md new file mode 100644 index 0000000..0c9a261 --- /dev/null +++ b/shared-legacy-app/FACEBOOK_IOS_SDK_SETUP.md @@ -0,0 +1,123 @@ +# Facebook iOS SDK setup + +This guide describes how a companion iOS client can connect to the BookCatalog +API and add Meta (Facebook) authentication or sharing. The legacy ASP.NET +application does not include an iOS client, so these steps are integration +guidance rather than application changes. + +## Prerequisites + +- Xcode and an iOS app target +- A Meta for Developers app with the iOS platform enabled +- The app's bundle identifier and a development device or simulator +- A BookCatalog API instance reachable from the iOS app + +## Add the SDK with Swift Package Manager + +1. In Xcode, select **File > Add Package Dependencies**. +2. Enter `https://github.com/facebook/facebook-ios-sdk.git`. +3. Select the products required by the client, such as `FacebookCore`, + `FacebookLogin`, or `FacebookShare`. +4. Add the package to the app target and wait for Xcode to resolve + dependencies. + +Prefer a specific released package version for reproducible builds. Review the +SDK changelog before upgrading because the project is actively modernizing +Swift interfaces. + +## Configure the Meta app + +In the Meta for Developers dashboard: + +1. Create or select the app used by the iOS client. +2. Add the **iOS** platform. +3. Enter the exact bundle identifier from Xcode. +4. Copy the App ID and configure the iOS client with that value. +5. Add the bundle identifier and URL scheme to the app's URL scheme settings. + +Do not commit access tokens, client secrets, or other credentials. Keep +environment-specific values in an untracked local configuration or a protected +CI secret store. + +## Configure `Info.plist` + +Add the App ID and display name to the app target's `Info.plist`: + +```xml +FacebookAppID +YOUR_META_APP_ID +FacebookClientToken +YOUR_CLIENT_TOKEN +FacebookDisplayName +BookCatalog +LSApplicationQueriesSchemes + + fbapi + fb-messenger-share-api + fbauth2 + fbshareextension + +``` + +Replace placeholders with values from the Meta developer dashboard. Add the +`fbYOUR_META_APP_ID` URL scheme under **URL Types** in the target settings (or +as `CFBundleURLSchemes` in `Info.plist`) when using Facebook Login or sharing. + +## Initialize the SDK + +Initialize the SDK during application startup using the current API documented +for the SDK version selected by the project. For a UIKit app, this is commonly +done in the application delegate: + +```swift +import FBSDKCoreKit + +func application( + _ application: UIApplication, + didFinishLaunchingWithOptions launchOptions: [ + UIApplication.LaunchOptionsKey: Any + ]? +) -> Bool { + ApplicationDelegate.shared.application( + application, + didFinishLaunchingWithOptions: launchOptions + ) + return true +} +``` + +If the app uses SwiftUI, initialize the SDK from the app lifecycle while +preserving the same one-time startup behavior. Follow the SDK's current +getting-started documentation if the API changes between releases. + +## Connect to BookCatalog + +Keep the Facebook integration separate from the BookCatalog API client: + +- Use the SDK only for Meta authentication, sharing, or app events. +- Send the resulting identity or access-token data to a server endpoint only + when the server contract explicitly supports it. +- Use HTTPS for all non-local API traffic. +- Never treat a client-provided Facebook user ID as proof of identity without + validating the token server-side. + +For local development, expose the API through a device-reachable HTTPS +endpoint or configure the simulator to use the development host. Do not embed +production URLs in debug builds. + +## Privacy and App Store requirements + +Before shipping: + +- Review the data collected by the selected SDK products. +- Complete the App Store Connect privacy disclosures accurately. +- Update the app privacy policy and obtain any consent required by the + jurisdictions where the app is distributed. +- Test login, logout, cancellation, denied permissions, and interrupted + network requests. + +## References + +- [Meta iOS SDK documentation](https://developers.facebook.com/docs/ios) +- [Facebook iOS SDK repository](https://github.com/facebook/facebook-ios-sdk) +- [Apple App privacy details](https://developer.apple.com/app-store/app-privacy-details/)