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

# Dictation Web Component - Proxy Guide

> Route Dictation Web Component WebSocket traffic through your own server

Instead of connecting directly to Corti, you can route the WebSocket through your own proxy. When `socketUrl` or `socketProxy` is set, `accessToken` and `authConfig` are ignored — your proxy handles authentication.

## Why proxy?

When using **Client Credentials** authentication, the token is a service-account token with access to **all** data within the same API Client. Exposing it in a browser means any user could access any other user's data.

**Best practice:** use the SDK on the backend only, and call your own backend endpoints from the frontend. If you need the SDK in the browser, proxy through your server so credentials never leave the backend.

<Tip>If proxying is not an option, consider [scoped tokens](/sdk/js/authentication#scoped-tokens) to restrict what a frontend token can access.</Tip>

## Using `socketUrl`

Point the component at your proxy endpoint:

```html theme={null}
<corti-dictation socketUrl="wss://your-proxy.com/transcribe"></corti-dictation>
```

## Using `socketProxy`

For additional control over subprotocols and query parameters:

```js theme={null}
const dictation = document.querySelector("corti-dictation");

dictation.socketProxy = {
    url: "wss://your-proxy.com/transcribe",
    protocols: ["your-protocol"],
    queryParameters: { userId: "123" },
};
```

| Field             | Type       | Required | Description                          |
| :---------------- | :--------- | :------- | :----------------------------------- |
| `url`             | `string`   | Yes      | WebSocket proxy URL                  |
| `protocols`       | `string[]` | No       | WebSocket subprotocols               |
| `queryParameters` | `object`   | No       | Query parameters appended to the URL |

## Using with modular components

Set `socketUrl` or `socketProxy` on `<dictation-root>`:

```html theme={null}
<dictation-root socketUrl="wss://your-proxy.com/transcribe">
    <dictation-recording-button></dictation-recording-button>
</dictation-root>
```

## See also

* [Authentication](/sdk/dictation/authentication) -- direct authentication (no proxy)
* [API Reference](/sdk/dictation/reference) -- full property tables for all components