Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 12 additions & 8 deletions guides/assistant-embed.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
keywords: ["assistant embed", "in-app chat", "widget", "chatbot"]
---

## What you will build

Check warning on line 8 in guides/assistant-embed.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

guides/assistant-embed.mdx#L8

Avoid using 'will'.

A reusable widget that embeds the [assistant](/assistant/index) directly in your application. The widget provides:

Expand Down Expand Up @@ -34,7 +34,7 @@
3. Copy the assistant API key (starts with `mint_dsc_`) and save it securely.

<Note>
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.
</Note>

## Set up the example
Expand Down Expand Up @@ -73,7 +73,7 @@
export const ASSISTANT_CONFIG = {
domain: 'your-domain',
docsURL: 'https://yourdocs.mintlify.app',
};

Check warning on line 76 in guides/assistant-embed.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

guides/assistant-embed.mdx#L76

Use semicolons judiciously.
```

Replace:
Expand All @@ -81,16 +81,23 @@
- `https://yourdocs.mintlify.app` with your actual documentation URL.

</Step>
<Step title="Add your API token">
<Step title="Set up your API key">

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.

</Step>
<Step title="Start the development server">

Expand All @@ -117,12 +124,12 @@
.map(source => ({
url: source.url || source.path,
title: source.metadata?.title || source.path,
})) || [];

Check warning on line 127 in guides/assistant-embed.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

guides/assistant-embed.mdx#L127

Use semicolons judiciously.
};

Check warning on line 128 in guides/assistant-embed.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

guides/assistant-embed.mdx#L128

Use semicolons judiciously.

// In your message rendering:
{messages.map((message) => {
const sources = message.role === 'assistant' ? extractSources(message.parts) : [];

Check warning on line 132 in guides/assistant-embed.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

guides/assistant-embed.mdx#L132

Use semicolons judiciously.
return (
<div key={message.id}>
{/* message content */}
Expand Down Expand Up @@ -173,11 +180,8 @@
}
}, []);

const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat({

Check warning on line 183 in guides/assistant-embed.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

guides/assistant-embed.mdx#L183

Did you really mean 'handleSubmit'?
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,
Expand Down
Loading