# Overview

With the API connectors, you can access data from connected APIs and services. The Design System provides you with a set of components that you can use to build your extension. The design sytstem helps you build extensions for the Stage platform. It is built on top of [React](https://reactjs.org) and [TypeScript](https://www.typescriptlang.org). The API & Design System are designed with simplicity in mind, so you can focus on building your extension.

## API Connectors

The API connectors are the building blocks of your extension. They allow you to access data from connected APIs and services. The API connectors are designed to be simple and easy to use. You can use them to build your extension.

### Installation

To install the API connectors, you need to run the following command:

```shell
npm i @stagehq/api
```

{% hint style="warning" %}
This doesn't work atm, we are currently under construction.
{% endhint %}

### Usage

The following example shows how to use the API connectors to fetch data from GitHub:

```tsx
import { Block, List } from "@stagehq/ui";
import * as API from "@stagehq/api";
import { useEffect, useState } from "react";

export default function Extension() {
  const [data, setData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const response = await API.gh.get("/users/:owner/repos");
      setData(response.data);
    };
    fetchData();
  }, []);

  return (
    <Block
      title="Repositories"
      imagePath="https://source.unsplash.com/random/400x200"
      actions={link: { url="https://github.com" }}
      size={2}
    >
      <List>
        {data.map((item) => (
          <List.Item key={item.id} title={item.title} />
        ))}
      </List>
    </Block>
  );
};
```

## Design System

### Installation

You can install the Stage Design System with npm:

```shell
npm i @stagehq/ui
```

{% hint style="warning" %}
This doesn't work atm, we are currently under construction.
{% endhint %}

### Usage

You can import the Stage Design System components in your extension:

```tsx
import { Block, Header, Actions, Action, Pills, List } from "@stagehq/ui";

export default function Extension() {
  <Block
    title="Contributions"
    imagePath="https://source.unsplash.com/random/400x200"
    actions={link: { url="https://github.com" }}
    size={2}
  >
    <Pills pills={["react.js", "vue.js", "angular.js", "ember.js", "svelte.js"]} />
    <List>
      {openSource.map((project) => (
        <List.Item
          type={project.type}
          title={project.title}
          additional={project.additional}
          subtitle={project.subtitle}
          count={project.count && { value: project.count?.value, icon: project.count?.icon }}
        />
      ))}
    </List>
  </Block>
}
```

## Next Steps

Now that you know how to use the API connectors and the Design System, you can start building your extension. You can learn more about the API connectors and the Design System in the following Blocks:

* [API Connectors](https://github.com/stagehq/stage/blob/main/docs/api-reference/api-connectors/README.md)
* [Design System](https://github.com/stagehq/stage/blob/main/docs/api-reference/broken-reference/README.md)


---

# 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://developers.getstage.app/api-reference/overview.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.