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. Email: ramu.narasinga@gmail.com

Tired of AI-generated code that works but nobody understands?

I spent 3+ years studying OSS codebases and wrote 350+ articles on what makes them production-grade. I built an open source tool that reviews your PR against your existing codebase patterns.

Your codebase. Your patterns. Enforced.

Get started for free — thinkthroo.com