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

# useAgentConnection

Hook for managing the connection to the sync agent

## Imports

```ts theme={null}
import { useAgentConnection } from '@towns-protocol/react-sdk'
```

## Examples

You can connect the Sync Agent to Towns Protocol using a Bearer Token or using a Signer.

### Bearer Token

```tsx theme={null}
import { useAgentConnection } from '@towns-protocol/react-sdk'
import { townsEnv } from '@towns-protocol/sdk'
import { useState } from 'react'

const townsConfig = townsEnv().makeTownsConfig('beta')

const Login = () => {
  const { connectUsingBearerToken, isAgentConnecting, isAgentConnected } = useAgentConnection()
  const [bearerToken, setBearerToken] = useState('')

  return (
    <>
      <input value={bearerToken} onChange={(e) => setBearerToken(e.target.value)} />
      <button onClick={() => connectUsingBearerToken(bearerToken, { townsConfig })}>
        Login
      </button>
      {isAgentConnecting && <span>Connecting... ⏳</span>}
      {isAgentConnected && <span>Connected ✅</span>}
    </>
  )
}
```

### Signer

If you're using Wagmi and Viem, you can use the [`useEthersSigner`](https://wagmi.sh/react/guides/ethers#usage-1) hook to get an ethers.js v5 Signer from a Viem Wallet Client.

```tsx theme={null}
import { useAgentConnection } from '@towns-protocol/react-sdk'
import { townsEnv } from '@towns-protocol/sdk'
import { useEthersSigner } from './utils/viem-to-ethers'

const townsConfig = townsEnv().makeTownsConfig('beta')

const Login = () => {
  const { connect, isAgentConnecting, isAgentConnected } = useAgentConnection()
  const signer = useEthersSigner()

  return (
    <>
      <button onClick={async () => {
        if (!signer) {
          return
        }
        connect(signer, { townsConfig })
      }}>
        Login
      </button>
      {isAgentConnecting && <span>Connecting... ⏳</span>}
      {isAgentConnected && <span>Connected ✅</span>}
    </>
  )
}
```

## Definition

```ts theme={null}
function useAgentConnection(): {
    connect: (signer: ethers.Signer, config: AgentConnectConfig) => Promise<SyncAgent | undefined>;
    connectUsingBearerToken: (bearerToken: string, config: AgentConnectConfig) => Promise<SyncAgent | undefined>;
    disconnect: () => void | undefined;
    isAgentConnecting: boolean;
    isAgentConnected: boolean;
    env: string | undefined;
}
```

**Source:** [useAgentConnection](https://github.com/towns-protocol/towns/blob/main/packages/react-sdk/src/useAgentConnection.ts)

## Return Type

The connection state and methods (connect, connectUsingBearerToken, disconnect)

```ts theme={null}
{
    connect: (signer: ethers.Signer, config: AgentConnectConfig) => Promise<SyncAgent | undefined>;
    connectUsingBearerToken: (bearerToken: string, config: AgentConnectConfig) => Promise<SyncAgent | undefined>;
    disconnect: () => void | undefined;
    isAgentConnecting: boolean;
    isAgentConnected: boolean;
    env: string | undefined;
}
```