Structured Data Overview

Display rich, interactive data in Mirra mobile through structured data responses

Structured Data enables third-party integrations to display rich, interactive content in the Mirra mobile app. Instead of plain text responses, integrations can return structured data that renders as lists, cards, and other visual components.

What is Structured Data?

When your integration sends messages to Mirra via the SDK, you can include a structuredData array that describes how to display results visually. The mobile app interprets this data and renders appropriate UI components.

Display Types

Mirra supports two primary display types:

List

Display collections of items (contacts, files, messages, etc.) with optional multi-select for user interaction.

{
  "displayType": "list",
  "templateId": "my_contacts_list",
  "data": {
    "items": [
      { "id": "1", "title": "John Doe", "subtitle": "john@example.com", "icon": "person" },
      { "id": "2", "title": "Jane Smith", "subtitle": "jane@example.com", "icon": "person" }
    ]
  },
  "interactions": {
    "allowSelection": true,
    "allowMultiSelect": true
  }
}

Card

Display collapsible cards with execution details, step sequences, or summary information.

{
  "displayType": "card",
  "templateId": "execution_details",
  "data": {
    "title": "Task Complete",
    "badges": [{ "label": "3 steps", "variant": "default" }],
    "steps": [
      { "id": "1", "title": "Fetched data", "status": "success" },
      { "id": "2", "title": "Processed results", "status": "success" },
      { "id": "3", "title": "Saved to database", "status": "success" }
    ]
  }
}

Use Cases

• Search results - Display lists of contacts, files, messages, or calendar events
• Execution logs - Show step-by-step progress of automated tasks
• Permission prompts - Present selectable options for user approval
• Data summaries - Aggregate statistics with visual badges

Integration with SDK

Include structured data when sending messages via the Mirra SDK:

await mirra.mirraMessaging.sendMessage({
  groupId: "chat-123",
  content: "Found 5 contacts matching your search",
  structuredData: [{
    displayType: "list",
    templateId: "contact_search",
    data: {
      items: contacts.map(c => ({
        id: c.id,
        title: c.name,
        subtitle: c.email,
        icon: "person"
      }))
    }
  }]
});

Next Steps

• Types Reference - Complete type definitions
• Examples - Practical integration examples