HighRise

Using the Migration MCP Tool ​

Transform your GHL-UI components to Highrise with ease

This guide will walk you through setting up and using the Migration MCP tool in Cursor to migrate GHL-UI components to Highrise. The Migration MCP tool is designed to automate the process of converting existing GHL-UI components to be compatible with the Highrise design system.

Prerequisites ​

⚙️ Setup Instructions ​

1. Configure Cursor Settings ​

  1. Open Cursor Settings
  2. Navigate to the "MCP Tools" section
  3. Click on "Add Custom MCP Server"
  4. In your ~/.cursor/mcp.json file, add the Highrise MCP server configuration:
json
{
  "mcpServers": {
    "highrise": {
      "url": "http://staging.services.leadconnectorhq.internal/devtools-mcp/server"
    }
  }
}

WARNING

Make sure to have VPN enabled to access the MCP server.

2. Verify MCP Server Connection ​

  1. Check in Cursor Settings to ensure the MCP server is:
    • Successfully connected
    • Currently running
    • Shows a green status indicator

⚡ Migration Process ​

1. Start a New Chat ​

  1. Open a new chat in Cursor
  2. Add the file you want to migrate as context
    • This can be done by opening the file or dragging it into the chat
    • You can also add multiple files if your component has dependencies
    • Make sure to include any related type definitions or utility files

2. Configure Chat Settings ​

  1. Select your preferred chat mode:

    Agent Mode (Recommended)

    • Click the "New Chat" button in Cursor
    • Select "Agent Mode" from the dropdown
    • This mode is optimized for component migration

    Custom Mode Setup

    • Click the "New Chat" button in Cursor
    • Select "Custom Mode" from the dropdown
    • In the configuration panel:
      • Set Model: claude-3.5-sonnet
      • Disable "Web Search"
      • Enable "Codebase Search"
      • Enable "Terminal Access"
      • Enable "File Edit"

  2. The recommended model claude-3.5-sonnet will be automatically selected in Agent Mode. For Custom Mode, ensure you select it manually.

3. Initiate Migration ​

  1. In the chat, request Cursor to migrate your GHL-UI components to Highrise. Here are some example prompts:

Example Prompts

Migrate the components here from GHL-UI to Highrise.
Convert GHL-UI components on this file to Highrise components using the MCP tool.
  1. The MCP tool will automatically:
    • Analyze your components and their dependencies
    • Convert GHL-UI specific props and events to Highrise equivalents
    • Update import statements and component references
    • Apply Highrise's best practices and patterns

ℹ️ Compatibility Mode ​

Some components might not be available in Highrise yet. For these cases, you can use the compatibility mode to continue using GHL-UI components alongside Highrise components. For detailed setup instructions and usage guidelines, refer to the Compat Mode Documentation.

Best Practices ​

  • Ensure your local MCP server is running before starting the migration
  • Review the generated code after migration:
    • Check that all props and events are correctly mapped
    • Verify that styles are properly converted, if not, you can manually update the styles in the component file
    • Test component interactions and functionality
    • Test edge cases and error states

⚠️ Troubleshooting ​

If you encounter issues:

  1. Verify the MCP server is running at the correct URL
  2. Check your mcp.json configuration
  3. Ensure you're using the recommended model (claude-3.5-sonnet)
  4. If the migration suggestions seem inconsistent or incorrect, start a new chat session
  5. Try restarting Cursor if the MCP server connection is unstable

📖 Resources ​

✉️ Need Help? ​

If you face any issues during migration, reach out to the team on Slack.