Skip to main content

Agents (Avatars Section)

Every screen in this section shares one layout: 1920×1080px, a dark blue gradient background (#122942 → #2f5e99), a mountain background image with blur/overlay, and a top navigation bar with five icons (Study, AMADEQ, Home, Avatars, Library). The Avatars tab is active.

6.1 My Library / My Agents (5394:21614)​

Purpose: browsing and managing a personal library of AI agents.

Top tab switcher

  • Two tabs: My Agents (active) | Marketplace.
  • A navigator icon is centred between the tabs.

Subject filter bar (horizontal scroll)

  • ← / → arrows for scrolling.
  • Categories: Dev, Biology, Finance, Math, Text (active), Art, Ecology.
  • The active category is gold with an underline, or pill-styled.

Sort and search panel

  • A Stars dropdown for sorting by rating.
  • A Male filter for agent gender.
  • A Price dropdown (Free / Less / More).
  • A Sort button.
  • A Search Agent... box with a submit icon.

Agent card grid (AvatarCardPc)

  • Component: 320×426px.
  • Contents: a 3D avatar image, tag badges, a short description, and the agent's name in gold on the bottom line.
  • Active state (BoxPc): a blue gradient linear-gradient(-2.75deg, rgb(46,94,153)...).
  • The "+" card (Variant3): a large + icon in the centre for adding a new agent.
  • The first row is active (100 % opacity); the second row is dimmed (50 % opacity).

Technical requirements

  • GET /api/library/agents → an array of agents.
  • Filters are passed as query params: ?subject=text&sort=stars&gender=male.
  • Pagination or infinite scroll for large libraries.
  • Empty-library state: show the + card with the text "Add your first agent".

6.2 Marketplace agent detail — buyer view (5515:21453)​

Purpose: the agent's detail page in the marketplace, for viewing and purchase.

Top tab switcher: My Agents | [navigator icon] | Marketplace (active).

Three-column layout

Left column (≈512px)

  • The 3D avatar frame (full height; interactive?).
  • A Show Demo button (gold gradient, absolutely positioned in the bottom-left corner).

Centre column

  • Agent name: Adam (gold, large heading).
  • Rating: ★★★★☆ 4.2 / 5.
  • Tags: Programming, Math (pill badges).
  • Description: "A confident and reliable AI mentor specializing in programming and mathematics…".
  • Price: $32 (a gold gradient pill).
  • CTA button Get Agent (gold border, gold text).
  • Hidden buttons: Adam settings (opacity 0) and Close Adam.

Right column — comments

  • A list of reviews (6 entries): a circular 64px avatar, the date 02.05.26, and the review text.
  • A comment input plus a send button (a round arrow).

Technical requirements

  • GET /api/marketplace/agents/:id → the agent's data.
  • POST /api/marketplace/agents/:id/purchase → purchase.
  • GET /api/marketplace/agents/:id/reviews → the review list.
  • POST /api/marketplace/agents/:id/reviews → add a review (authenticated).
  • Demo: opens an interactive window/overlay with the AI avatar.

6.3 Agent page — creator/owner view (5401:17886)​

Purpose: managing your own agent, for creators and owners.

Top tab switcher: My Agents | Marketplace.

Three-column layout, analogous to §6.2.

Left column: the 3D avatar frame.

Centre column — management rows

SectionStatus labelAction
StudyTraining statusReteach
CustomizationCustomization statusRecustomize
Agent DemoDemo statusCreate Demo (primary style)
Agent priceCurrent priceSet price (dropdown)
  • CTA: Publish to Marketplace (gold border, gold text #c9a227).
  • Buttons: Adam settings (50 % opacity) and Close Adam.

Right column: the same comment feed and input as in §6.2.

Technical requirements

  • GET /api/agents/:id → your own agent's data.
  • PATCH /api/agents/:id → update settings.
  • POST /api/agents/:id/publish → publish to the marketplace.
  • POST /api/agents/:id/demo → create a demo.
  • Agent statuses: training / ready / published / draft.
  • Publish to Marketplace is enabled only when every section has the status ready.

6.4 Node 5515:20720 — needs further analysis​

The node's contents were too large for a single request (> 100 KB). From a preliminary look at its assets (Vector, Round, Arrow, Twitter icons, MountainBackground, Frame1, Frame22) it may be an extended marketplace or library screen. It needs separate investigation.