Embed assistant API guide #1699
Conversation
no way to test right now
| ## What you will build | ||
|
|
||
| A reusable React component that embeds the [assistant](/ai/assistant) directly in your application. The component provides: | ||
|
|
There was a problem hiding this comment.
Opinion: I would've appreciated some sort of gif or image to showcase what the completed product will look like
|
|
||
| Users can use the widget to get help with your product without leaving your application. | ||
|
|
||
| <PreviewButton href="https://github.com/mintlify/assistant-embed-example">Clone the repository to start working with a complete example locally.</PreviewButton> |
There was a problem hiding this comment.
For me, when I went through the readme instruction on the github repo, none of the tailwind styles showed up. Luckily it, only took one prompt on Cursor to fix them for me. Here's that conversation thread:
There was a problem hiding this comment.
nit: for calling AssistantWidget in App.tsx, I'm more used to domain and docsURL being defined first as global variables rather than being passed directly to the component.
| <Steps> | ||
| <Step title="Install dependencies"> | ||
|
|
||
| Install the AI SDK for React and a Markdown renderer: |
There was a problem hiding this comment.
nit: While I did figure it out, I found this to be a point of some confusion. Since you don't first give a command to create a vite app, I assume your tutorial expects me to follow the github repo you linked above. However, if I had cloned the github repo, then npm i should've taken care of this. This left me a bit confused on the expected way to follow your tutorial.
| import { useState } from 'react'; | ||
| import ReactMarkdown from 'react-markdown'; | ||
|
|
||
| const parseSuggestionLinks = (markdown, docsURL) => { |
There was a problem hiding this comment.
Leading with two helper functions that have some more complex code (regex) made me immediately zone out while reading this file. Could you move these two to a separate file called utils.ts and then import them.
|
|
||
| <div className="flex-1 overflow-y-auto p-4 space-y-4"> | ||
| {messages.map((message) => ( | ||
| <div key={message.id} className={`flex ${message.role === 'user' ? 'justify-end' : 'justify-start'}`}> |
There was a problem hiding this comment.
Could we move each message to seperate component? This is just a best practice in react and will make the file more readable.
| ) : ( | ||
| <div className="overflow-x-hidden"> | ||
| <ReactMarkdown | ||
| className="prose prose-sm max-w-none text-sm break-words" |
There was a problem hiding this comment.
Text in the ReactMarkdown component is center aligned. Could we switch this to be left aligned?
| Import and render the component in your application. | ||
|
|
||
| Pass the required props. | ||
|
|
There was a problem hiding this comment.
To me, the formatting of this text felt dense, making it hard to read. Any way to break it up?
|
|
||
| The [example repository](https://github.com/mintlify/assistant-embed-example) includes several of these customizations already implemented, including color customization, positioning options, and source citations. | ||
|
|
||
| ### Add color customization |
There was a problem hiding this comment.
The sections "Add color customization" and "Add widget positioning options" seem unnecessary to me. I'd expect that if a reader wanted to use the code this tutorial gave them, that they'd be opinionated enough to probably switch a lot of the styles themselves, which is a pretty trivial thing to do.
On this point, I'd also remove position and buttonColor as inputs to the AssistantWidget.
| ## Troubleshooting | ||
|
|
||
| <AccordionGroup> | ||
| <Accordion title="Widget not appearing"> |
There was a problem hiding this comment.
I'd remove this section as I think it is very unlikely they'd encounter this issue and then consult these docs for a solution to it (these are pretty simple fixes).
| <div key={message.id} className={`flex ${message.role === 'user' ? 'justify-end' : 'justify-start'}`}> | ||
| <div className={`max-w-[85%] rounded-lg px-4 py-2 break-words ${message.role === 'user' ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-900'}`}> | ||
| {message.role === 'user' ? ( | ||
| <div className="text-sm whitespace-pre-wrap break-words">{message.content}</div> |
There was a problem hiding this comment.
break-words gives me the following warning in my IDE. Could we switch its usage to wrap-break-word
Documentation changes
Adds a guide on embedding the assistant as a widget in a React app.
Closes https://linear.app/mintlify/issue/DOC-79/create-a-guide-explaining-how-to-integrate-the-assistant-api-into-a
For Reviewers
When reviewing documentation PRs, please consider:
✅ Technical accuracy
✅ Clarity and completeness
✅ User experience
Note
Adds a new guide for embedding the assistant as an in-app React widget and updates navigation to include it.
guides/assistant-embed.mdx:AssistantWidgetusing@ai-sdk/reactuseChatwith streaming, Markdown rendering, and suggestions parsing.ai,@ai-sdk/react,react-markdown; configureVITE_MINTLIFY_TOKEN; usage example withdomainanddocsURLprops.x-thread-id, keyboard shortcuts.guides/assistant-embedtodocs.jsonunderGuides > AI; minor reordering ofguides/geowithin the group.Written by Cursor Bugbot for commit 92f4515. This will update automatically on new commits. Configure here.