# 4) API

API, or application programming interface, is a set of tools and protocols that allows different software systems to communicate with each other. In a frontend system design, API plays a crucial role in connecting the frontend components of the application with the backend services and data.

There are two main types of API in a frontend system design: component API and client/server API.

Component API refers to the interface that a component of the frontend application exposes to other components. This API allows other components to access the functionality and state of the component and interact with it. For example, a button component may expose an API that allows other components to change the text or color of the button.

Client/server API, on the other hand, refers to the interface that the frontend application uses to communicate with the backend services and data. This API allows the frontend application to send requests to the backend and receive responses, allowing the application to retrieve and update data as well as perform other backend operations. For example, a frontend application may use a client/server API to retrieve a list of products from a backend database or submit a form to create a new user account.

In summary, API plays a vital role in a frontend system design by allowing components to communicate and interact with each other, as well as allowing the frontend application to communicate with the backend services and data.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://riceball.gitbook.io/frontend-dev-guide/frontend-interview-guide/frontend-system-design/what-is-frontend-system-design/parts-of-the-frontend-system-design/4-api.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.