***

title: Build your first AI Studio integration
description: Walk through integrating AISquare into your application step by step.
----------------------------------------------------------------------------------

This guide walks you through integrating AISquare into your application.

By the end, you will:

* Fetch data from an AI Studio
* Display experiences and resources
* Build a basic content feed

***

## What you are building

You will create a simple flow that:

1. Selects an AI Studio
2. Fetches its experiences
3. Displays resources to users

***

## Step 1: Choose a studio

Every AI Studio is identified by a unique URL.

Example:

```
ai-research-studio
```

You will use this value in all requests.

***

## Step 2: Fetch experiences

Use the flattened experiences endpoint to retrieve content.

### Endpoint

```
POST /api/v1/aistudios/experiences/flattened/
```

### Example request

```bash
curl -X POST https://api.aisquare.com/api/v1/aistudios/experiences/flattened/ \
  -H "Content-Type: application/json" \
  -d '{
    "url": "ai-research-studio"
  }'
```

### What this returns

A list of resources across all experiences.

Each item includes:

* Experience title
* Resource type
* Resource title
* Creator details
* Engagement metrics

***

## Step 3: Render content

Each response item represents a single resource.

Example:

```json
{
  "experience_title": "Advanced Machine Learning Models",
  "resource_type": "AI_EXPERT",
  "resource_title": "Image Classification Expert"
}
```

### Suggested UI mapping

| Field              | Use in UI             |
| ------------------ | --------------------- |
| `experience_title` | Section or grouping   |
| `resource_title`   | Card title            |
| `resource_type`    | Badge or label        |
| `metrics`          | Engagement indicators |

***

## Step 4: Add filtering and sorting

You can refine results using query parameters.

### Example

```
POST /api/v1/aistudios/experiences/flattened/?ordering=trending&search=ai
```

### Common options

| Parameter  | Description                     |
| ---------- | ------------------------------- |
| `search`   | Search across content           |
| `ordering` | `trending`, `newest`, `popular` |
| `type`     | `AI_EXPERT`, `AI_NOTE`, `QUEST` |

***

## Step 5: Personalize the experience

To improve user experience, you can:

### Continue where user left off

```
POST /api/v1/aistudios/continue-where-left-off/
```

Returns recently viewed resources.

### Show trending content

```
POST /api/v1/aistudios/community-pulse/
```

Returns trending resources with activity insights.

***

## Step 6: Structure your integration

A typical integration looks like:

```
Frontend
  ↓
Your backend
  ↓
AISquare API
```

Your backend should:

* Handle authentication
* Call AISquare APIs
* Return processed data to frontend

### Example flow

1. User opens app
2. Backend fetches experiences
3. Frontend displays resources
4. User interacts with content

***

## What you've built

You now have:

* A working AI Studio content feed
* Structured resource data
* Filtering and sorting

***

## Next steps

Expand your integration:

* Use [Creator Profiles](/docs/insights/working-with-creators) to show author details
* Use [Collections](/docs/product/collections) to group experiences
* Use [Metrics and analytics](/docs/insights/metrics-and-analytics) for analytics
* Use [Activity APIs](/docs/product/activity-and-personalization) for personalization
* Learn about [Integration patterns](/docs/integration-guides/integration-patterns) for architecture guidance
* Understand [Search, filtering, and pagination](/docs/data-ux-guides/search-filtering-and-pagination) for refining results
* Review [Authentication](/docs/getting-started/authentication) setup