Supported Migration Paths
| Source Provider | Strategy | Description |
|---|---|---|
| Privy | privy-to-para | Replaces PrivyProvider, usePrivy, useWallets, and related hooks |
| Reown / AppKit | reown-to-para | Replaces AppKit, useAppKit, useAppKitAccount, and related hooks |
| Web3Modal | web3modal-to-para | Replaces Web3Modal, useWeb3Modal, useWeb3ModalAccount, and related hooks |
| WalletConnect | walletconnect-to-para | Replaces WalletConnect provider and connector configuration |
Prerequisites
Before starting, make sure you have:- A Para API key from the Developer Portal
- Node.js 18+ installed
- An existing project using one of the supported wallet providers above
- An AI tool that supports MCP: Claude Code, Cursor, or Claude Desktop
Installation
Add the Migration MCP server to your AI tool of choice:- Claude Code
- Cursor
- Claude Desktop
Run the following command in your terminal:Restart Claude Code to pick up the new server.
Step-by-Step Migration
Once the MCP server is connected, walk through these steps in your AI tool’s chat interface. Each step corresponds to an MCP tool that runs automatically behind the scenes.Analyze Your Project
Start by asking your AI assistant to analyze your project:This runs the
analyze_project tool, which scans your project’s dependencies, imports, provider components, hooks, and styles. It returns:- The detected wallet provider (Privy, Reown, Web3Modal, or WalletConnect)
- The recommended migration strategy
- A summary of all provider-related code found (hooks, providers, imports)
If your project uses a non-standard structure, you can also specify the path to your
package.json directly.Check Wagmi Compatibility
Para maintains full Wagmi compatibility, so your existing Wagmi hooks continue to work after migration. Verify this by asking:This runs
check_compatibility and reports which Wagmi hooks are in use and whether they’re compatible with Para’s provider.Preview the Migration (Dry Run)
Before making any changes, preview what the migration will do:This runs
execute_atomic_migration with dryRun: true. It returns a detailed list of every operation that would be performed — dependency removals, import replacements, provider swaps, hook updates, and CSS additions — without actually modifying any files.Review the output to make sure you’re comfortable with the changes.Execute the Migration
When you’re ready, execute the migration:This runs
execute_atomic_migration with dryRun: false. The migration is atomic — either all operations succeed together, or everything rolls back to the original state. You’ll never be left with a half-migrated project.The tool will:- Remove old wallet provider imports
- Add Para SDK imports
- Replace provider components with
ParaProvider - Update hook usages (e.g.,
usePrivybecomesuseAccount) - Add Para CSS imports to your entry point
Validate the Migration
After the migration completes, run validation to catch the issues that cause 90% of migration failures:This runs This runs
validate_para_migration and checks for five critical issues:- ParaModal missing —
<ParaModal />must be rendered inside<ParaProvider> - CSS imports missing —
@getpara/react-sdk/styles.cssmust be imported in your entry point - Environment enum — Must use
Environment.DEVELOPMENT(not the string"development") - Old dependencies present — Old provider packages should be fully removed
- Para dependencies missing —
@getpara/react-sdkmust be installed
validate_migration_state and returns a breakdown of how much of the migration is complete across dependencies, imports, providers, hooks, and styles.Generating Additional Components
If you need to generate specific components after the migration, the MCP server includes several code generation tools you can invoke through your AI assistant.Provider Component
Generate a production-readyParaProvider component:
generate_provider_component and outputs a complete provider with ParaModal, CSS imports, and Environment enum already configured correctly.
Connect Button
Generate a styled wallet connection button:tailwind, styled-components, css-modules, or none.
CSS Imports
Auto-detect your project’s entry point and generate the correct CSS import:generate_css_imports and detects whether your entry point is main.tsx, layout.tsx, _app.tsx, or another file, then generates the appropriate import statement.
Hook Migration Examples
See before/after examples of how hooks change during migration:generate_hooks_examples and shows the mapping for each hook — for example, usePrivy becomes useAccount, useWallets becomes useWallet, and so on. Supported source providers: privy, reown, walletconnect.
Next.js Layout with Styles
Generate a complete Next.js root layout with Para styles properly imported:generate_layout_with_styles and outputs a layout.tsx file with the @getpara/react-sdk/styles.css import in the correct location.
Common Issues
Tool Reference
Full parameter documentation for all 14 MCP tools provided by the migration server.Analysis Tools
Analysis Tools
analyze_project — Analyze a project to detect wallet provider usage and prepare a migration plan.| Parameter | Type | Required | Description |
|---|---|---|---|
projectPath | string | Yes | Path to the project directory |
packageJsonPath | string | No | Path to package.json (auto-detected if omitted) |
check_compatibility — Check compatibility between current Wagmi hooks and Para.| Parameter | Type | Required | Description |
|---|---|---|---|
projectPath | string | Yes | Path to the project directory |
validate_migration — Validate migration setup and check for common issues.| Parameter | Type | Required | Description |
|---|---|---|---|
projectPath | string | Yes | Path to the project directory |
config | object | No | Migration configuration to validate against |
validate_para_migration — Validate the 5 critical issues that cause 90% of migration failures.| Parameter | Type | Required | Description |
|---|---|---|---|
projectPath | string | Yes | Path to the project directory |
validate_migration_state — Get migration completion percentage across dependencies, imports, providers, hooks, and styles.| Parameter | Type | Required | Description |
|---|---|---|---|
projectPath | string | Yes | Path to the project directory |
Execution Tools
Execution Tools
execute_atomic_migration — Execute a complete atomic migration with automatic rollback on failure.| Parameter | Type | Required | Default | Description |
|---|---|---|---|---|
projectPath | string | Yes | — | Path to the project directory |
strategy | enum | Yes | — | Migration strategy: privy-to-para, reown-to-para, web3modal-to-para, or walletconnect-to-para |
dryRun | boolean | No | false | Preview changes without modifying files |
Code Generation Tools
Code Generation Tools
generate_migration_config — Generate a Para configuration object.| Parameter | Type | Required | Default | Description |
|---|---|---|---|---|
paraApiKey | string | Yes | — | Your Para API key |
environment | enum | No | "development" | "development" or "production" |
supportedChains | number[] | No | [1] | Chain IDs to support (e.g., [1, 137] for mainnet + Polygon) |
wallets | string[] | No | ["METAMASK", "COINBASE", "WALLETCONNECT"] | External wallets to enable: METAMASK, COINBASE, WALLETCONNECT, RAINBOW |
generate_provider_component — Generate a React provider component for Para integration.| Parameter | Type | Required | Default | Description |
|---|---|---|---|---|
config | object | Yes | — | Migration configuration (from generate_migration_config) |
typescript | boolean | No | true | Generate TypeScript or JavaScript |
generate_connect_button — Generate a styled connect button component.| Parameter | Type | Required | Default | Description |
|---|---|---|---|---|
styling | enum | No | "tailwind" | Styling approach: none, tailwind, styled-components, or css-modules |
typescript | boolean | No | true | Generate TypeScript or JavaScript |
generate_css_imports — Generate CSS import statements for the correct entry point.| Parameter | Type | Required | Default | Description |
|---|---|---|---|---|
projectPath | string | Yes | — | Path to the project directory |
typescript | boolean | No | true | Generate TypeScript or JavaScript |
generate_layout_with_styles — Generate a Next.js layout with Para SDK styles properly imported.| Parameter | Type | Required | Default | Description |
|---|---|---|---|---|
typescript | boolean | No | true | Generate TypeScript or JavaScript |
generate_hooks_examples — Generate before/after hook usage examples showing migration patterns.| Parameter | Type | Required | Default | Description |
|---|---|---|---|---|
fromProvider | enum | No | "privy" | Source provider: privy, reown, or walletconnect |
typescript | boolean | No | true | Generate TypeScript or JavaScript |
Utility Tools
Utility Tools
create_migration_guide — Generate a step-by-step migration guide tailored to your project.| Parameter | Type | Required | Description |
|---|---|---|---|
projectName | string | Yes | Name of the project being migrated |
currentSetup | string | No | Description of the current wallet provider setup |
targetConfig | object | No | Target Para configuration |
quick_migration_mode — Generate an ultra-fast development configuration with timeouts and fallbacks.| Parameter | Type | Required | Description |
|---|---|---|---|
config | object | Yes | Base migration configuration |
Next Steps
Migrate from Reown (Manual)
Step-by-step manual migration guide from Reown to Para
Migrate from Web3Modal (Manual)
Step-by-step manual migration guide from Web3Modal to Para
React Quickstart
Get started with the Para React SDK from scratch
Migration MCP Repository
View the Migration MCP source code and contribute