Оффлайн
- Регистрация
- 1 Мар 2015
- Сообщения
- 16,064
- Баллы
- 155
In this article, we are going to review API layer in route in . We will look at:
This /apps/GITHUB 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/GITHUB route
ACI.dev is open source, you can find their code at . This codebase has the below project structure:
ACI.dev is built using Next.js, I usually confirm this by looking for 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/GITHUB route since this is going to be a folder, according to how app router works in Next.js
You will find the in the above image. [appName] here indicates that this is dynamic route. There won’t be any GITHUB folder, instead this is a param accessible in apps/[appName]/page.tsx
apps/[appName] folder
apps folder has the below structure:
It contains only 1 file, page.tsx.
API layer in apps/[appName]
This below code is picked from .
useEffect(() => {
async function loadData() {
try {
const apiKey = getApiKey(activeProject);
const app = await getApp(appName, apiKey);
setApp(app);
const functions = await getFunctionsForApp(appName, apiKey);
setFunctions(functions);
const appConfig = await getAppConfig(appName, apiKey);
setAppConfig(appConfig);
} catch (error) {
console.error("Error fetching app data:", error);
}
}
loadData();
}, [appName, activeProject]);
getApiKey:
This below code is imported from
import { Project } from "@/lib/types/project";
export function getApiKey(project: Project, agentId?: string): string {
if (
!project ||
!project.agents ||
project.agents.length === 0 ||
!project.agents[0].api_keys ||
project.agents[0].api_keys.length === 0
) {
throw new Error(
`No API key available in project: ${project.id} ${project.name}`,
);
}
if (agentId) {
const agent = project.agents.find((agent) => agent.id === agentId);
if (!agent) {
throw new Error(`Agent ${agentId} not found in project ${project.id}`);
}
return agent.api_keys[0].key;
}
return project.agents[0].api_keys[0].key;
}
getApp
is defined as shown below:
export async function getApp(
appName: string,
apiKey: string,
): Promise<App | null> {
const apps = await getApps([appName], apiKey);
return apps.length > 0 ? apps[0] : null;
}
getFunctionsForApp
export async function getFunctionsForApp(
appName: string,
apiKey: string,
): Promise<AppFunction[]> {
const params = new URLSearchParams();
params.append("app_names", appName);
const response = await fetch(
`${process.env.NEXT_PUBLIC_API_URL}/v1/functions?${params.toString()}`,
{
method: "GET",
headers: {
"X-API-KEY": apiKey,
},
},
);
if (!response.ok) {
throw new Error(
`Failed to fetch functions: ${response.status} ${response.statusText}`,
);
}
const functions = await response.json();
return functions;
}
This above code is picked from .
About me:
Hey, my name is . 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 .
Business enquiries — ramu@thinkthroo.com
My Github —
My website —
My YouTube channel —
Learning platform —
Codebase Architecture —
Best practices —
Production-grade projects —
References:
Locating the /apps/GITHUB route
apps/GITHUB folder
API Layer in apps/GITHUB/page.tsx
This /apps/GITHUB 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/GITHUB route
ACI.dev is open source, you can find their code at . This codebase has the below project structure:
apps
backend
frontend
ACI.dev is built using Next.js, I usually confirm this by looking for 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/GITHUB route since this is going to be a folder, according to how app router works in Next.js
You will find the in the above image. [appName] here indicates that this is dynamic route. There won’t be any GITHUB folder, instead this is a param accessible in apps/[appName]/page.tsx
apps/[appName] folder
apps folder has the below structure:
- - file
It contains only 1 file, page.tsx.
API layer in apps/[appName]
This below code is picked from .
useEffect(() => {
async function loadData() {
try {
const apiKey = getApiKey(activeProject);
const app = await getApp(appName, apiKey);
setApp(app);
const functions = await getFunctionsForApp(appName, apiKey);
setFunctions(functions);
const appConfig = await getAppConfig(appName, apiKey);
setAppConfig(appConfig);
} catch (error) {
console.error("Error fetching app data:", error);
}
}
loadData();
}, [appName, activeProject]);
getApiKey:
This below code is imported from
import { Project } from "@/lib/types/project";
export function getApiKey(project: Project, agentId?: string): string {
if (
!project ||
!project.agents ||
project.agents.length === 0 ||
!project.agents[0].api_keys ||
project.agents[0].api_keys.length === 0
) {
throw new Error(
`No API key available in project: ${project.id} ${project.name}`,
);
}
if (agentId) {
const agent = project.agents.find((agent) => agent.id === agentId);
if (!agent) {
throw new Error(`Agent ${agentId} not found in project ${project.id}`);
}
return agent.api_keys[0].key;
}
return project.agents[0].api_keys[0].key;
}
getApp
is defined as shown below:
export async function getApp(
appName: string,
apiKey: string,
): Promise<App | null> {
const apps = await getApps([appName], apiKey);
return apps.length > 0 ? apps[0] : null;
}
getFunctionsForApp
export async function getFunctionsForApp(
appName: string,
apiKey: string,
): Promise<AppFunction[]> {
const params = new URLSearchParams();
params.append("app_names", appName);
const response = await fetch(
`${process.env.NEXT_PUBLIC_API_URL}/v1/functions?${params.toString()}`,
{
method: "GET",
headers: {
"X-API-KEY": apiKey,
},
},
);
if (!response.ok) {
throw new Error(
`Failed to fetch functions: ${response.status} ${response.statusText}`,
);
}
const functions = await response.json();
return functions;
}
This above code is picked from .
About me:
Hey, my name is . 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 .
Business enquiries — ramu@thinkthroo.com
My Github —
My website —
My YouTube channel —
Learning platform —
Codebase Architecture —
Best practices —
Production-grade projects —
References: