***

title: Content modeling guide
description: How AISquare structures content and how to use it to build your UI.
--------------------------------------------------------------------------------

This guide explains how AISquare structures content and how you should use it to build your UI.

***

## Overview

AISquare organizes content into a structured hierarchy:

```
AI Studio (Publication)
 ├── Experiences
 │     └── Resources
```

Understanding this structure is key to building:

* Content feeds
* Learning flows
* Discovery pages

***

## Core building blocks

### AI Studio

The top-level container.

Represents:

* A workspace
* A content hub
* A themed collection of experiences

Example:

```
ai-research-studio
```

### Experience

An experience is a logical grouping of content.

Think of it as:

* A topic
* A module
* A journey

Example: "Advanced Machine Learning Models"

### Resource

A resource is the actual content unit.

Each experience can contain multiple resources.

#### Resource types

| Type        | Use case                       |
| ----------- | ------------------------------ |
| `AI_EXPERT` | Interactive AI systems         |
| `AI_NOTE`   | Educational or written content |
| `QUEST`     | Challenges or tasks            |
| `PODCAST`   | Audio content                  |

***

## Two response formats

AISquare APIs return data in two ways.

### 1. Flattened format (recommended)

Each resource is returned as a separate item.

Example:

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

**Why use this:**

* Easy to render in lists
* Simple for frontend mapping
* No nested parsing needed

**Best for:** feeds, search results, discovery pages.

### 2. Nested format (less common)

Experiences contain resources inside them.

**When to use:** detailed experience view, structured content pages.

***

## UI modeling patterns

### 1. Feed-based UI (most common)

Use flattened data to create a scrollable feed.

```
[ AI Expert Card ]
[ AI Note Card ]
[ Quest Card ]
```

### 2. Grouped by experience

Group resources under their experience.

```
Experience: Advanced ML
  - AI Expert
  - AI Note
```

### 3. Collection-based UI

Use collections to build:

* Playlists
* Courses
* Learning paths

***

## Mapping API fields to UI

| API field          | UI usage                 |
| ------------------ | ------------------------ |
| `experience_title` | Section header           |
| `resource_title`   | Card title               |
| `resource_type`    | Badge / icon             |
| `cover_image`      | Thumbnail                |
| `creator`          | Author info              |
| `metrics`          | Likes, views, engagement |

***

## Handling multiple resource types

Different resource types should be rendered differently.

Example:

```python
if resource_type == "AI_EXPERT":
    show interactive UI

if resource_type == "AI_NOTE":
    show reading layout

if resource_type == "QUEST":
    show challenge UI
```

***

## Using metrics in UI

Metrics help prioritize and enhance UX.

Use them for:

* Sorting (trending, popular)
* Highlighting popular content
* Showing engagement

***

## Search and filtering

Combine filters to refine content:

* Search by keyword
* Filter by type
* Filter by category or tags

***

## Designing for scale

As content grows:

### Use pagination

Avoid loading everything at once.

### Use lazy loading

Load more content as users scroll.

### Cache responses

Improve performance for frequently accessed data.

***

## Common mistakes to avoid

### Treating experiences as content items

Remember:

* **Experience** = container
* **Resource** = actual content

### Ignoring resource types

Different types require different UI handling.

### Overfetching data

Always use pagination and filters.

***

## Putting it all together

1. Fetch flattened resources
2. Map each item to UI card
3. Group or filter if needed
4. Display in feed or sections

***

## Related pages

* [Core Concepts](/docs/getting-started/core-concepts) — understand the entity hierarchy
* [AI Studios](/docs/product/ai-studios) — fetch experiences and resources
* [Collections](/docs/product/collections) — group experiences into playlists and paths
* [Search, filtering, and pagination](/docs/data-ux-guides/search-filtering-and-pagination) — refine and paginate results
* [Working with creators](/docs/insights/working-with-creators) — display author information
* [Metrics and analytics](/docs/insights/metrics-and-analytics) — use engagement data in UI
* [Build your first integration](/docs/integration-guides/build-your-first-ai-studio-integration) — end-to-end integration guide