Skip to content

Commit

Permalink
Documentation edits made through Mintlify web editor
Browse files Browse the repository at this point in the history
  • Loading branch information
mintlify-development[bot] authored Dec 2, 2024
1 parent d70b909 commit aa8c7dd
Show file tree
Hide file tree
Showing 20 changed files with 349 additions and 1,394 deletions.
54 changes: 25 additions & 29 deletions advanced/user-auth/oauth.mdx
Original file line number Diff line number Diff line change
@@ -1,41 +1,37 @@
---
title: 'OAuth 2.0'
description: 'Integrate with your OAuth server to enable user login via the PKCE flow'
description: 'Enable user login via OAuth PKCE flow'
---

If you have an existing OAuth server that supports the PKCE flow, you can integrate with Mintlify for a seamless login experience.
Integrate your existing OAuth server with Mintlify to enable user authentication.

## Implementation
## Setup Steps

<Steps>
<Step title="Create your Info API">
Create an API endpoint that can be accessed with an OAuth access token, and responds with a JSON payload following the [UserInfo](./sending-data) format. Take note of the scope or scopes required to access this endpoint.
<Step title="Create Info API">
Create an API endpoint that accepts an OAuth access token and returns user information in the [UserInfo](./sending-data) format.
</Step>
<Step title="Configure your User Auth settings">
Go to your [Mintlify dashboard settings](https://dashboard.mintlify.com/mintlify/mintlify/settings/deployment/user-authentication), select the OAuth option, and fill out the required fields:

- **Authorization URL**: The base URL for the authorization request, to which we will add the appropriate query parameters.
- **Client ID**: An ID for the OAuth 2.0 client to be used.
- **Scopes**: An array of scopes that will be requested.
- **Token URL**: The base URL for the token exchange request.
- **Info API URL**: The endpoint that will be hit to retrieve user info.
<Step title="Configure OAuth Settings">
In your [Mintlify dashboard](https://dashboard.mintlify.com/mintlify/mintlify/settings/deployment/user-authentication), select OAuth and configure:
- Authorization URL
- Client ID
- Required scopes
- Token URL
- Info API URL
</Step>
<Step title="Configure your OAuth client">
Copy the Redirect URL listed in the [Mintlify dashboard settings](https://dashboard.mintlify.com/mintlify/mintlify/settings/deployment/user-authentication) and add it as an authorized redirect URL for your OAuth server.
<Step title="Add Redirect URL">
Add the Redirect URL from your Mintlify dashboard to your OAuth server's authorized redirects.
</Step>
</Steps>

## Example

I have an existing OAuth server that supports the PKCE flow. I want to set up authentication for my docs hosted at `foo.com/docs`.

To set up authentication with Mintlify, I create an endpoint `api.foo.com/docs/user-info` which requires an OAuth access token with the `docs-user-info` scope, and responds with the user's custom data according to Mintlify’s specification.

I then go to the Mintlify dashboard settings, navigate to the User Auth settings, select OAuth, and enter the relevant values for the OAuth flow and Info API endpoint:
- **Authorization URL**: `https://auth.foo.com/authorization`
- **Client ID**: `ydybo4SD8PR73vzWWd6S0ObH`
- **Scopes**: `['docs-user-info']`
- **Token URL**: `https://auth.foo.com/exchange`
- **Info API URL**: `https://api.foo.com/docs/user-info`

Finally, I copy the Redirect URL displayed in the dashboard settings and add it as an authorized redirect URL in my OAuth client configuration settings.
## Example Configuration

```json
{
"authorizationUrl": "https://auth.foo.com/authorization",
"clientId": "ydybo4SD8PR73vzWWd6S0ObH",
"scopes": ["docs-user-info"],
"tokenUrl": "https://auth.foo.com/exchange",
"infoApiUrl": "https://api.foo.com/docs/user-info"
}
```
61 changes: 25 additions & 36 deletions advanced/user-auth/shared-session.mdx
Original file line number Diff line number Diff line change
@@ -1,50 +1,39 @@
---
title: 'Shared Session Auth'
description: 'Seamlessly share user sessions between your dashboard and your docs'
description: 'Share user sessions between your dashboard and docs'
---

This method utilizes the session authentication info already stored in your user’s browser to create a seamless documentation experience.
Share your existing user sessions between your dashboard and documentation for a seamless experience.

## Implementation
## Setup

<Steps>
<Step title="Create your Info API">
Create an API endpoint that uses session authentication to identify users, and responds with a JSON payload following the [UserInfo](./sending-data) format.

If the API domain does not *exactly match* the docs domain:
- Add the docs domain to your API's `Access-Control-Allow-Origin` header (must not be `*`)
- Ensure your API’s `Access-Control-Allow-Credentials` header is `true`
<Warning>
These CORS options only need to be enabled on the *single endpoint* responsible for returning user information. We do not recommend enabling these options on all dashboard endpoints.
</Warning>
<Step title="Create User Info API">
Create an API endpoint that:
- Uses your existing session authentication
- Returns user data in the [UserInfo](./sending-data) format
- Sets proper CORS headers if your API and docs domains differ:
- `Access-Control-Allow-Origin`: Set to your docs domain
- `Access-Control-Allow-Credentials`: Set to `true`
</Step>
<Step title="Configure your User Auth settings">
Go to your [Mintlify dashboard settings](https://dashboard.mintlify.com/mintlify/mintlify/settings/deployment/user-authentication) and add the API URL and your Login URL to your User Auth settings.
<Step title="Configure Settings">
Add your API URL and Login URL in your [Mintlify dashboard settings](https://dashboard.mintlify.com/mintlify/mintlify/settings/deployment/user-authentication).
</Step>
</Steps>

## Examples

### Dashboard at subdomain, docs at subdomain

I have a dashboard at `dash.foo.com`, which uses cookie-based session authentication. My dashboard API routes are hosted at `dash.foo.com/api`. I want to set up authentication for my docs hosted at `docs.foo.com`.

To set up authentication with Mintlify, I create another dashboard endpoint `dash.foo.com/api/docs/user-info` which identifies the user using session auth, and responds with their custom data according to Mintlify’s specification. I then add `https://docs.foo.com` to the `Access-Control-Allow-Origin` allow-list **for this route only**, and ensure my `Access-Control-Allow-Credentials` configuration is set to `true` **for this route only**.

I then go to the Mintlify dashboard settings and enter `https://dash.foo.com/api/docs/user-info` for the API URL field.

### Dashboard at subdomain, docs at root

I have a dashboard at `dash.foo.com`, which uses cookie-based session authentication. My dashboard API routes are hosted at `dash.foo.com/api`. I want to set up authentication for my docs hosted at `foo.com/docs`.

To set up authentication with Mintlify, I create another dashboard endpoint `dash.foo.com/api/docs/user-info` which identifies the user using session auth, and responds with their custom data according to Mintlify’s specification. I then add `https://foo.com` to the `Access-Control-Allow-Origin` allow-list **for this route only**, and ensure my `Access-Control-Allow-Credentials` configuration is set to `true` **for this route only**.

I then go to the Mintlify dashboard settings and enter `https://dash.foo.com/api/docs/user-info` for the API URL field.

### Dashboard at root, docs at root
## Common Setups

I have a dashboard at `foo.com/dashboard`, which uses cookie-based session authentication. My dashboard API routes are hosted at `foo.com/api`. I want to set up authentication for my docs hosted at `foo.com/docs`.
1. **Docs and Dashboard on Subdomains**
- Dashboard: `dash.foo.com`
- Docs: `docs.foo.com`
- API Endpoint: `dash.foo.com/api/docs/user-info`

To set up authentication with Mintlify, I create another dashboard endpoint `foo.com/api/docs/user-info` which identifies the user using session auth, and responds with their custom data according to Mintlify’s specification.
2. **Dashboard on Subdomain, Docs on Root**
- Dashboard: `dash.foo.com`
- Docs: `foo.com/docs`
- API Endpoint: `dash.foo.com/api/docs/user-info`

I then go to the Mintlify dashboard settings and enter `https://foo.com/api/docs/user-info` for the API URL field.
3. **Both on Root Domain**
- Dashboard: `foo.com/dashboard`
- Docs: `foo.com/docs`
- API Endpoint: `foo.com/api/docs/user-info`
92 changes: 14 additions & 78 deletions advanced/widget/chat.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,16 @@
title: "Chat Widget"
---

Integrate the Mintlify widget into your products to offer users quick access to AI-powered chat with your docs content as the knowledge base.
Add an AI-powered chat widget to your product that lets users search your documentation.

![widget](https://mintlify-assets.b-cdn.net/widget/hero.webp)

## Getting started
## Quick Start

First, generate an API key in [the Mintlify dashboard](https://dashboard.mintlify.com/chat/widget-auth).

![widget](https://mintlify-assets.b-cdn.net/widget/key.webp)

## Installation

Add the widget by adding these script tags into your site's `<head>...<head/>` tag.
1. Get your API key from the [Mintlify dashboard](https://dashboard.mintlify.com/chat/widget-auth)
2. Add the widget to your site:

### HTML Installation
```html
<script>
window.mintlifyWidgetSettings = {
Expand All @@ -37,8 +33,7 @@ Add the widget by adding these script tags into your site's `<head>...<head/>` t
</script>
```

To use the widget in React and Next.js apps, use the React component from the `@mintlify/widget-react` [package](https://www.npmjs.com/package/@mintlify/widget-react). Here is a basic example of how to use the component in your React application:

### React Installation
```jsx
<MintlifyWidget
connection={{
Expand All @@ -47,73 +42,14 @@ To use the widget in React and Next.js apps, use the React component from the `@
/>
```

## Usage

In the first script tag or the React component props, you can customize the appearance and other settings of the widget. `mintlifyWidgetSettings` accepts the following props:

| Prop | Type | Description |
| ------------ | ------------------------------------------------------------------- | ---------------------------------------------------------- |
| `connection` | [MintlifyWidgetConnectionProps](#mintlifywidgetconnectionProps) | Information needed to connect to our API. Required. |
| `display?` | [MintlifyWidgetDisplayProps](#mintlifywidgetdisplayProps) | Configurations for the widget appearance and interactions. |
| `tracking?` | [MintlifyWidgetTrackingFunctions](#mintlifywidgettrackingfunctions) | Callback functions for tracking analytics. |

### MintlifyWidgetConnectionProps

| Prop | Type | Description |
| -------- | -------- | ----------------------------------------------------------- |
| `apiKey` | `string` | Widget API key generated from Mintlify dashboard. Required. |
| `url?` | `string` | Used for internal testing only |

### MintlifyWidgetDisplayProps

| Prop | Type | Description |
| ------------- | ----------------------------------------------------------------------- | ----------------------------------------------------------- |
| `trigger?` | [MintlifyWidgetDisplayTriggerProps](#mintlifywidgetdisplaytriggerprops) | Appearance of the trigger. |
| `colors?` | [MintlifyWidgetDisplayColorsProps](#mintlifywidgetdisplaycolorsprops) | Colors used across the widget. |
| `chat?` | [MintlifyWidgetDisplayChatProps](#mintlifywidgetdisplaychatprops) | Configs specific to AI chat. |
| `isDarkMode?` | `boolean` | Controlled dark mode appearance. Defaults to OS preference. |

#### MintlifyWidgetDisplayTriggerProps

| Prop | Type | Description |
| ------------- | ------------------------------------ | -------------------------------------------------------------------------------------------------------------------------- |
| `type?` | `'button'`\|`'input'` | Type of the trigger to display. Defaults to `button`. |
| `label?` | `string` | Label displayed in the trigger. Defaults to `Get help` for the button trigger and `Ask anything...` for the input trigger. |
| `buttonIcon?` | `'chat'`\|`'sparkles'`\|`'mintlify'` | Icon used in the trigger. Only available for the `button` trigger. Defaults to `chat`. |
| `iconOnly?` | `boolean` | Only show icon in the trigger or not. Defaults to `false`. |

Here is an overview of what the trigger looks like with different configurations.

| `type='input'` | |
| -------------- | ------------------------------------------------------------ |
| | <img style={{height:'80px'}} src="https://mintlify-assets.b-cdn.net/widget/input.png"/> |

| `type='button'` | `'chat'` | `'sparkles'` | `'mintlify'` |
| ---------------- | --------------------------------------------------------------------------- | ------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- |
| `iconOnly=false` | <img style={{height:'80px'}} src="https://mintlify-assets.b-cdn.net/widget/button-chat.png"/> | <img style={{height:'80px'}} src="https://mintlify-assets.b-cdn.net/widget/button-sparkles.png"/> | <img style={{height:'80px'}} src="https://mintlify-assets.b-cdn.net/widget/button-mintlify.png"/> |
| `iconOnly=true` | <img style={{height:'80px'}} src="https://mintlify-assets.b-cdn.net/widget/button-chat-iconOnly.png"/> | <img style={{height:'80px'}} src="https://mintlify-assets.b-cdn.net/widget/button-sparkles-iconOnly.png"/> | <img style={{height:'80px'}} src="https://mintlify-assets.b-cdn.net/widget/button-mintlify-iconOnly.png"/> |

#### MintlifyWidgetDisplayColorsProps

| Prop | Type | Description |
| --------------- | -------- | -------------------------------------------------------- |
| `primary?` | `string` | Primary color used in the widget. Defaults to `#0D9373`. |
| `primaryLight?` | `string` | Primary color in dark mode. Defaults to `#55D799`. |

#### MintlifyWidgetDisplayChatProps
## Customization

| Prop | Type | Description |
| ------------------------ | ---------- | ------------------------------------------------------------------ |
| `openCitationInSameTab?` | `boolean` | Open the citation url in the same tab or not. Defaults to `false`. |
| `exampleQueries?` | `string[]` | Example queries to prompt the user to ask. Defaults to `[]`. |
The widget can be customized using these main properties:

### MintlifyWidgetTrackingFunctions
| Property | Description |
|------------|-----------------------------------------------------|
| `connection` | Required. Contains your API key |
| `display` | Optional. Customize appearance and interactions |
| `tracking` | Optional. Add analytics tracking |

| Prop | Type | Description |
| --------------------- | ------------------------------------------ | -------------------------------------------------- |
| `trackChatEnter` | `()=> void` | Triggered when the user opens the chat widget. |
| `trackCitationClick` | `(title: string, url: string)=> void` | Triggered when the user clicks on a citation. |
| `trackChatThumbsUp` | `(query: string, response: string)=> void` | Triggered when the user thumbs up on a response. |
| `trackChatThumbsDown` | `(query: string, response: string)=> void` | Triggered when the user thumbs down on a response. |
| `trackChatFollowup` | `(query: string)=> void` | Triggered when the user asks a question. |
| `trackChatClose` | `(queriesCount: number)=> void` | Triggered when the user exits the chat widget. |
[View detailed configuration options →](https://mintlify.com/docs/widget/configuration)
39 changes: 14 additions & 25 deletions api-playground/mdx/configuration.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -3,25 +3,24 @@ title: 'MDX Setup'
description: 'Generate docs pages for your API endpoints using MDX'
---

Mintlify allows you to define your API endpoints using a combination of `mint.json` configuration, MDX metadata fields, and the `<ParamFields />` component. From the defined endpoints, we generate an API playground, request examples, and response examples.
Mintlify helps you create interactive API documentation using MDX. Here's how to get started:

<Steps>
<Step title="Configure your API">
In your `mint.json` file, define your base URL and auth method:
<Step title="Configure API in mint.json">
Add your API configuration to `mint.json`:

```json
{
"api": {
"baseUrl": "https://mintlify.com/api", // string array for multiple base URLs
"baseUrl": "https://mintlify.com/api",
"auth": {
"method": "bearer" // options: bearer, basic, key.
"method": "bearer"
}
}
}
```

If you would not like to show an API playground, you don't need to include auth types. Hide the playground with the following field:

To hide the API playground, use:
```json
{
"api": {
Expand All @@ -31,35 +30,25 @@ Mintlify allows you to define your API endpoints using a combination of `mint.js
}
}
```

Find a full list of API configurations [here](/settings/global#api-configurations).
</Step>

<Step title="Create your endpoint pages">

Each API endpoint page should have a corresponding MDX file. At the top of each file, define:
<Step title="Create endpoint pages">
Create MDX files for each endpoint with the required metadata:

```md
---
title: 'Create new user'
api: 'POST https://api.mintlify.com/user'
api: 'POST /user'
---
```

You can specify path parameters by adding the parameter name to the path, wrapped with `{}`:

For paths with parameters, use `{paramName}` syntax:
```bash
https://api.example.com/v1/endpoint/{userId}
/v1/endpoint/{userId}
```

<Note>

If you have `baseUrl` configured in [mint.json](/settings/global), you can use relative paths like `/v1/endpoint`.

</Note>
</Step>

<Step title="Add your endpoints to your docs">
Add your endpoint pages to the sidebar by adding the paths to the `navigation` field in your `mint.json`. Learn more about structuring your docs [here](/settings/navigation).
<Step title="Add to navigation">
Add your endpoint pages to the `navigation` field in `mint.json` to display them in your sidebar.
</Step>
</Steps>
</Steps>
Loading

0 comments on commit aa8c7dd

Please sign in to comment.