diff --git a/guides/assistant-embed.mdx b/guides/assistant-embed.mdx index 8ef01b17b..2224f8521 100644 --- a/guides/assistant-embed.mdx +++ b/guides/assistant-embed.mdx @@ -34,7 +34,7 @@ Users can use the widget to get help with your product without leaving your appl 3. Copy the assistant API key (starts with `mint_dsc_`) and save it securely. - The assistant API key is a public token that you can use in frontend code. Calls using this token count toward your plan's message allowance and can incur overages. + Your assistant API key controls access to your assistant quota. This tutorial keeps the key server-side using a backend proxy so it never reaches the client bundle. ## Set up the example @@ -81,16 +81,23 @@ Replace: - `https://yourdocs.mintlify.app` with your actual documentation URL. - + -Create a `.env` file in the project root. +Store your assistant API key as a server-side environment variable. Avoid the `VITE_` prefix, which bundles the value into your client code: ```bash .env -VITE_MINTLIFY_TOKEN=mint_dsc_your_token_here +MINTLIFY_TOKEN=mint_dsc_your_token_here ``` Replace `mint_dsc_your_token_here` with your assistant API key. +Then add a backend route (for example, `/api/assistant`) to proxy requests to the Mintlify API: + +1. Accept the user's message from the widget. +2. Attach the `Authorization: Bearer $MINTLIFY_TOKEN` header and forward the request to `https://api.mintlify.com/discovery/v1/assistant/{domain}/message`. +3. Stream the upstream response back to the client unchanged, so token streaming and `X-Thread-Id` / `X-Thread-Key` headers reach the widget. +4. Point the widget's `api` option at your backend route instead of the Mintlify API directly. + @@ -174,10 +181,7 @@ export function AssistantWidget({ domain, docsURL }) { }, []); const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat({ - api: `https://api.mintlify.com/discovery/v1/assistant/${domain}/message`, - headers: { - 'Authorization': `Bearer ${import.meta.env.VITE_MINTLIFY_TOKEN}`, - }, + api: '/api/assistant', body: { fp: 'anonymous', retrievalPageSize: 5,