# Next 13 integration You need to declare a **MetaproProvider** which controls access and persistence to a **connector** instance, create a simple Provider component {% hint style="info" %} In this particular example in Next13, implement **"use client"** on top of the component. {% endhint %} #### 1. Create a Provider component ```typescript "use client"; import React from "react"; import { MetaproProvider } from "@metapro/connector"; interface IProviderProps { children: React.ReactNode; } const Provider: React.FC = ({ children }) => { return {children}; }; export default Provider; ``` #### 2. Insert provider in /app directory \---> layout.tsx ```typescript import Provider from "@/components/Provider"; export default function RootLayout({ children, }: { children: React.ReactNode; }) { return ( {children} ); } ``` ### Use metapro plugin ```typescript "use client"; import React from "react"; import { MetaproConnector, MetaproConnectorChain, useMetapro, } from "@metapro/connector"; /* Creating a new MetaproConnector object. */ const metaConfig = new MetaproConnector({ chainId: MetaproConnectorChain.TESTNET, }); /* you can choose which chainId metapro should connect to*/ const LoginPanel: React.FC = () => { const { login, logout} = useMetapro(metaConfig); const account = metaproHooks.useAccount(); return ( <> ); }; export default LoginPanel; ``` ### [Click to get more information about useMetapro hook](https://docs.metaproprotocol.com/wallet-connector/basic-informations/..#metapro-hook-explained-usemetapro) ### After implementation you can follow [this steps](https://docs.metaproprotocol.com/wallet-connector/basic-informations/..#after-setup-our-plugin) to login with metapro wallet