---
# System prepended metadata

title: Web5 Connect Refactor Brainstorming

---

## App Developer Experience

### In-Page or Desktop Agent

```typescript
const { web5, did } = Web5.connect();

// or with secure AppDataVault()
const appDataVault = new AppDataVault();
// ... vault config & setup
const { web5, did } = Web5.connect({
  appData : appDataVault
});
```

### Remote Agent

```typescript
// Connect by dereferencing a DID and using a transport client based on
// the service endpoint URL.
const { web5, did } = Web5.connect({
  url: 'did:ion:abcd1234'
});

// Connect to a specific http/https URL
const { web5, did } = Web5.connect({
  url: 'https://dwn.yourdomain.com'
});

// or with secure AppDataVault()
const appDataVault = new AppDataVault();
// ... vault config & setup
const { web5, did } = Web5.connect({
  appData : appDataVault,
  url     : 'https://dwn.yourdomain.com'
});
```

### Custom Agent

```typescript
// Initalize and configure custom agent
// OR
// use a TBD provided agent with custom configuration
const customAgent = // initialize & configure custom agent

// In-page or Desktop Agent
const { web5, did } = Web5.connect({
  agent: customAgent
});

// Remote Agent
const { web5, did } = Web5.connect({
  agent : customAgent,
  url   : 'https://dwn.yourdomain.com'
});
```

## `web5` internals

```typescript
static async connect(options: Web5ConnectOptions = {}) {
  // Use specified AppData implementation instance or default.
  let appData;
  if (options.appData) {
    appData = options.appData;
  } else {
    appData = new AppData();
    // Attempt to load saved app data.
    const appDataKey = options.appDataKey ?? Web5.APP_DATA_KEY;
    // If no app data was present, or loading failed, initialize defaults.
    if (!appData.load(appDataKey)) {
      appData.initialize(appDataKey);      
    }
  }
  
  if (appData.getStatus() !== appData.STATUS_READY) {
    throw new Error(`failed to load application data. Status: ${appData.getStatus()}`'`);
  }
  
  let agent;
  
  if (options.agent) {
    // Custom agent specified.
    agent = options.agent;
  } else {
      // Use default agent
      agent = Web5ProxyAgent.create({
        did          : appData.getDid(),
        auk          : appData.getPrivateKey(),
        agentOptions : options.agentOptions,
        didResolver  : Web5.did.resolver
      });
  }
  
  // Try connecting to desktop or remote agent.
  await agent.connect(options.url);
  
  // Failed to resolve/reach specified endpoint or user denied connect request.
  // Fallback to browser in-page:
  if (!agent.isConnected()) {
    agent = Web5UserAgent.create({
      did          : appData.getDid(),
      auk          : appData.getPrivateKey(),
      agentOptions : options.agentOptions,
      didResolver  : Web5.did.resolver
    });
  }
  
  const web5 = new Web5({ agent, appData });
  
  return { web5 }
}
```

## Desktop Agent Internals

```typescript
// initialization routines...
// instantiate agent
const agent = await Web5DesktopAgent.create({
  httpServer   : options.httpServer,
  wsServer     : options.wsServer,
  did          : appData.getDid(),
  auk          : appData.getPrivateKey(),
  agentOptions : options.agentOptions,
  didResolver  : Web5.did.resolver
});

const web5 = new Web5({ agent, appData });

/**
 * Optionally, can be overriden but defaults will be used if not:
 *   credentialManager 
 *   didManager
 *   dwnManager
 *   identityManager
 *   keyManager
 *   rpcClient
 *   syncManager
*/
```