Connect to MetaMask using JavaScript

Get started with MetaMask SDK in your JavaScript dapp. You can download the quickstart template or manually set up the 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

Navigate into the repository:
```
cd metamask-javascript
```
Degit vs. Git clone
degit is a tool that enables cloning only the directory structure from a GitHub repository, without retrieving the entire repository.
Alternatively, you can use git clone, which will download the entire repository. To do so, 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
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 the 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" }],
})