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 (
    <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>
  );

But when you view at /apps route, it looks like below:

![](https://cdn-images-1.medium.com/max/1000/1*fv5IsS37-rwBGOZQBanEJg.png align="left")

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