Root Components

Root Components customize the Admin Panel across every route. Configure them through the root admin.components object.

import { buildConfig } from 'frogbot'

export default buildConfig({
  admin: {
    components: {
      actions: ['/components/HelpAction#HelpAction'],
      graphics: {
        Icon: '/components/BrandIcon#BrandIcon',
        Logo: '/components/BrandLogo#BrandLogo',
      },
    },
  },
  collections: [],
})

Config Options

admin.components is the RootAdminComponents type. The other root admin options are listed in Admin panel.

Option	Type	Default	Description
`actions`	`FrogBotComponent[]`	`[]`	Components at the top right of the Admin Panel, in array order.
`beforeLogin`	`FrogBotComponent[]`	`[]`	Components before the login form’s email and password fields.
`afterLogin`	`FrogBotComponent[]`	`[]`	Components after the login form’s fields. When the user collection configures `auth.signIn`, FrogBot appends its sign-in buttons after your components.
`header`	`FrogBotComponent[]`	`[]`	Components above the admin panel’s top bar, on every signed-in page.
`beforeDashboard`	`FrogBotComponent[]`	`[]`	Components on the dashboard, above its content. Renders only on the default dashboard, not one replaced with `views.dashboard`.
`afterDashboard`	`FrogBotComponent[]`	`[]`	Components on the dashboard, below its content. Renders only on the default dashboard, not one replaced with `views.dashboard`.
`beforeNavLinks`	`FrogBotComponent[]`	`[]`	Components in the sidebar above the nav links.
`afterNavLinks`	`FrogBotComponent[]`	`[]`	Components in the sidebar below the nav links and sections.
`beforeBottomRail`	`FrogBotComponent[]`	`[]`	Components in the bottom sidebar rail, above Account and Settings.
`afterBottomRail`	`FrogBotComponent[]`	`[]`	Components in the bottom sidebar rail, below Account and Settings.
`beforeSidebarClose`	`FrogBotComponent[]`	`[]`	Components in the expanded sidebar header, left of the collapse button.
`beforeAccountMenu`	`FrogBotComponent[]`	`[]`	Account menu items above Settings.
`afterAccountMenu`	`FrogBotComponent[]`	`[]`	Account menu items below Settings.
`settingsMenu`	`FrogBotComponent[]`	`[]`	Account menu items after `afterAccountMenu`.
`logout`	`{ Button?: FrogBotComponent }`	Built-in Log out item	`Button` replaces the account menu’s Log out item.
`chat`	`{ Chat?, Greeting?, AssistantMessageActions?, UserMessageActions? }`	Built-in chat components	Admin chat slots; each value is a `FrogBotComponent`. See Chat.
`graphics`	`{ Icon?: FrogBotComponent, Logo?: FrogBotComponent }`	FrogBot head mark and wordmark	`Icon` replaces the compact mark in navigation. `Logo` replaces the full mark on the login page and the empty-chat greeting fallback.
`Nav`	`FrogBotComponent`	FrogBot sidebar	Replaces the complete sidebar navigation. See Replace the sidebar.
`navItems`	`NavItem[]`	`[]`	Links above your collections. See Navigation item options.
`navSections`	`FrogBotComponent[]`	`['@frogbotai/ui/admin/rsc#CollectionsSection']`	Sidebar sections below the links. Setting it replaces the default array. See Configure sections.
`providers`	`ProviderComponent[]`	`[]`	Components that wrap the Admin Panel and render `children`, outermost first. See Custom Providers.
`views`	`Record<string, AdminViewConfig>`	Built-in views, plus a `settings` view at `/settings`	Replaces built-in root views (`account`, `dashboard`, `settings`) or adds routes under any other key. See View options.

The chat slots are:

Option	Type	Default	Description
`Chat`	`FrogBotComponent`	Built-in conversation surface	Replaces the complete chat surface.
`Greeting`	`FrogBotComponent`	Built-in greeting	Replaces the empty-chat greeting. It receives `avatar`, `logo`, `name`, and `userName`.
`AssistantMessageActions`	`FrogBotComponent`	Built-in actions	Replaces the controls under assistant messages.
`UserMessageActions`	`FrogBotComponent`	Built-in actions	Replaces the controls under user messages.

See Chat persistence for the props each chat slot receives. See Custom Providers, Custom Views, and Dashboard for those larger extension points.

Components

actions

Actions add controls to the Admin Panel header.

import { Button } from '@frogbotai/ui'

export function HelpAction() {
  return <Button asChild><a href="/help">Help</a></Button>
}

beforeLogin and afterLogin

Use beforeLogin and afterLogin to place content around the login fields:

components: {
  beforeLogin: ['/components/LoginNotice#LoginNotice'],
  afterLogin: ['/components/LoginHelp#LoginHelp'],
}

Use the sidebar slots without replacing its built-in behavior:

components: {
  beforeSidebarClose: ['/components/WorkspaceName#WorkspaceName'],
  beforeNavLinks: ['/components/NavHeader#NavHeader'],
  afterNavLinks: ['/components/NavFooter#NavFooter'],
  beforeBottomRail: ['/components/SupportLink#SupportLink'],
  afterBottomRail: ['/components/Version#Version'],
}

Add items to the account menu or replace its Log out item:

components: {
  beforeAccountMenu: ['/components/WorkspaceSwitcher#WorkspaceSwitcher'],
  afterAccountMenu: ['/components/SupportLink#SupportLink'],
  logout: { Button: '/components/LogoutButton#LogoutButton' },
}

See Customize the account menu for the item order and a sign-out example.

Nav

Nav replaces the complete sidebar. Use navItems or navSections when you only need to change its contents.

import Link from 'next/link'

export function CustomNav() {
  return <nav><Link href="/admin">Home</Link></nav>
}

components: {
  navItems: [
    { label: 'Operations', path: '/admin/operations' },
  ],
  navSections: ['/components/ProjectSection#ProjectSection'],
}

Navigation items are empty by default. Setting navSections replaces the default Collections section, so include @frogbotai/ui/admin/rsc#CollectionsSection to keep it. See Admin navigation for New Chat and Recents examples.

Chat

Chat slots customize the conversation, greeting, and message actions:

components: {
  chat: {
    Chat: '/components/ProjectChat#ProjectChat',
    Greeting: '/components/ProjectGreeting#ProjectGreeting',
    AssistantMessageActions: '/components/AssistantActions#AssistantActions',
    UserMessageActions: '/components/UserActions#UserActions',
  },
}

graphics.Icon

graphics.Icon is the compact mark used in navigation.

export function BrandIcon() {
  return <img src="/brand/icon.svg" alt="Acme" />
}

graphics.Logo

graphics.Logo is the full mark used on the login page.

export function BrandLogo() {
  return <img src="/brand/logo.svg" alt="Acme" />
}

Component props

Type server components in these slots with RootComponentServerProps:

import type { RootComponentServerProps } from 'frogbot'

export function SupportLink({ req, user }: RootComponentServerProps) {
  const agents = Object.keys(req?.frogbot.agents ?? {})

  return <a href="/support">Support ({user?.email}, {agents.length} agents)</a>
}

Root component props:

Prop	Type	Default	Description
`req`	`FrogBotRequest`	Optional	The current request. Use `req?.frogbot` to reach FrogBot. Not passed to login page components or the dashboard slots.
`user`	`UntypedUser`	Optional	The signed-in user, or `undefined` when nobody is signed in. Use `req.user` for authorization decisions.
`permissions`	`SanitizedPermissions`	Optional	The current user’s collection and admin permissions.
`visibleEntities`	`VisibleEntities`	Optional	Slugs of the collections visible to the current user.
`i18n`	`I18nClient`	Required	Translation helpers and the current admin language.
`locale`	`Locale`	Optional	The current content locale when localization is enabled.
`params`	`Params`	Optional	Route parameters of the current admin page.
`searchParams`	`Params`	Optional	Query string parameters of the current admin page.
`viewType`	`ViewTypes`	Optional	The kind of view being rendered, such as `'list'` or `'document'`.
`documentSubViewType`	`DocumentSubViewTypes`	Optional	The document sub-view, such as `'default'` or `'versions'`, on document routes.
`id`	`string \| number`	Optional	Part of the shared type; the built-in root slots don’t set it.

req is optional:

Sidebar, account menu, top bar, and custom Nav components receive req. Use req?.frogbot to reach FrogBot.
Login page components (beforeLogin, afterLogin, and graphics.Logo) and the dashboard slots (beforeDashboard and afterDashboard) don’t receive req. Use getCachedFrogBot() from frogbot instead.

Start here

Basics

Managing Data

Features

Ecosystem

Deployment

Config Options

Components

actions

beforeLogin and afterLogin

Sidebar slots

Account menu

Nav

Chat

graphics.Icon

graphics.Logo

Component props

​Config Options

​Components

​actions

​beforeLogin and afterLogin

​Sidebar slots

​Account menu

​Nav

​Chat

​graphics.Icon

​graphics.Logo

​Component props

Config Options

Components

actions

beforeLogin and afterLogin

Sidebar slots

Account menu

Nav

Chat

graphics.Icon

graphics.Logo

Component props