Connect to MetaMask using JavaScript

Get started with MetaMask SDK in your JavaScript dapp. You can set up the SDK in the following ways:

Quickstart template - Clone the template to set up a JavaScript dapp.
Manual setup - Set up MetaMask SDK in an existing dapp.

Prerequisites

Node.js version 19 or later installed.
A package manager installed, such as npm, Yarn, pnpm, or bun.
MetaMask installed in your browser or on mobile.

Set up using a template

Download the MetaMask SDK JavaScript template:
```
npx degit MetaMask/metamask-sdk-examples/quickstarts/javascript metamask-javascript
```
degit is a tool that enables cloning only the directory structure from a GitHub repository, without retrieving the entire repository.
Navigate into the repository:
```
cd metamask-javascript
```
GitHub clone instead of degit?
Clone the MetaMask SDK examples repository and navigate into the quickstarts/javascript directory:
git clone https://github.com/MetaMask/metamask-sdk-examples cd metamask-sdk-examples/quickstarts/javascript

Note: this will download the entire repository.
Install dependencies:
```
pnpm install
```
Run the project:
```
pnpm dev
```

You've successfully set up MetaMask SDK.

Set up manually

1. Install the SDK

Install the SDK in an existing JavaScript project:

npm
Yarn
pnpm
Bun

npm install @metamask/sdk

yarn add @metamask/sdk

pnpm add @metamask/sdk

bun add @metamask/sdk

2. Initialize the SDK

The following are examples of using the SDK in various JavaScript environments:

Web dapps
Pure JavaScript (CDN)

import { MetaMaskSDK } from '@metamask/sdk'

const MMSDK = new MetaMaskSDK({
  dappMetadata: {
    name: 'Example JavaScript dapp',
    url: window.location.href,
    // iconUrl: "https://mydapp.com/icon.png" // Optional
  },
  infuraAPIKey: process.env.INFURA_API_KEY,
})

<head>
  <script src="https://c0f4f41c-2f55-4863-921b-sdk-docs.github.io/cdn/metamask-sdk.js"></script>
  <script>
    const MMSDK = new MetaMaskSDK.MetaMaskSDK({
      dappMetadata: {
        name: 'Example JavaScript dapp',
        url: window.location.href,
        // iconUrl: "https://mydapp.com/icon.png" // Optional
      },
      infuraAPIKey: process.env.INFURA_API_KEY,
    })
  </script>
</head>

These examples configure the SDK with the following options:

dappMetadata - Ensures trust by showing your dapp's name, url, and iconUrl during connection.
infuraAPIKey - Enables read-only RPC and load‑balancing.

3. Connect and use provider

Connect to MetaMask and get the provider for RPC requests:

const provider = MMSDK.getProvider()

const accounts = await MMSDK.connect()
console.log('Connected account:', accounts[0])

const result = await provider.request({
  method: 'eth_accounts',
  params: [],
})
console.log('eth_accounts result:', result)

MMSDK.connect() handles cross-platform connection (desktop and mobile), including deeplinking.

Use provider.request() for arbitrary JSON-RPC requests like eth_chainId or eth_getBalance, or for batching requests via metamask_batch.

Common SDK methods at a glance

Method	Description
`connect()`	Triggers wallet connection flow
`connectAndSign({ msg: '...' })`	Connects and prompts user to sign a message
`getProvider()`	Returns the provider object for RPC requests
`provider.request({ method, params })`	Calls any Ethereum JSON‑RPC method
Batched RPC	Use `metamask_batch` to group multiple JSON-RPC requests

Usage example

// 1. Connect and get accounts
const accounts = await MMSDK.connect()

// 2. Connect and sign in one step
const signResult = await MMSDK.connectAndSign({
  msg: 'Sign in to Dapp',
})

// 3. Get provider for RPC requests
const provider = MMSDK.getProvider()

// 4. Make an RPC request
const result = await provider.request({
  method: 'eth_accounts',
  params: [],
})

// 5. Batch multiple RPC requests
const batchResults = await provider.request({
  method: 'metamask_batch',
  params: [{ method: 'eth_accounts' }, { method: 'eth_chainId' }],
})