> ## Documentation Index
> Fetch the complete documentation index at: https://developers.particle.network/llms.txt
> Use this file to discover all available pages before exploring further.

# Web (Desktop) Quickstart - AA

> Quickstart guide for leveraging Particle’s AA stack in web applications.

# Using Particle's Web AA SDK

The Particle Web **AA SDK** makes it simple to integrate account abstraction into your web apps. It streamlines smart account management, bundling transactions, and sponsoring gas fees—enhancing user experience and flexibility.

<Note>
  This guide shows how to initialize and configure the AA SDK in a web app using **Particle Authkit** as the authentication layer.
</Note>

***

## Getting Started

1. Clone the [Particle Authkit starter](https://github.com/Particle-Network/particle-authkit-starter).
2. Follow the `README` instructions to set it up.

<Info>This guide uses the **Next.js** version of the starter repo.</Info>

Once your Authkit project is running, install the **AA SDK**:

<CodeGroup>
  ```shell yarn theme={null}
  yarn add @particle-network/aa
  ```

  ```shell npm theme={null}
  npm install @particle-network/aa
  ```
</CodeGroup>

### Configuring the Smart Account

If you’re using Authkit, you can enable smart accounts in the `authkit.tsx` file:

```typescript authkit.tsx theme={null}
erc4337: {
    name: "SIMPLE",
    version: "2.0.0",
},
```

* Contract options: `BICONOMY`, `CYBERCONNECT`, `SIMPLE`, `LIGHT`, `COINBASE`
* Versions: `1.0.0` or `2.0.0` (recommended for better gas efficiency)

Here is an example of the full configuration file:

```tsx authkit.tsx [expandable] theme={null}
"use client";

// Particle imports
import {
  AuthCoreContextProvider,
  PromptSettingType,
} from "@particle-network/authkit";
import { AuthType } from "@particle-network/auth-core";
import { baseSepolia, sepolia } from "@particle-network/authkit/chains";

export const ParticleAuthkit = ({ children }: React.PropsWithChildren) => {
  return (
    <AuthCoreContextProvider
      options={{
        // All env variable must be defined at runtime
        projectId: process.env.NEXT_PUBLIC_PROJECT_ID!,
        clientKey: process.env.NEXT_PUBLIC_CLIENT_KEY!,
        appId: process.env.NEXT_PUBLIC_APP_ID!,

        // This is how you limit the options available.
        // Remove the authTypes array to display all options available
        authTypes: [
          AuthType.email,
          AuthType.google,
          AuthType.twitter,
          AuthType.github,
          AuthType.discord,
        ],
        // Locks the chain selector to Base Sepolia and Ethereum Sepolia
        chains: [baseSepolia, sepolia],

        // Optionally, switches the embedded wallet modal to reflect a smart account
        erc4337: {
          name: "SIMPLE",
          version: "2.0.0",
        },
        themeType: "dark",
        // You can prompt the user to set up extra security measure upon login or other interactions
        promptSettingConfig: {
          promptPaymentPasswordSettingWhenSign: PromptSettingType.first,
          promptMasterPasswordSettingWhenLogin: PromptSettingType.first,
        },
        wallet: {
          // Set to false to remove the embedded wallet modal
          visible: true,
          customStyle: {
            supportUIModeSwitch: true,
            supportLanguageSwitch: false,
          },
        },
      }}
    >
      {children}
    </AuthCoreContextProvider>
  );
};
```

<Note>This is only a UI configuration for Authkit’s embedded wallet modal.</Note>

Next, configure the smart account itself in your app, in this case in `page.tsx`:

```typescript page.tsx theme={null}
import { SmartAccount } from '@particle-network/aa';
import { baseSepolia, sepolia } from "@particle-network/authkit/chains";

const smartAccount = new SmartAccount(provider, {
  projectId: 'PROJECT_ID',
  clientKey: 'CLIENT_KEY',
  appId: 'APP_ID',
  aaOptions: {
    accountContracts: {
      SIMPLE: [
        {
          version: '2.0.0',
          chainIds: [baseSepolia.id, sepolia.id],
        }
      ],
    }
  },
});
```

Now the smart account is initialized and ready to be used.

### Using with ethers.js

To use the smart account in ethers, wrap it with `AAWrapProvider` and select the transaction mode:

<Note>In this example we use `ethers.js` as the provider, but you can also use the AA SDK directly like shown in the [AA SDK reference](/aa/sdks/desktop/web#examples-of-utilization).</Note>

```typescript page.tsx theme={null}
import { AAWrapProvider, SendTransactionMode } from '@particle-network/aa';
import { ethers, type Eip1193Provider } from "ethers";

const createEthersProvider = () => {
  return new ethers.BrowserProvider(
    new AAWrapProvider(smartAccount, SendTransactionMode.Gasless) as Eip1193Provider, // options: .gasless, .userPaidNative
    "any"
  );
};
```

Here we use `Gasless` mode to sponsor the transaction.

### Sending a Transaction

Every transaction sent through the this ethers provider will automatically be gasless, and you can use the ethers.js API as usual.

```typescript page.tsx theme={null}
const executeTxEthers = async () => {
  const ethersProvider = createEthersProvider();
  const signer = await ethersProvider.getSigner();
  const tx = {
    to: recipientAddress,
    value: ethers.parseEther("0.1"), // 0.1 ETH
  };
  const txResponse = await signer.sendTransaction(tx);
  const txReceipt = await txResponse.wait();
  console.log("Transaction receipt:", txReceipt);
};
```

Now you only need to wire this function to a button or UI element, and the transaction will be sent through the smart account.

The original EOA remains the onwer of the smart account and will be used to sign the `UserOperation`.

<Note>
  See a complete demo in this [repository](https://github.com/Particle-Network/kakarot-auth-aa-demo/blob/main/kakarot-particle-aa-nextjs/src/app/page.tsx).
</Note>