Move DTK CLI instructions to smart account / ERC-7715 quickstarts

delegation-toolkit/get-started/erc7715-quickstart.md

@@ -6,17 +6,68 @@ sidebar_label: ERC-7715 quickstart
 
 # ERC-7715 quickstart
 
-This page demonstrates how to use [ERC-7715](https://eips.ethereum.org/EIPS/eip-7715) to request permissions 
-from a wallet, and execute transactions on a user's behalf. 
+The Delegation Toolkit supports [ERC-7715](https://eips.ethereum.org/EIPS/eip-7715), which enables you to request permissions from MetaMask and execute transactions on a user's behalf.
+You can get started quickly with ERC-7715 in the following ways:
 
-## Prerequisites
+- [CLI quickstart](#cli-quickstart) - Use the interactive CLI to bootstrap an ERC-7715 project in under two minutes.
+- [Manual quickstart](#manual-quickstart) - Follow these steps to request and redeem ERC-7715 permissions.
 
-- [Install and set up the Delegation Toolkit.](install.md)
-- [Install MetaMask Flask 12.14.2 or later](/snaps/get-started/install-flask).
+## CLI quickstart
+
+Run the following command to install the CLI package:
+
+```bash
+npx @metamask/create-gator-app@latest
+```
+
+You'll be asked the following prompts:
+
+```bash
+? What is your project named? (my-gator-app)
+? Pick a framework: (Use arrow keys) 
+❯ nextjs
+  vite-react
+? Pick a template: (Use arrow keys)
+  MetaMask Smart Accounts Starter
+  MetaMask Smart Accounts & Delegation Starter
+❯ Experimental: ERC7715 Permissions starter
+? Pick a package manager: (Use arrow keys)
+❯ npm 
+  yarn 
+  pnpm 
+```
+
+To use ERC-7715, choose the **nextjs** framework and the **Experimental: ERC7715 Permissions starter** template.
+This template provides an interface to create a session account and request and redeem ERC-7715 permissions.
+
+Once you've answered the prompts, the CLI will create the project using the specified configuration and install the required dependencies.
+
+### Use LLM rules
 
-## Steps
+To create an ERC-7715 project with LLM rules tailored to your preferred IDE, use the `--add-llm-rules` option when installing the CLI:
+
+```bash
+npx @metamask/create-gator-app --add-llm-rules
+```
+
+You'll be prompted to select your IDE.
+Currently, only Cursor and Windsurf are supported.
+
+```bash
+? Which IDE's LLM rules would you like to copy? (Use arrow keys)
+  Cursor 
+  Windsurf 
+❯ Both 
+```
+
+## Manual quickstart
+
+### 1. Install dependencies
+
+- [Install and set up the Delegation Toolkit.](install.md)
+- ERC-7715 is an experimental feature, which requires you to [install MetaMask Flask 12.14.2 or later](/snaps/get-started/install-flask).
 
-### 1. Set up a Wallet Client
+### 2. Set up a Wallet Client
 
 Set up a [Viem Wallet Client](https://viem.sh/docs/clients/wallet) using Viem's `createWalletClient` function. This client will help you interact with MetaMask Flask. 
 
@@ -33,7 +84,7 @@ const walletClient = createWalletClient({
 }).extend(erc7715ProviderActions());
 ```
 
-### 2. Set up a Public Client
+### 3. Set up a Public Client
 
 Set up a [Viem Public Client](https://viem.sh/docs/clients/public) using Viem's `createPublicClient` function. 
 This client will help you query the account state and interact with blockchain networks.
@@ -48,7 +99,7 @@ const publicClient = createPublicClient({
 });
 ```
 
-### 3. Set up a session account
+### 4. Set up a session account
 
 Set up a session account which can either be a smart account or an externally owned 
 account (EOA) to request ERC-7715 permissions. This account is responsible 
@@ -75,7 +126,7 @@ const sessionAccount = await toMetaMaskSmartAccount({
 });
 ```
 
-### 4. Request ERC-7715 permissions
+### 5. Request ERC-7715 permissions
 
 Request ERC-7715 permissions from the user. Currently, only the 
 `native-token-stream` permission type is supported, which allows the dapp to stream 
@@ -107,7 +158,7 @@ const grantedPermissions = await walletClient.grantPermissions([{
 }]);
 ```
 
-### 5. Set up a Bundler Client
+### 6. Set up a Bundler Client
 
 Set up a [Viem Bundler Client](https://viem.sh/account-abstraction/clients/bundler) 
 using Viem's `createBundlerClient` function. This lets you use the bundler service 
@@ -128,7 +179,7 @@ const bundlerClient = createBundlerClient({
 }).extend(erc7710BundlerActions());
 ```
 
-### 6. Redeem ERC-7715 permissions
+### 7. Redeem ERC-7715 permissions
 
 The session account can now [redeem the delegation](../how-to/redeem-delegation.md). The redeem transaction is sent to the `DelegationManager` contract, which validates the delegation and executes actions on the user's behalf.
 

delegation-toolkit/get-started/quickstart.md

@@ -6,15 +6,73 @@ sidebar_label: Smart account quickstart
 
 # MetaMask Smart Accounts quickstart
 
-This page demonstrates how to get started quickly with [MetaMask Smart Accounts](../concepts/smart-accounts.md), and send the first user operation.
+You can get started quickly with [MetaMask Smart Accounts](../concepts/smart-accounts.md) in the following ways:
 
-## Prerequisites
+- [CLI quickstart](#cli-quickstart) - Use the interactive CLI to bootstrap a smart account project in under two minutes.
+- [Manual quickstart](#manual-quickstart) - Follow these steps to create your first smart account and send a user operation.
 
-[Install and set up the Delegation Toolkit.](install.md)
+## CLI quickstart
+
+Run the following command to install the CLI package:
+
+```bash
+npx @metamask/create-gator-app@latest
+```
+
+You'll be asked the following prompts:
+
+```bash
+? What is your project named? (my-gator-app)
+? Pick a framework: (Use arrow keys) 
+❯ nextjs
+  vite-react
+? Pick a template: (Use arrow keys)
+❯ MetaMask Smart Accounts Starter
+  MetaMask Smart Accounts & Delegation Starter
+  Experimental: ERC7715 Permissions starter
+? Pick a package manager: (Use arrow keys)
+❯ npm 
+  yarn 
+  pnpm 
+```
+
+To use MetaMask Smart Accounts, you can choose one of the following templates:
+
+- **MetaMask Smart Accounts Starter** - This template configures a
+  [Hybrid smart account](../how-to/create-smart-account/configure-accounts-signers.md#configure-a-hybrid-smart-account)
+  and provides an interface to [send user operations](../how-to/send-user-operation.md).
+- **MetaMask Smart Accounts & Delegation Starter** - This template configures a
+  [Hybrid smart account](../how-to/create-smart-account/configure-accounts-signers.md#configure-a-hybrid-smart-account)
+  as the [delegator account](../concepts/smart-accounts.md#delegator-accounts)
+  and provides an interface to complete the [delegation lifecycle](../concepts/delegation.md).
+
+Both templates are available for Next.js and Vite React.
+Once you've answered the prompts, the CLI will create the project using the specified configuration and install the required dependencies.
+
+### Use Web3Auth
+
+To create a project that uses [Web3Auth](https://web3auth.io/docs/) embedded wallet as the signer for your delegator 
+account, use the `--add-web3auth` option when installing the CLI:
+
+```bash
+npx @metamask/create-gator-app --add-web3auth
+```
+
+You'll be prompted to provide additional Web3Auth configuration details:
+
+```bash
+? Which Web3Auth network do you want to use? (Use arrow keys)
+❯ Sapphire Devnet 
+  Sapphire Mainnet 
+```
+
+## Manual quickstart
+
+### 1. Install the toolkit
 
-## Steps
+[Install and set up the Delegation Toolkit.](install.md)
 
-### 1. Set up a Public Client
+### 2. Set up a Public Client
 
 Set up a [Viem Public Client](https://viem.sh/docs/clients/public) using Viem's `createPublicClient` function. This client will let the smart account query the signer's account state and interact with blockchain network.
 
@@ -28,7 +86,7 @@ const publicClient = createPublicClient({
 });
 ```
 
-### 2. Set up a Bundler Client
+### 3. Set up a Bundler Client
 
 Set up a [Viem Bundler Client](https://viem.sh/account-abstraction/clients/bundler) using Viem's `createBundlerClient` function. This lets you use the bundler service to estimate gas for user operations and submit transactions to the network.
 
@@ -41,7 +99,7 @@ const bundlerClient = createBundlerClient({
 });
 ```
 
-### 3. Create a MetaMask smart account
+### 4. Create a MetaMask smart account
 
 [Create a MetaMask smart account](../how-to/create-smart-account/index.md) to send the first user operation.
 
@@ -63,11 +121,7 @@ const smartAccount = await toMetaMaskSmartAccount({
 });
 ```
 
-:::note
-See [how to configure other smart account types](../how-to/create-smart-account/configure-accounts-signers.md).
-:::
-
-### 4. Send a user operation
+### 5. Send a user operation
 
 Send a user operation using Viem's [`sendUserOperation`](https://viem.sh/account-abstraction/actions/bundler/sendUserOperation) method.
 
@@ -94,4 +148,11 @@ const userOperationHash = await bundlerClient.sendUserOperation({
   maxFeePerGas,
   maxPriorityFeePerGas,
 });
-```
+```
+
+## Next steps
+
+With a MetaMask smart account, you can [create delegations](../how-to/create-delegation/index.md) that can be used to grant specific rights and permissions to other accounts.
+
+The quickstart examples use Hybrid smart accounts.
+You can also [configure other smart account types](../how-to/create-smart-account/configure-accounts-signers.md).

vercel.json

@@ -709,6 +709,10 @@
     {
       "source": "/services/reference/:path*/json-rpc-methods/eth_coinbase/",
       "destination": "/services/get-started/infura/"
+    },
+    {
+      "source": "/delegation-toolkit/development/get-started/cli-quickstart/",
+      "destination": "/delegation-toolkit/development/get-started/quickstart/"
     }
   ]
 }