Components structure in '/apps' route in open source ACI.dev platform.

In this article, we are going to review components structure in /apps route in ACI.dev platform. We will look at: Locating the /apps route apps folder Components structure in apps/page.tsx This /apps route loads a page that looks like below: ACI.dev is the open source platform that connects your AI agents to 600+ tool integrations with multi-tenant auth, granular permissions, and access through direct function calling or a unified MCP server. Locating the /apps route ACI.dev is open source, you can find their code at aipotheosis-labs/aci. This codebase has the below project structure: apps backend frontend frontend ACI.dev is built using Next.js, I usually confirm this by looking for next.config.ts at the root of the frontend folder. And there is a src folder and app folder inside this src folder. This means this project is built using app router. From here on, it makes it super easy to locate /apps route since this is going to be a folder, according to how app router works in Next.js You will find the apps folder in the above image. apps folder apps folder has the below structure: [appName] — folder page.tsx- file Components structure in apps/page.tsx Below is the code picked from aci.dev/frontend/…/apps/page.tsx: return ( App Store Browse and connect with your favorite apps and tools. ); But when you view at /apps route, it looks like below: This means the sidebar and the header are defined in layout.tsx somewhere. So mainly 2 components are used here — Separator and AppGrid Separator component This component is imported as shown below in apps/page.tsx import { Separator } from "@/components/ui/separator"; AppGrid component This component is imported as shown below in apps/page.tsx import { AppGrid } from "@/components/apps/app-grid"; So components folder has ui folder, this is full of Shadcn components and apps folder that contains components specific to this route”?” About me: Hey, my name is Ramu Narasinga. I study large open-source projects and create content about their codebase architecture and best practices, sharing it through articles, videos. Configure features such as Changesets, Supabase authentication in your Next.js project using Think Throo CLI. Business enquiries — ramu@thinkthroo.com My Github — https://github.com/ramu-narasinga My website — https://ramunarasinga.com My YouTube channel — https://www.youtube.com/@ramu-narasinga Learning platform — https://thinkthroo.com Codebase Architecture — https://app.thinkthroo.com/architecture Best practices — https://app.thinkthroo.com/best-practices Production-grade projects — https://app.thinkthroo.com/production-grade-projects References: https://platform.aci.dev/apps https://github.com/aipotheosis-labs/aci/blob/main/frontend/src/app/apps/page.tsx https://github.com/aipotheosis-labs/aci/blob/main/frontend/src/components/apps/app-grid.tsx#L21 https://github.com/aipotheosis-labs/aci/tree/main/frontend/src/app/apps

  return (
    <div>
      <div className="m-4">
        <h1 className="text-2xl font-bold">App Store</h1>
        <p className="text-sm text-muted-foreground">
          Browse and connect with your favorite apps and tools.
        </p>
      </div>
      <Separator />

      <div className="m-4">
        <AppGrid apps={apps} loading={loading} />
      </div>
    </div>
  );

import { Separator } from "@/components/ui/separator";

import { AppGrid } from "@/components/apps/app-grid";

Related Posts

Node v20.18.0 (LTS)

Apr 26, 2025  0

RavenDB 7.0 Released: Moving to NLog

Apr 26, 2025  0

Mini projet architecture d'application SPRING BOOT +Ang...

Apr 27, 2025  0