ACI.dev

ACI.dev is an open-source tool-calling platform designed to connect over 600 tools to agentic IDEs or custom AI agents. It provides intent-aware tool access with multi-tenant authentication, granular permissions, and dynamic tool discovery.

Developers can interact with tools via:

1. A Unified Model-Context-Protocol (MCP) server.
2. Lightweight SDKs (Python and TypeScript) for direct function calling.

Key use cases include VibeOps (automating DevOps tasks like provisioning and deployment via Vercel, Supabase, or Cloudflare) and building personal assistants, research agents, or customer support agents.

The frontend follows a standard Next.js structure:

• src/app: Next.js App Router folder containing the portal pages.
• src/components: Custom components, with src/components/ui containing shadcn/ui components.
• src/hooks: Custom React hooks.
• src/lib/api: Functions for interacting with the Aipolabs backend API.
• src/lib/types: Types for Aipolabs backend API responses.
• src/lib/utils.ts: Utility functions.
• __test__: Test files (should mirror the structure of src/app).

To enable global search, pass searchBarProps to the EnhancedDataTable and ensure the desired columns have enableGlobalFilter: true set in their definition.

<EnhancedDataTable
  columns={columns}
  data={data}
  searchBarProps={{ placeholder: "Search..." }}
/>

Execute the test suite using pytest inside the test-runner container:

docker compose exec test-runner pytest

Enable pagination by passing the paginationOptions prop to the EnhancedDataTable component.

<EnhancedDataTable
  columns={columns}
  data={data}
  paginationOptions={{
    initialPageIndex: 0,
    initialPageSize: 10,
  }}
/>

The table automatically generates dropdown filter menus for columns that meet two criteria:

1. enableColumnFilter: true is set.
2. filterFn: "arrIncludes" is specified.

This is particularly useful for array-type columns like tags.

// Using dropdown filtering for tag arrays
columnHelper.accessor("tags", {
  header: "Tags",
  cell: (info) => (
    <div className="flex flex-wrap gap-2">
      {info.getValue().map((tag) => (
        <span key={tag} className="px-2 py-1 bg-gray-100 rounded-md">
          {tag}
        </span>
      ))}
    </div>
  ),
  enableGlobalFilter: true,
  enableColumnFilter: true, // Enable column filtering
  filterFn: "arrIncludes", // Specify array filtering function
});

To run the full ACI.dev platform (including the backend server and the frontend portal) on your local machine, you must follow the specific setup instructions located in the component-specific README files:

• Backend setup: Refer to backend/README.md.
• Frontend setup: Refer to frontend/README.md.

Depending on your integration needs, you can use the following resources:

• Unified MCP Server: For connecting to agentic IDEs. aci-mcp repository.
• Python SDK: For direct function calling in Python environments. aci-python-sdk repository.
• TypeScript SDK: For direct function calling in TypeScript environments. aci-typescript-sdk repository.

To run the Dev Portal locally, you must first have the backend running via Docker Compose. Ensure you follow the backend setup instructions, specifically the Webhooks section for local end-to-end development.

1. Navigate to the frontend directory.
2. Install dependencies using npm (note the requirement for --legacy-peer-deps due to React 19 compatibility):

   npm install --legacy-peer-deps

3. Configure environment variables by copying the example file:

   cp .env.example .env

4. Start the development server:

   npm run dev

5. Sign up on the local dev portal. This triggers a PropelAuth webhook that automatically creates a test project and agent in your local database.

To enable row selection, provide rowSelectionProps to the EnhancedDataTable. You must manage the selection state (e.g., using useState) and provide a getRowId function.

const [rowSelection, setRowSelection] = useState({});

<EnhancedDataTable
  columns={columns}
  data={data}
  rowSelectionProps={{
    rowSelection,
    onRowSelectionChange: setRowSelection,
    getRowId: (row) => row.id,
  }}
/>;

Before integrating apps, ensure your backend and frontend environments are running. Use Docker for the backend and a Next.js server for the frontend.

1. Backend: Build and start Docker containers.
2. Database: Initialize the database with seed data.
3. Frontend: Run the Next.js development server.

# In the backend directory, build and start containers
cd backend
docker compose up --build

# In a separate terminal, initialize the database with default apps and a test user
docker compose exec runner ./scripts/seed_db.sh

# In the frontend directory
cd frontend && npm run dev

The parameters object extends JSON Schema with a visible field to control which parameters are exposed to AI agents. This allows a separation between user-facing intent and system-level technical details.

Best Practices:

• Every object level in the parameters schema must have a visible field.
• Authentication details must be handled in app.json, never in function parameters.
• Use additionalProperties: false for strict validation.