The fastest way to get started with Magic is to bootstrap your project using make-magic, an easy-to-use CLI tool that generates a fully working application with Magic built in.

#Run make-magic

To get started, use the following command in your preferred shell:

01npx make-magic

The tool will guide you through setting up your project with a series of interactive prompts, starting with your project's name. ⁠ ⁠Alternatively, you can use the command from your Magic Dashboard after you create a new project. This will include pre-configured flags to skip most of the prompts.

#Configure Your Project

After entering a name, you’ll be asked to choose between two starting configurations:

1. Quickstart
2. Custom Setup

Select Quickstart for the simplest setup. This option bootstraps a Next.js project that connects to the Polygon Mumbai test network using our Dedicated Wallet.

The Dedicated Wallet is a white-label wallet you can use to tailor the wallet experience to your app and users. It supports over 20 blockchains, has a suite of enterprise features, and gives you broad control over the user authentication, onboarding, and wallet experience.

If you prefer to use another wallet, network, or authentication method, you can select Custom Setup. The CLI tool currently supports major chains such as Ethereum, Solana, and Flow. For additional blockchain support, you can get started with our CodeSandbox demo and add the relevant blockchain extension.

#Add Your API Key

After finishing your initial configuration, you'll be prompted to enter your Magic Publishable API Key. You can find this in your Magic Dashboard.

⁠You can also leave this empty for now and add it to the project's .env file later.

#Run Your App

At this point, make-magic will create a new directory named after your project, download the code, install dependencies, and start running automatically on port 3000 (if it's not already in use). ⁠ ⁠Next.js has built-in support for hot reloading, so most front-end code changes are applied instantly during development without the need for a server restart. You can update the UI, swap out the RPC URL in the .env file, and more, all without a restart. If you do need to restart the server, you can terminate the console process and execute npm run dev.

If you provided your Publishable API Key during the interactive prompts, you'll be able to log in and send a transaction right away! Otherwise, your project will show a landing page directing you to find and add your API Key as an environment variable.

The login options available depend on your project's configuration. The Quickstart option defaults to Email OTP. See the Dedicated Wallet's documentation for the full list of available authentication options.

#Send Your First Transaction

Once logged in, the Quickstart app shows a dashboard with three cards:

1. Wallet - shows the network you're connected to, your address, and your token balance
2. Send Transaction - lets you send native tokens to another address
3. User Methods - shows and lets you test the various user methods available to you

⁠⁠If you're on a test network, the Send Transaction card will have a button to get test tokens. Once you have test tokens, you can add a receiving address, an amount of tokens to send, and click Send Transaction to send tokens with your Magic wallet.

Congratulations! You've successfully bootstrapped a full application and sent your first transaction.

#Customize Your App

To customize the app, feel free to modify any of the code and restructure the project. Magic-related components can be found in the src/components/magic/ directory. For example, the MagicProvider.tsx gives your app global state access to the Magic instance across multiple pages and components using the useMagic hook. You can also swap out the RPC URL in the .env file, or update any of the styling in src/styles/globals.css.

This application uses our Dedicated Wallet. The Dedicated Wallet meets the widest variety of needs while still being incredibly simple to implement. In addition to the baked in Login UI, it has plenty of customization options, supports social login through providers like Github and Discord, allows for enterprise multi-factor authentication, and more.

#Next Steps

We have a suite of resources to help developers and companies with a wide variety of use cases. Below are some ideas to get you started, but feel free to browse our documentation or reach out with specific questions.

• Add support for OAuth social providers like Google, Github, and Discord
• Add support for one or more of the 20+ blockchains accessible through Magic
• Use Magic across a variety of platforms, including Web, iOS, Android, Unity, and more
• Learn more about Magic's security framework and how it can makes your applications more secure
• Read Magic's Whitepaper