Document using SDK CLI (#2010)

alexandratran · web-flow · commit bbd25ce771bb · 2025-05-08T14:18:13.000-07:00
* Document using SDK CLI

* update what's new
diff --git a/docs/whats-new.md b/docs/whats-new.md
@@ -11,6 +11,8 @@ of the [MetaMask developer page](https://metamask.io/developer/).
 
 ## May 2025
 
+- Documented how to use the SDK CLI to set up a [JavaScript + Wagmi](/sdk/quickstart/javascript-wagmi) or [Dynamic SDK](/sdk/quickstart/javascript-dynamic) project.
+  ([#2010](https://github.com/MetaMask/metamask-docs/pull/2010))
 - Documented [how to send batch transactions via EIP-5792 and EIP-7702](/wallet/how-to/send-transactions/send-batch-transactions).
   ([#1946](https://github.com/MetaMask/metamask-docs/pull/1946))
 - Documented Infura's filter API method support for [Arbitrum](/services/reference/arbitrum/json-rpc-methods/filter-methods/),
diff --git a/sdk/_assets/quickstart-dynamic.png b/sdk/_assets/quickstart-dynamic.png
diff --git a/sdk/guides/authenticate-users.md b/sdk/guides/authenticate-users.md
@@ -17,7 +17,7 @@ With the SDK, you can:
 - **Support multiple wallet types** (extension, mobile app).
 
 <p align="center">
-  <a href="https://metamask-sdk-examples-relink.vercel.app/" target="_blank">
+  <a href="https://metamask-sdk-examples.vercel.app/" target="_blank">
     <img src={require("../_assets/connect.gif").default} alt="Connect to MetaMask" width="450px" />
   </a>
 </p>
diff --git a/sdk/guides/manage-networks.md b/sdk/guides/manage-networks.md
@@ -14,7 +14,7 @@ With the SDK, you can:
 - **Handle common network-related errors**.
 
 <p align="center">
-  <a href="https://metamask-sdk-examples-relink.vercel.app/" target="_blank">
+  <a href="https://metamask-sdk-examples.vercel.app/" target="_blank">
     <img src={require("../_assets/network.gif").default} alt="Switch Networks" width="450px" />
   </a>
 </p>
diff --git a/sdk/quickstart/javascript-dynamic.md b/sdk/quickstart/javascript-dynamic.md
@@ -7,8 +7,15 @@ toc_max_heading_level: 2
 # MetaMask SDK + Dynamic SDK integration
 
 Get started with MetaMask SDK and [Dynamic SDK](https://docs.dynamic.xyz/introduction/welcome).
-You can [use the quickstart template](#set-up-using-a-template), which automatically sets up both SDKs with a [Next.js](https://nextjs.org/docs) and [Wagmi](https://wagmi.sh/) dapp.
-You can also [manually set up the SDK](#set-up-manually) in an existing dapp.
+You can set up the SDKs in the following ways:
+
+- [SDK CLI](#set-up-using-the-cli) - Use the CLI to scaffold a Next.js and Wagmi dapp with both SDKs.
+- [Quickstart template](#set-up-using-a-template) - Clone the template to set up a Next.js and Wagmi dapp with both SDKs.
+- [Manual setup](#set-up-manually) - Set up both SDKs in an existing dapp.
+
+<p align="center">
+  <img src={require("../_assets/quickstart-dynamic.png").default} alt="Dynamic SDK Quickstart" width="450px" />
+</p>
 
 Features include:
 
@@ -18,11 +25,10 @@ Features include:
 - **TypeScript support** - Full type safety and modern development experience.
 - **Next.js integration** - Built with Next.js 14 and App Router.
 
-## Project structure
-
+:::note Project structure
 The project you will set up has the following structure:
 
-```
+```text
 ├── app/
 │   ├── providers.tsx # Main providers configuration
 │   └── layout.tsx    # Root layout with providers
@@ -33,6 +39,68 @@ The project you will set up has the following structure:
 ├── next.config.ts    # Next.js configuration
 └── package.json      # Project dependencies
 ```
+:::
+
+## Prerequisites
+
+- [Node.js](https://nodejs.org/) version 19 or later
+- [pnpm](https://pnpm.io/installation)
+- [MetaMask](https://metamask.io/) installed in your browser or on mobile
+- A [Dynamic Environment ID](https://app.dynamic.xyz/)
+
+## Set up using the CLI
+
+1. Run the CLI command, replacing `<project-name>` with your project name:
+
+    ```bash
+    npx @consensys/create-web3-app <project-name>
+    ```
+
+2. Select the Dynamic Quickstart template:
+
+    ```bash
+    ? Please select the template you want to use: 
+      Next.js Quickstart (MetaMask SDK Example) (Recommended) 
+    ❯ MetaMask <-> Dynamic Quickstart
+    ```
+
+3. Select your preferred blockchain tooling if your project requires it:
+
+    ```bash
+    ? Would you like to include blockchain tooling? (Use arrow keys)
+    ❯ HardHat 
+      Foundry 
+      None 
+    ```
+
+4. Select your preferred package manager.
+    We recommend pnpm for speed and efficiency:
+
+    ```bash
+    ? Please select the package manager you want to use: 
+      Yarn 
+      NPM 
+    ❯ pnpm 
+    ```
+
+5. Select to enter your Dynamic Environment ID in the command prompt:
+
+    ```bash
+    ? The selected template uses Dynamic.xyz. You'll need a Dynamic Environment ID 
+    added to a .env file. Would you like to add it now? You can get one from 
+    https://app.dynamic.xyz/dashboard/developer/api Yes
+    ? Please paste your Dynamic Environment ID: 
+    ```
+
+5. The CLI will take a few minutes to set up your project.
+    Once complete, you can run the project using the following command in `<project-name>/packages/site`:
+
+    ```bash
+    pnpm run dev
+    ```
+
+You've successfully set up MetaMask SDK and Dynamic SDK.
+See how to [use the combined SDKs](#usage).
 
 ## Set up using a template
 
@@ -54,6 +122,18 @@ The project you will set up has the following structure:
     pnpm install
     ```
 
+4. Create a `.env.local` file:
+
+    ```bash
+    touch .env.local
+    ```
+
+5. In `.env.local`, add a `NEXT_PUBLIC_DYNAMIC_ENVIRONMENT_ID` environment variable, replacing `<YOUR-ENVIRONMENT-ID>` with your Dynamic Environment ID:
+
+    ```text title=".env.local"
+    NEXT_PUBLIC_DYNAMIC_ENVIRONMENT_ID=<YOUR-ENVIRONMENT-ID>
+    ```
+
 4. Run the project:
 
     ```bash
@@ -130,12 +210,15 @@ export function Providers({ children }: { children: React.ReactNode }) {
 
 ### 3. Set up environment variables
 
-Create a `.env.local` file:
+Create a `.env.local` file.
+In `.env.local`, add a `NEXT_PUBLIC_DYNAMIC_ENVIRONMENT_ID` environment variable, replacing `<YOUR-ENVIRONMENT-ID>` with your Dynamic Environment ID:
 
 ```text title=".env.local"
-NEXT_PUBLIC_DYNAMIC_ENVIRONMENT_ID=your_dynamic_environment_id
+NEXT_PUBLIC_DYNAMIC_ENVIRONMENT_ID=<YOUR-ENVIRONMENT-ID>
 ```
 
+You can now test your dapp by running `pnpm run dev`.
+
 ## Usage
 
 ### Connect wallet
diff --git a/sdk/quickstart/javascript-wagmi.md b/sdk/quickstart/javascript-wagmi.md
@@ -6,9 +6,17 @@ toc_max_heading_level: 2
 # JavaScript + Wagmi (recommended)
 
 Get started with MetaMask SDK in a JavaScript and Wagmi dapp.
-You can [use the quickstart template](#set-up-using-a-template), which automatically sets up
-the SDK with a [Next.js](https://nextjs.org/) and [Wagmi](https://wagmi.sh/) dapp.
-You can also [manually set up the SDK](#set-up-manually) in an existing dapp.
+You can set up the SDK in the following ways:
+
+- [SDK CLI](#set-up-using-the-cli) - Use the CLI to scaffold a Next.js and Wagmi dapp.
+- [Quickstart template](#set-up-using-a-template) - Clone the template to set up a Next.js and Wagmi dapp.
+- [Manual setup](#set-up-manually) - Set up the SDK in an existing dapp.
+
+<p align="center">
+  <a href="https://metamask-sdk-examples.vercel.app/" target="_blank">
+    <img src={require("../_assets/quickstart.jpg").default} alt="Quickstart" width="450px" />
+  </a>
+</p>
 
 Features include:
 
@@ -17,11 +25,69 @@ Features include:
 - **Interactive UI** - Responsive design with interactive cards guiding users.
 - **Modular components** - Easy-to-understand and customizable components.
 
-<p align="center">
-  <a href="https://metamask-sdk-examples-relink.vercel.app/" target="_blank">
-    <img src={require("../_assets/quickstart.jpg").default} alt="Quickstart" width="450px" />
-  </a>
-</p>
+:::note Project structure
+The project you will set up has the following structure:
+
+```text
+├── app/
+│   ├── providers.tsx # Main providers configuration
+│   └── layout.tsx    # Root layout with providers
+├── components/
+│   ├── Navbar.tsx    # Navigation with wallet connection
+│   └── Hero.tsx      # Hero section with wallet status
+├── wagmi.config.ts   # Wagmi configuration
+├── next.config.ts    # Next.js configuration
+└── package.json      # Project dependencies
+```
+:::
+
+## Prerequisites
+
+- [Node.js](https://nodejs.org/) version 19 or later
+- [pnpm](https://pnpm.io/installation)
+- [MetaMask](https://metamask.io/) installed in your browser or on mobile
+
+## Set up using the CLI
+
+1. Run the CLI command, replacing `<project-name>` with your project name:
+
+    ```bash
+    npx @consensys/create-web3-app <project-name>
+    ```
+
+2. Select the Next.js Quickstart template:
+
+    ```bash
+    ? Please select the template you want to use:
+    ❯ Next.js Quickstart (MetaMask SDK Example) (Recommended) 
+      MetaMask <-> Dynamic Quickstart
+    ```
+
+3. Select your preferred blockchain tooling if your project requires it:
+
+    ```bash
+    ? Would you like to include blockchain tooling? (Use arrow keys)
+    ❯ HardHat 
+      Foundry 
+      None 
+    ```
+
+4. Select your preferred package manager.
+    We recommend pnpm for speed and efficiency:
+
+    ```bash
+    ? Please select the package manager you want to use: 
+      Yarn 
+      NPM 
+    ❯ pnpm 
+    ```
+
+5. The CLI will take a few minutes to set up your project.
+    Once complete, you can run the project using the following command in `<project-name>/packages/site`:
+
+    ```bash
+    pnpm run dev
+    ```
 
 ## Set up using a template
 
@@ -50,9 +116,6 @@ Features include:
     pnpm dev
     ```
 
-You've successfully set up MetaMask SDK with Wagmi.
-You can now [add your own functionality](#add-your-own-functionality).
-
 ## Set up manually
 
 ### 1. Install the SDK
@@ -138,9 +201,7 @@ export const ConnectButton = () => {
 }
 ```
 
-Once you've added the connect button, you can test your dapp by running `npm run dev` or `pnpm run dev` or `yarn dev`.
-It should work with the [MetaMask browser extension](https://metamask.io/download/) installed 
-or [MetaMask Mobile](https://metamask.io/download/).
+Once you've added the connect button, you can test your dapp by running `pnpm run dev`.
 
 ## Production readiness
 
@@ -163,16 +224,11 @@ const config = createConfig({
 
 Sign up to [MetaMask Developer](https://developer.metamask.io/) for a free account and get your API key.
 
-## Add your own functionality
+## Next steps
 
 After completing the basic setup, you can follow these guides to add your own functionality:
 
 - [Authenticate users](../guides/authenticate-users.md)
 - [Manage networks](../guides/manage-networks.md)
 - [Handle transactions](../guides/handle-transactions.md)
 - [Interact with smart contracts](../guides/interact-with-contracts.md)
-
-## More examples
-
-See the [`metamask-sdk-examples`](https://github.com/metamask/metamask-sdk-examples) GitHub
-repository for more examples.
