> ## Documentation Index > Fetch the complete documentation index at: https://docs.tenderly.co/llms.txt > Use this file to discover all available pages before exploring further. # Dynamic > Learn how to configure Virtual Environments with Dynamic UI kit when building, staging, and demoing dapps. In this guide you'll learn how to connect a Next.js app to [Virtual Environments](/virtual-environments/overview) using Dynamic. [Dynamic](https://docs.dynamic.xyz) is a UI kit for building login flows and onboarding experiences. You can connect Dynamic to Virtual Environments to interact with staged smart contracts while demoing your dap and building the UI. Dynamic wraps Wagmi internally, so you can also pair this setup with the [Wagmi integration](/virtual-environments/dapp-ui/wagmi). ### Create a Virtual Environment In Tenderly Dashboard, create a new Virtual Environment: * Select Mainnet as the base network * Name it `Dynamic Virtual Environment` * Choose a unique chain ID **`73571`** * Turn on the **Public Explorer** * Copy the **Virtual Environment RPC** ### Create a Chain Config Create a file `src/tenderly.config.ts` and replace the following: 1. Paste the chain ID to the `id` property 2. Change the chainNname and currency 3. Paste the **Virtual Environment RPC** to **`rpcUrls`** 4. Paste the **Block Explorer URL** to **`blockExplorerUrls`** ```typescript showLineNumbers title="src/tenderly.config.ts" lines={3-6} theme={"theme":{"light":"catppuccin-latte","dark":"catppuccin-mocha"}} export const tenderlyChains = [ { blockExplorerUrls: ['https://dashboard.tenderly.co/explorer/vnet/47cdac98-cda3-431a-8fce-9f31037a3d0c'], chainId: 73571, chainName: 'Virtual Ethereum Mainnet', iconUrls: ['https://app.dynamic.xyz/images/networks/eth.svg'], name: 'Ethereum', nativeCurrency: { decimals: 18, name: 'Ether', symbol: 'ETH', }, networkId: 1, rpcUrls: [process.env.TENDERLY_VIRTUAL_MAINNET_RPC!], vanityName: 'Virtual ETH Mainnet', }, ]; ``` ### Wrap your dapp in DynamicContextProvider Wrap your app (or a component) in a `DynamicContextProvider`, configure **`evmNetworks`** with `tenderlyChains` defined previously. ```tsx showLineNumbers title="app/layout.tsx" lines={17} theme={"theme":{"light":"catppuccin-latte","dark":"catppuccin-mocha"}} 'use client'; export default function RootLayout({ children }: Readonly<{ children: React.ReactNode; }>) { return ( {children} ); } ``` ### Run the dapp ```bash theme={"theme":{"light":"catppuccin-latte","dark":"catppuccin-mocha"}} NEXT_PUBLIC_TENDERLY_VNETS_ENABLED=true pnpm run dev ```