Skip to main content
You can easily extend Studio with custom pages. You can do it by providing customRoutes property: 
export default defineConfig({
  customRoutes: [
    {
      type: "agent",
      agent: "weather-chat",
      title: <><Book className="size-4" /> <span>Custom Page</span></>,
      route: {
        path: "/custom-page",
        Component: CustomPage
      }
    },
    {
      type: "root",
      route: {
        path: "/lorem-ipsum",
        Component: CustomPage
      }
    }
  ]
})
There are 2 types of custom routes:
  • root - these routes are available even if user is not logged in
  • agent - these routes are available only if user is logged in and is on the agent page