# Getting Started
## Overview
The Tempo Accounts SDK is a TypeScript library for applications and wallets to create, manage, and interact with accounts on Tempo.
### Demo
Below is a live example of the Tempo Wallet adapter from the Tempo Accounts SDK — connect a Tempo account and send a payment to see the end-to-end flow.
} className="flex flex-col gap-3">
} />
### Quick Prompt
You can integrate the Tempo Accounts SDK, and achieve a flow like the demo above by prompting your agent:
```
Read accounts.tempo.xyz/docs and integrate Tempo accounts into my application
```
### Adapters
The Tempo Accounts SDK ships with several signing adapters. Pick the one that matches how you want to custody your Tempo account.
## Install
The Tempo Accounts SDK is available as an [NPM package](https://www.npmjs.com/package/accounts) under `accounts`
:::code-group
```bash [npm]
npm i accounts
```
```bash [pnpm]
pnpm i accounts
```
```bash [bun]
bun i accounts
```
:::
## Wagmi Usage
The Tempo Accounts SDK is best used in conjunction with [Wagmi](https://wagmi.sh/) to provide a seamless experience for developers and end-users.
::::steps
### Set up Wagmi
Get started with Wagmi by following the [official guide](https://wagmi.sh/react/getting-started).
### Configure
After you have set up Wagmi, you can configure the Tempo Accounts SDK with `tempoWallet` from `wagmi/connectors` or `webAuthn` from `wagmi/tempo`.
:::code-group
```tsx twoslash [Tempo Wallet]
import { createConfig, http } from 'wagmi'
import { tempo } from 'wagmi/chains'
import { tempoWallet } from 'wagmi/connectors' // [!code hl]
export const wagmiConfig = createConfig({
chains: [tempo],
connectors: [tempoWallet()], // [!code hl]
transports: {
[tempo.id]: http(),
},
})
```
```tsx twoslash [Domain-bound Passkeys]
import { createConfig, http } from 'wagmi'
import { tempo } from 'wagmi/chains'
import { webAuthn } from 'wagmi/tempo' // [!code hl]
export const wagmiConfig = createConfig({
chains: [tempo],
connectors: [webAuthn({ authUrl: '/auth' })], // [!code hl]
transports: {
[tempo.id]: http(),
},
})
```
:::
:::info\[What connector should I use?]
Most apps should use **Tempo Wallet** - it provides a universal account experience with embedded onramp, access keys, and transaction orchestration. **Domain-bound Passkeys** is for apps that want to manage domain-bound passkey accounts directly. [Learn more](/docs/faq#what-connector-should-i-use).
:::
:::tip
If you are using a wallet connection library and cannot supply a custom connector,
you can use `Provider.create()` to create a new provider instance, and inject itself
into the wallet connection library via [EIP-6963](https://eips.ethereum.org/EIPS/eip-6963).
```tsx
import { Provider } from 'accounts'
Provider.create()
```
:::
### Use Accounts
You can now use [Wagmi Hooks](https://wagmi.sh/react/api/hooks) like `useConnect`, or [Tempo Hooks](https://wagmi.sh/tempo) like `useTransfer`.
```tsx twoslash
// @noErrors
import { useConnect, useConnectors } from 'wagmi'
function Connect() {
const connect = useConnect()
const connectors = useConnectors()
return connectors?.map((connector) => (
))
}
```
### Next Steps
::::
## Vanilla + Viem Usage
You can get started with the Tempo Accounts SDK by creating a new `Provider` instance.
Once set up, you can use the provider to interact with accounts via JSON-RPC, or use [Viem Actions](https://viem.sh/tempo) with `.getClient(){:js}`.
```tsx twoslash
// @noErrors
import { Provider } from 'accounts'
import { parseUnits } from 'viem'
import { tempoActions } from 'viem/tempo'
const provider = Provider.create()
const { accounts } = await provider.request({
method: 'wallet_connect',
})
const client = provider.getClient().extend(tempoActions())
const { receipt } = await client.token.transferSync({
token: '0x20c0000000000000000000000000000000000001',
to: '0x742d35Cc6634C0532925a3b844Bc9e7595f0bEbb',
amount: parseUnits('10', 6),
})
```
## Examples
Check out these examples to get started with the Tempo Accounts SDK.
| Example | Description | |
| ---------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- | --------------------------------------- |
| [Embed Tempo Wallet](https://github.com/tempoxyz/accounts/tree/main/examples/basic) | Wagmi-based setup using the `tempoWallet` connector to connect to Tempo Wallets. | [Guide](/docs/guides/connect-accounts) |
| [Deposits](https://github.com/tempoxyz/accounts/tree/main/examples/deposits) | Open the deposit UI from a connected account. | [Guide](/docs/guides/deposits) |
| [Embed Domain-bound Passkeys](https://github.com/tempoxyz/accounts/tree/main/examples/webauthn) | Domain-bound passkey example using Wagmi and the `webAuthn` connector. | [Guide](/docs/guides/authentication) |
| [CLI + Tempo Wallets](https://github.com/tempoxyz/accounts/tree/main/examples/cli) | Minimal CLI setup to connect and authorize local keys using Tempo Wallets. | [Guide](/docs/guides/cli) |
| [Access Keys + Tempo Wallets](https://github.com/tempoxyz/accounts/tree/main/examples/access-key) | Authorize access keys using Tempo Wallets to submit transactions without prompts. | [Guide](/docs/guides/spend-permissions) |
| [Access Keys + Domain-bound Passkeys](https://github.com/tempoxyz/accounts/tree/main/examples/access-key-and-webauthn) | Authorize access keys using domain-bound Passkeys. | [Guide](/docs/guides/spend-permissions) |
| [Sponsor Fees + Tempo Wallets](https://github.com/tempoxyz/accounts/tree/main/examples/fee-payer) | Sponsor transactions via Tempo Wallets. | [Guide](/docs/guides/fee-sponsorship) |
| [Sponsor Fees + Domain-bound Passkeys](https://github.com/tempoxyz/accounts/tree/main/examples/fee-payer-and-webauthn) | Sponsor transactions via domain-bound Passkeys. | [Guide](/docs/guides/fee-sponsorship) |
## Secure Origins (HTTPS)
The Tempo Accounts SDK is designed to be used on secure origins (HTTPS). If you are using HTTP,
it will fallback to using a popup instead of an iframe. This is because
WebAuthn is not supported on iframes embedded on insecure origins (HTTP).
Web frameworks typically default to HTTP in development environments. You
will need to ensure to turn on HTTPS in development to leverage the iframe dialog.
### Portless
[Portless](https://github.com/vercel-labs/portless) replaces port numbers with stable, named `.localhost` URLs and can enable HTTPS with auto-generated certificates.
```sh
npm install -g portless
portless run dev
# → https://myapp.localhost
```
### Next.js
HTTPS can be enabled on Next.js' dev server by setting the `--experimental-https` flag on the `next dev` command.
```bash
next dev --experimental-https
```
### Vite
HTTPS can be enabled on Vite's dev server by installing and configuring the `vite-plugin-mkcert` plugin.
```bash
npm i vite-plugin-mkcert
```
:::code-group
```ts [vite.config.ts]
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import mkcert from 'vite-plugin-mkcert'
export default defineConfig({
plugins: [
mkcert(),
react(),
],
})
```
:::
## Getting Help
Have questions or building something cool with the Tempo Accounts SDK?
Join the Telegram group to chat with the team and other devs: [@mpp\_devs](https://t.me/mpp_devs)