createAsyncAPI()

AsyncAPI Server

The main config for Fumadocs AsyncAPI.

It should not be referenced in browser environments.

`input`

The AsyncAPI schemas to read from.

File Paths
External URLs
Functions (see below)

Only schemas listed here can be loaded, other IDs passed to getSchema() or preloaded by pages throw an error.

Do not pass untrusted schemas to input, their $refs can read local files and fetch URLs, private hosts included.

import { createAsyncAPI } from '@fumadocs/asyncapi/server';

export const asyncapi = createAsyncAPI({
  input: ['./streetlights.yaml'],
});

`disableCache`

Disable caching of loaded schemas. Useful during development when schemas change frequently.

import { createAsyncAPI } from '@fumadocs/asyncapi/server';

export const asyncapi = createAsyncAPI({
  input: ['./asyncapi.yaml'],
  disableCache: true,
});

Loading Documents Once

Pages receive the whole document in their props, so every page load, navigation and prefetch sends it again. For large documents, leave it out:

lib/asyncapi.ts

import { createAsyncAPI } from '@fumadocs/asyncapi/server';

export const asyncapi = createAsyncAPI({
  // IDs end up in URLs, keep them URL-safe
  input: { streetlights: './streetlights.yaml' },
  includeDocument: false, 
});

Pass loadDocument to load each document once per browser session. It also runs during server rendering:

components/api-page.tsx

'use client';
import { preload } from 'react-dom';
import { createAsyncAPIPage } from '@fumadocs/asyncapi/ui';

export const AsyncAPIPage = createAsyncAPIPage({
  async loadDocument(id) {
    if (typeof window === 'undefined') {
      // the browser starts downloading it with the page
      preload(`/api/asyncapi/${id}`, { as: 'fetch', crossOrigin: 'anonymous' });
      const { asyncapi } = await import('@/lib/asyncapi');
      return (await asyncapi.getSchema(id)).bundled;
    }
    return (await fetch(`/api/asyncapi/${id}`)).json();
  },
});

Serve the documents to the browser from a route:

app/api/asyncapi/[id]/route.ts

import { asyncapi } from '@/lib/asyncapi';

export async function GET(_req: Request, { params }: RouteContext<'/api/asyncapi/[id]'>) {
  return Response.json((await asyncapi.getSchema((await params).id)).bundled);
}

// for static exports
export async function generateStaticParams() {
  return Object.keys(await asyncapi.getSchemas()).map((id) => ({ id }));
}

loadDocument works with generated MDX files too.
For the UI installed by Fumadocs CLI, pass loadDocument to createAsyncAPIRenderer().
Browsers keep each document until a reload. With disableCache, leave includeDocument on.

AsyncAPI ServerCopy Anchor Link

inputCopy Anchor Link

disableCacheCopy Anchor Link

Loading Documents OnceCopy Anchor Link

On this page

AsyncAPI Server

`input`

`disableCache`

Loading Documents Once