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

# Mirador SDKs

> SDKs for the Mirador distributed tracing platform

The Mirador SDKs let you create and manage distributed traces across your applications. Use the core SDK for tracing, events, and attributes, then add integration plugins to correlate traces with domain-specific activity — starting with Web3 and blockchain transactions. Two SDKs are available today:

* **Web SDK** (`@miradorlabs/web-sdk`) — for browser-based applications, with automatic browser metadata collection
* **Node.js SDK** (`@miradorlabs/nodejs-sdk`) — for server-side applications

<Info>
  SDKs for **Python**, **Go**, **Rust**, and other languages are currently in development. [Contact us](mailto:support@mirador.org) if you're interested in early access.
</Info>

## Key Features

<CardGroup cols={2}>
  <Card title="Fluent Builder Pattern" icon="link" href="/concepts/traces">
    Clean, chainable API for building traces
  </Card>

  <Card title="Plugin System" icon="puzzle-piece" href="/concepts/plugins">
    Extensible plugin architecture for domain-specific integrations — Web3, observability, and more
  </Card>

  <Card title="Browser Metadata" icon="browser" href="/advanced/browser-metadata">
    Automatic collection of 27+ browser environment metrics
  </Card>

  <Card title="TypeScript Support" icon="code" href="/quickstart">
    Full type definitions included for excellent developer experience
  </Card>

  <Card title="Blockchain Integration" icon="cube" href="/examples/transaction-tracking">
    Follow transactions end-to-end across chains, bridges, and protocols via the Web3 plugin
  </Card>

  <Card title="EIP-1193 Provider" icon="wallet" href="/concepts/provider">
    Drop-in provider wrapper that auto-captures all transactions with zero config
  </Card>

  <Card title="Web3 Demo App" icon="globe" href="/examples/web3-demo">
    Interactive example app covering wallet discovery, transaction sending, and full trace lifecycle
  </Card>
</CardGroup>

## Quick Example

Track a transaction with manual hints — works with any wallet or library:

```typescript theme={null}
import { Client, Web3Plugin } from '@miradorlabs/web-sdk';

const client = new Client('your-api-key', { plugins: [Web3Plugin()] });

const swapTx = {
  from: '0xYourWallet',
  to: '0xUniswapRouter',
  data: '0x38ed1739...',  // swap calldata
  value: 0n,
};

const trace = client.trace({ name: 'SwapExecution' })
  .addAttribute('from', swapTx.from)
  .addAttribute('to', swapTx.to)
  .addTags(['dex', 'swap'])
  .addEvent('swap_initiated');

const tx = await wallet.sendTransaction(swapTx);

trace.web3.evm.addTxHint(tx.hash, 'ethereum', {
  input: swapTx.data,  // emits "Tx input data" event
  details: 'Swap execution'
});

await tx.wait().then(receipt => {
  trace.addEvent('swap_confirmed', { blockNumber: receipt.blockNumber });
});
```

Or use `sendTransaction` on the trace to capture tx hints and errors automatically:

```typescript theme={null}
const client = new Client('your-api-key', {
  plugins: [Web3Plugin({ provider: window.ethereum })]
});

const trace = client.trace({ name: 'SwapExecution' })
  .addAttribute('from', '0xabc...')
  .addTags(['dex', 'swap']);

const txHash = await trace.web3.evm.sendTransaction({
  from: '0xabc...',
  to: '0xdef...',
  data: '0xa9059cbb...',
  chainId: 1
});
```

Or wrap your existing provider for zero-config capture across your whole app:

<CodeGroup>
  ```typescript ethers.js theme={null}
  import { BrowserProvider } from 'ethers';
  import { Client, MiradorProvider } from '@miradorlabs/web-sdk';

  const client = new Client('your-api-key');
  const provider = new MiradorProvider(window.ethereum, client);

  // Wrap in ethers — all transactions are automatically traced
  const ethersProvider = new BrowserProvider(provider);
  const signer = await ethersProvider.getSigner();

  const tx = await signer.sendTransaction({
    to: '0xUniswapRouter',
    data: '0x38ed1739...',
  });
  ```

  ```typescript viem theme={null}
  import { createWalletClient, custom } from 'viem';
  import { mainnet } from 'viem/chains';
  import { Client, MiradorProvider } from '@miradorlabs/web-sdk';

  const client = new Client('your-api-key');
  const provider = new MiradorProvider(window.ethereum, client);

  // Wrap in viem — all transactions are automatically traced
  const walletClient = createWalletClient({
    chain: mainnet,
    transport: custom(provider),
  });

  const hash = await walletClient.sendTransaction({
    to: '0xUniswapRouter',
    data: '0x38ed1739...',
  });
  ```
</CodeGroup>

## Browser Compatibility

The SDK is compatible with modern browsers:

* Chrome
* Firefox
* Safari
* Edge

For older browsers, you may need polyfills for ES2020+ features, Fetch API, and Promises.

## Next Steps

<CardGroup cols={2}>
  <Card title="Quickstart" icon="rocket" href="/quickstart">
    Get up and running in minutes
  </Card>

  <Card title="Core Concepts" icon="book" href="/concepts/traces">
    Learn about traces, events, and attributes
  </Card>

  <Card title="Web3 Demo App" icon="globe" href="/examples/web3-demo">
    See a full working example with real wallet interactions
  </Card>
</CardGroup>