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

# JavaScript preparation

> Prepare a browser interface with an authorized server boundary, safe environment variables, and a clear integration lifecycle.

A JavaScript application can display agent information while its server reads workspace resources. Prepare that separation before adding a conversation transport. A workspace API key belongs on the server.

<Note>
  Authenticated resource reads are available. A browser conversation still requires a released session and transport path. This guide does not install a Threetone client package or start a live session.
</Note>

## Before you begin

Use the [TypeScript REST example](/agents-platform/resources/sdks/typescript) for the server request and review [web deployment](/agents-platform/deploy/web/overview). Choose an existing agent and authorize access to it in your application.

## Prepare the interface

<Steps>
  <Step title="Keep the API key on your server">
    Store `THREETONE_API_KEY` in the server environment. In a Vite application, do not put it in a variable prefixed with `VITE_`. Those values become part of the browser bundle. A public API base URL is configuration; a workspace key is a credential.
  </Step>

  <Step title="Return a small authorized response">
    Authenticate the caller before reading private agent configuration. Use [Get agent](/api-reference/agents-platform/get-agent) on the server and return only fields the interface needs. Do not expose an arbitrary resource proxy that accepts any agent ID without checking access.
  </Step>

  <Step title="Handle request failures">
    Show loading, unavailable, and retry states. Cancel obsolete requests when the user changes the selected agent. Avoid putting private responses in a shared public cache, and keep credentials and prompt contents out of browser error messages.
  </Step>

  <Step title="Prepare a future session lifecycle">
    Start microphone access only after an explicit user action. Include stop and mute controls with accessible labels. Plan for permission denial, disconnection, and cleanup when the page closes. Keep these controls unavailable until the supported session path is ready.
  </Step>
</Steps>

Follow [Vite's environment-variable guidance](https://vite.dev/guide/env-and-mode) when configuring a client build. Its development server proxy does not replace authentication or a production server boundary.

## Frequently asked questions

<AccordionGroup>
  <Accordion title="Can I hide a workspace key in a minified bundle?" id="faq-javascript-key">
    No. Anyone who receives the bundle can inspect its values and requests. Keep privileged operations on an authorized server.
  </Accordion>

  <Accordion title="Is a resource read enough to enable chat or voice?" id="faq-javascript-session">
    No. Reading an agent document and establishing a conversation are separate operations. Check [current availability](/agents-platform/overview#current-availability) before enabling a live control.
  </Accordion>
</AccordionGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.