💡 Integrate SyncAI Natural Language DRep Search in DRep Directory

[bosko-m]

Area

Delegation Pillar

Is there new design needed?

Yes

What?

Introduce a natural language search feature in the DRep Directory, powered by SyncAI.
This feature will allow users to search for DReps using conversational language (e.g., "Find me all DReps with more than 100 million ADA delegated to them") using the /drep-ai-search API endpoint provided by SyncAI.

API reference: https://docs.syncgovhub.com/api-reference/drep-api

The integration should work as an alternative to the current keyword-based search, giving users more flexibility in how they explore and assess DReps.

Why?

• Improves user experience by enabling intuitive, human-friendly searches.
• Makes it easier for users to discover DReps based on specific, complex criteria without needing technical knowledge.
• Supports the goal of more informed delegation decisions by simplifying access to filtered DRep data.
• SyncAI’s response includes metadata explaining the filtering logic, increasing transparency and trust in results.

How?

• Add a “Search with SyncAI” button (with SyncAI logo) next to the current DRep Directory search bar.
• When clicked, open a search field or modal that accepts natural language queries.
• Send user input to the /drep-ai-search endpoint and display the filtered results.
• Include a “Powered by SyncAI” label and logo alongside the returned results.
• Display a summary of the filtering logic metadata returned by SyncAI to explain how results were selected.
• Maintain the existing keyword search as a parallel option.

(Optional) User Story with acceptance criteria

• A “Search with SyncAI” button is added to the DRep Directory UI.
• Users can input natural language queries that are sent to the /drep-ai-search API endpoint.
• Results are displayed using the same UI layout as existing DRep listings.
• Each result set includes a “Powered by SyncAI” label and logo.
• Existing search functionality remains unchanged and usable in parallel.

[bosko-m]

@Ciabas @MSzalowski Sync unfortunately dont have preview network support. So I suggest different implementation path for drep directory search.

• You could develop it locally and run against mainnet
• once ready we could create mocked version of the response for dev, preview and preprod and
• release the fully working piece on mainnet

[m-i-k-e]

So a simple query returns a lot of stuff.

I searched the string "Give me all dreps with more than 100m ada delegated to them",

set the page number to 1, and limit number to 1, using the SynchAI playground: https://docs.syncgovhub.com/api-reference/drep-api?playground=open

I got this in return:

{"data":[{"drepId":"drep_always_abstain","id":"be076edb-10e8-4e69-ae34-d606d769fff7","links":[],"metrics":{"participationRate":0,"votingPower":6280644114.649206,"communityAlignment":0,"proposalsVoted":0,"globalAlignment":0,"totalDelegators":109546,"totalAllowedProposals":18,"totalProposals":18},"motivations":"","name":"drep_always_abstain","objectives":"","profilePic":null,"qualifications":"","registration_date":null,"ada_power_history_data":{"ada_power":[{"label":"Sep 2024","value":36010666.982099},{"label":"Sep 2024","value":59620765.920228},{"label":"Sep 2024","value":96017268.32589},{"label":"Sep 2024","value":112311832.378443},{"label":"Sep 2024","value":128295357.736663},{"label":"Oct 2024","value":151442475.375335},{"label":"Oct 2024","value":180709814.396362},{"label":"Oct 2024","value":212407197.69827},{"label":"Oct 2024","value":248156939.697588},{"label":"Oct 2024","value":276175322.841919},{"label":"Oct 2024","value":373240860.173912},{"label":"Oct 2024","value":427013974.432723},{"label":"Nov 2024","value":452748211.456501},{"label":"Nov 2024","value":546719826.000844},{"label":"Nov 2024","value":615890848.843544},{"label":"Nov 2024","value":700982548.833866},{"label":"Nov 2024","value":797417055.108909},{"label":"Nov 2024","value":838462853.62892},{"label":"Dec 2024","value":937113217.120013},{"label":"Dec 2024","value":1041683485.741562},{"label":"Dec 2024","value":1193443762.780127},{"label":"Dec 2024","value":1247466489.914121},{"label":"Dec 2024","value":1287839176.984528},{"label":"Dec 2024","value":1354525370.772002},{"label":"Jan 2025","value":1522481204.70371},{"label":"Jan 2025","value":1633833872.950982},{"label":"Jan 2025","value":1675590287.256388},{"label":"Jan 2025","value":1764732162.664727},{"label":"Jan 2025","value":2374630821.721315},{"label":"Jan 2025","value":2390729766.632512},{"label":"Feb 2025","value":2596310240.59672},{"label":"Feb 2025","value":3209062877.313029},{"label":"Feb 2025","value":4936334075.799653},{"label":"Feb 2025","value":5125503731.966321},{"label":"Feb 2025","value":5173564845.834595},{"label":"Feb 2025","value":5347522595.754416},{"label":"Mar 2025","value":5385885543.137381},{"label":"Mar 2025","value":5422156076.017635},{"label":"Mar 2025","value":5339683946.850982},{"label":"Mar 2025","value":5466330655.728684},{"label":"Mar 2025","value":5511733222.502704},{"label":"Mar 2025","value":5562156873.917307},{"label":"Apr 2025","value":5634603098.59369},{"label":"Apr 2025","value":5659088317.754251},{"label":"Apr 2025","value":5713509849.793775},{"label":"Apr 2025","value":5731921868.663415},{"label":"Apr 2025","value":5764026121.094294},{"label":"Apr 2025","value":5927467544.635541},{"label":"May 2025","value":5953827081.736118},{"label":"May 2025","value":6040097686.870279},{"label":"May 2025","value":6077954900.579585},{"label":"May 2025","value":6135549381.820141},{"label":"May 2025","value":6249066364.030888},{"label":"May 2025","value":6252246037.784993},{"label":"Jun 2025","value":6280644114.649206}]},"status":"active","username":"drep_always_abstain","voting_history":[],"location":null,"url":null,"other_links":[],"created_at":"2025-04-09T10:27:32.788179+00:00","updated_at":"2025-06-05T03:19:15.483815+00:00"}],"meta":{"explanation":"A total of 13 DReps have more than 100 million ADA delegated to them, showcasing significant voting power within the governance system. The one currently displayed DRep has an average voting power of approximately 6.28 billion ADA from over 109,000 delegators. Despite the large delegation, this DRep has a participation and alignment score of 0.00%, indicating potential inactivity or misalignment in governance participation.","query":"Give me all dreps with more than 100m ada delegated to them","parsedQuery":{"queryType":"drep_first","drepFilters":{"minVotingPower":100000000},"supabaseParams":{"table":"drep_enriched_data","select":["drep_id","name","basic_info->ada_delegated"],"filters":[{"column":"basic_info->ada_delegated","operator":">","value":100000000}],"limit":1},"orderBy":[{"column":"basic_info->ada_delegated","direction":"desc","nullsPosition":"last","excludeZeros":true},{"column":"participation_data->rate","direction":"desc","nullsPosition":"last","excludeZeros":true},{"column":"basic_info->total_delegators","direction":"desc","nullsPosition":"last","excludeZeros":true},{"column":"alignment_data->score","direction":"desc","nullsPosition":"last","excludeZeros":true}],"explanation":"Retrieving all DReps with more than 100 million ADA delegated to them, ordered by ADA delegated, participation rate, delegators, and alignment score.","proposalFilters":{},"voteFilters":{"voterRole":"DRep"},"pagination":{"page":1,"limit":1,"total":13,"pages":13}},"queryIntent":"drep_first","matchedProposals":[],"resultCount":1},"pagination":{"page":1,"limit":1,"total":13,"pages":13},"timings":{"intent_determination":2246,"query_parsing":6585,"database_queries":204,"data_transformation":0,"explanation_generation":2588,"proposal_validation":6585,"total":11623}}

Let's break it down:

SynchAI returned:
"motivations"
"name"
"objectives"
"profilePic"
"qualifications"
"registration_date"

plus a history of the DRep's voting power ("ada_power_history_data":)

then:

"status"
"username"
"voting_history"
"location"
"url"
"other_links"
"created_at": "2025-04-09T10:27:32.788179+00:00",
"updated_at": "2025-06-05T03:19:15.483815+00:00"

And this is SyncAI's magic: an array called "meta"

"explanation": "A total of 13 DReps have more than 100 million ADA delegated to them, showcasing significant voting power within the governance system. The one currently displayed DRep has an average voting power of approximately 6.28 billion ADA from over 109,000 delegators. Despite the large delegation, this DRep has a participation and alignment score of 0.00%, indicating potential inactivity or misalignment in governance participation.",
"query": "Give me all dreps with more than 100m ada delegated to them",
"parsedQuery": {

some more stuff that I don't yet know what it means
"queryType": "drep_first",
"queryType": "drep_first",
"drepFilters": {
"minVotingPower": 100000000
},
"supabaseParams": {
"table": "drep_enriched_data",
"select": [
"drep_id",
"name",
"basic_info->ada_delegated"
],
"filters": [
{
"column": "basic_info->ada_delegated",
"operator": ">",
"value": 100000000
}
],
"limit": 1
},
"orderBy": [
{
"column": "basic_info->ada_delegated",
"direction": "desc",
"nullsPosition": "last",
"excludeZeros": true
},
{
"column": "participation_data->rate",
"direction": "desc",
"nullsPosition": "last",
"excludeZeros": true
},
{
"column": "basic_info->total_delegators",
"direction": "desc",
"nullsPosition": "last",
"excludeZeros": true
},
{
"column": "alignment_data->score",
"direction": "desc",
"nullsPosition": "last",
"excludeZeros": true
}
],
"explanation": "Retrieving all DReps with more than 100 million ADA delegated to them, ordered by ADA delegated, participation rate, delegators, and alignment score.",
"proposalFilters": {},
"voteFilters": {
"voterRole": "DRep"
},
"pagination": {
"page": 1,
"limit": 1,
"total": 13,
"pages": 13
}
},
"queryIntent": "drep_first",
"matchedProposals": [],
"resultCount": 1
},
"pagination": {
"page": 1,
"limit": 1,
"total": 13,
"pages": 13
},
"timings": {
"intent_determination": 2246,
"query_parsing": 6585,
"database_queries": 204,
"data_transformation": 0,
"explanation_generation": 2588,
"proposal_validation": 6585,
"total": 11623
}
}

[m-i-k-e]

The interesting part is:

"explanation": "A total of 13 DReps have more than 100 million ADA delegated to them, showcasing significant voting power within the governance system. The one currently displayed DRep has an average voting power of approximately 6.28 billion ADA from over 109,000 delegators. Despite the large delegation, this DRep has a participation and alignment score of 0.00%, indicating potential inactivity or misalignment in governance participation.",
"query": "Give me all dreps with more than 100m ada delegated to them",

The AI gives an English explanation of the query results.

[m-i-k-e]

I've made a Loom video about this design.

https://www.loom.com/share/59f2b95056714faa82ae2679afa9c104?sid=114225e0-10fc-4a3f-a34a-dd76cf2bb4f9

Also, here are the wireframes from the video.

Code for the search in next comment

[m-i-k-e]

Here's the code that shows how the search results data table should look and work.

Caveat: The filter dropdown should work like the current ones on Outcomes. I'll post this in the next comment.

Please watch video for explanation.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Sortable Table Mockup</title>
  <style>
    body {
      font-family: sans-serif;
      padding: 2rem;
      background-color: #f9f9f9;
    }
    .table-container {
      background: white;
      border: 1px solid #ccc;
      border-radius: 8px;
      padding: 1rem;
      position: relative;
      overflow-x: auto;
    }
    .table-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 1rem;
    }
    .record-count {
      font-size: 0.9rem;
      color: #555;
    }
    .controls {
      display: flex;
      gap: 1rem;
      align-items: center;
      flex-wrap: wrap;
    }
    .sort-dropdown select, .filter-dropdown select {
      padding: 0.3rem 0.6rem;
      font-size: 0.9rem;
      border-radius: 4px;
      border: 1px solid #ccc;
    }
    .filter-pill {
      display: inline-flex;
      align-items: center;
      background-color: #e0f0ff;
      color: #1a73e8;
      border-radius: 20px;
      padding: 0.25rem 0.75rem;
      margin: 0.5rem 0;
      font-size: 0.8rem;
    }
    .filter-pill button {
      background: none;
      border: none;
      font-weight: bold;
      margin-left: 0.5rem;
      cursor: pointer;
      color: #1a73e8;
    }
    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 1rem;
      table-layout: fixed;
    }
    th, td {
      padding: 0.75rem;
      text-align: left;
      border-bottom: 1px solid #ddd;
      overflow-wrap: break-word;
      word-break: break-word;
    }
    th {
      user-select: none;
      position: relative;
      cursor: pointer;
    }
    th:nth-child(1), td:nth-child(1) { width: 150px; }
    th:nth-child(2), td:nth-child(2) { width: 220px; }
    th:nth-child(3), td:nth-child(3) { width: 160px; }
    th:nth-child(4), td:nth-child(4) { width: 100px; }
    th:nth-child(5), td:nth-child(5) { width: 100px; }
    th:nth-child(6), td:nth-child(6) { width: 120px; }

    td:nth-child(2) {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    td.view-details a {
      color: #1a73e8;
      text-decoration: none;
    }
    td.delegate-button button {
      background-color: #1a73e8;
      color: white;
      border: none;
      padding: 0.5rem 1rem;
      border-radius: 999px;
      cursor: pointer;
    }
    .sort-indicator {
      display: inline-block;
      width: 1rem;
      text-align: center;
      font-size: 0.75rem;
    }
    .active-sort {
      font-weight: bold;
      color: #1a73e8;
    }
    .pagination {
      margin-top: 1rem;
      display: flex;
      gap: 0.5rem;
      justify-content: flex-start;
      align-items: center;
    }
    .pagination button {
      padding: 0.5rem 1rem;
      cursor: pointer;
      background: #e0e0e0;
      border: none;
      border-radius: 6px;
    }
    .pagination span {
      font-size: 0.9rem;
      color: #333;
    }

    /* Responsive */
    @media (max-width: 768px) {
      table, thead, tbody, th, td, tr {
        display: block;
      }
      thead tr {
        display: none;
      }
      tbody tr {
        margin-bottom: 1rem;
        border: 1px solid #ddd;
        border-radius: 6px;
        background-color: #fff;
        padding: 0.5rem;
      }
      td {
        position: relative;
        padding-left: 50%;
        border: none;
        border-bottom: 1px solid #eee;
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      td::before {
        position: absolute;
        top: 0.75rem;
        left: 1rem;
        width: 45%;
        padding-right: 1rem;
        white-space: nowrap;
        font-weight: bold;
        color: #555;
      }
      td:nth-child(1)::before { content: "DRep Name"; }
      td:nth-child(2)::before { content: "DRep ID"; }
      td:nth-child(3)::before { content: "Voting Power"; }
      td:nth-child(4)::before { content: "Status"; }
      td:nth-child(5)::before { content: "Details"; }
      td:nth-child(6)::before { content: "Action"; }
    }
  </style>
</head>
<body>
<!-- content unchanged from here onward -->
<body>
  <div class="table-container">
    <div class="table-header">
      <div class="record-count" id="record-count">Found: 0 DReps</div>
      <div class="controls">
        <div class="sort-dropdown">
          Sort:
          <select id="sortSelect" onchange="handleSortChange()">
            <option value="name-asc">Name (A–Z)</option>
            <option value="name-desc">Name (Z–A)</option>
            <option value="id-asc">DRep ID (A–Z)</option>
            <option value="id-desc">DRep ID (Z–A)</option>
            <option value="balance-asc">Voting Power (Low–High)</option>
            <option value="balance-desc">Voting Power (High–Low)</option>
            <option value="status-asc">Status (A–Z)</option>
            <option value="status-desc">Status (Z–A)</option>
          </select>
        </div>
        <div class="filter-dropdown">
          Filter:
          <select id="statusFilter" onchange="handleFilterChange()">
            <option value="">All Statuses</option>
            <option value="Active">Active</option>
            <option value="Inactive">Inactive</option>
            <option value="Retired">Retired</option>
          </select>
        </div>
      </div>
    </div>
    <div id="activeFilters"></div>
    <table>
      <thead>
        <tr>
          <th id="th-name" onclick="sortTable('name')">DRep Name <span class="sort-indicator" id="name-sort">▲</span></th>
          <th id="th-id" onclick="sortTable('id')">DRep ID <span class="sort-indicator" id="id-sort">▲</span></th>
          <th id="th-balance" onclick="sortTable('balance')">Voting Power <span class="sort-indicator" id="balance-sort">▲</span></th>
          <th id="th-status" onclick="sortTable('status')">Status <span class="sort-indicator" id="status-sort">▲</span></th>
          <th></th>
          <th></th>
        </tr>
      </thead>
      <tbody id="table-body">
        <!-- Results will be inserted here -->
      </tbody>
    </table>

    <div class="pagination">
      <button onclick="prevPage()">Previous</button>
      <span id="page-indicator">Page 1 of 3</span>
      <button onclick="nextPage()">Next</button>
    </div>
  </div>

  <script>
    let currentSort = { column: 'name', direction: 'asc' };
    let currentPage = 1;
    let statusFilter = '';
    const rowsPerPage = 10;

    const statuses = ['Active', 'Inactive', 'Retired'];
    function getRandomStatus() {
      return statuses[Math.floor(Math.random() * statuses.length)];
    }

    function getRandomPower() {
      return Math.floor(Math.random() * 500000000) + 1;
    }

    function getRandomID() {
      const chars = 'abcdefghijklmnopqrstuvwxyz0123456789';
      let id = 'drep1';
      for (let i = 0; i < 53; i++) {
        id += chars.charAt(Math.floor(Math.random() * chars.length));
      }
      return id.slice(0, 20) + '...';
    }

    const names = ['Blockforge', 'Chainroot', 'Dataledger', 'CryptoNova', 'NodeFi', 'PlutusNet', 'StakeHive', 'MetaMint', 'AdaSphere', 'EpochEdge', 'Hashline', 'ByronCore', 'ForgeOne', 'ValidatorX', 'CIPVault', 'StakeLink', 'CardaNet', 'BlockMint', 'DRepify', 'Epochos'];

    const mockData = Array.from({ length: 60 }, (_, i) => ({
      name: names[i % names.length] + '_' + (i + 1),
      id: getRandomID(),
      balance: getRandomPower(),
      status: getRandomStatus()
    }));

    function sortTable(column) {
      if (currentSort.column === column) {
        currentSort.direction = currentSort.direction === 'asc' ? 'desc' : 'asc';
      } else {
        currentSort.column = column;
        currentSort.direction = 'asc';
      }
      currentPage = 1;
      updateSortIndicators();
      fetchResults();
    }

    function updateSortIndicators() {
      ['name', 'id', 'balance', 'status'].forEach(col => {
        const th = document.getElementById(`th-${col}`);
        const indicator = document.getElementById(`${col}-sort`);
        if (th && indicator) {
          if (currentSort.column === col) {
            th.classList.add('active-sort');
            indicator.textContent = currentSort.direction === 'asc' ? '▲' : '▼';
          } else {
            th.classList.remove('active-sort');
            indicator.textContent = '▲';
          }
        }
      });
    }

    function handleSortChange() {
      const [col, dir] = document.getElementById('sortSelect').value.split('-');
      currentSort = { column: col, direction: dir };
      currentPage = 1;
      updateSortIndicators();
      fetchResults();
    }

    function handleFilterChange() {
      statusFilter = document.getElementById('statusFilter').value;
      currentPage = 1;
      updateFilterPills();
      fetchResults();
    }

    function updateFilterPills() {
      const filterContainer = document.getElementById('activeFilters');
      filterContainer.innerHTML = '';
      if (statusFilter) {
        const pill = document.createElement('span');
        pill.className = 'filter-pill';
        pill.innerHTML = `Status: ${statusFilter} <button onclick="clearStatusFilter()">×</button>`;
        filterContainer.appendChild(pill);
      }
    }

    function clearStatusFilter() {
      statusFilter = '';
      document.getElementById('statusFilter').value = '';
      updateFilterPills();
      fetchResults();
    }

    function fetchResults() {
      let filtered = [...mockData];
      if (statusFilter) {
        filtered = filtered.filter(row => row.status === statusFilter);
      }

      const sorted = filtered.sort((a, b) => {
        let valA = a[currentSort.column];
        let valB = b[currentSort.column];

        if (currentSort.column === 'balance') {
          valA = Number(valA);
          valB = Number(valB);
        } else {
          valA = valA.toString().toLowerCase();
          valB = valB.toString().toLowerCase();
        }

        if (valA < valB) return currentSort.direction === 'asc' ? -1 : 1;
        if (valA > valB) return currentSort.direction === 'asc' ? 1 : -1;
        return 0;
      });

      const totalPages = Math.ceil(sorted.length / rowsPerPage);
      const startIndex = (currentPage - 1) * rowsPerPage;
      const paginated = sorted.slice(startIndex, startIndex + rowsPerPage);

      document.getElementById('table-body').innerHTML = paginated.map(row => 
        `<tr>
          <td>${row.name}</td>
          <td>${row.id}</td>
          <td>${row.balance.toLocaleString()}</td>
          <td>${row.status}</td>
          <td class="view-details"><a href="#">View details</a></td>
          <td class="delegate-button"><button>Delegate</button></td>
        </tr>`
      ).join('');

      document.getElementById('page-indicator').textContent = `Page ${currentPage} of ${totalPages}`;
      document.getElementById('record-count').textContent = `Found: ${filtered.length} DReps`;

      const sortValue = `${currentSort.column}-${currentSort.direction}`;
      document.getElementById('sortSelect').value = sortValue;
    }

    function prevPage() {
      if (currentPage > 1) {
        currentPage--;
        fetchResults();
      }
    }

    function nextPage() {
      const totalPages = Math.ceil(mockData.length / rowsPerPage);
      if (currentPage < totalPages) {
        currentPage++;
        fetchResults();
      }
    }

    updateSortIndicators();
    updateFilterPills();
    fetchResults();
  </script>
</body>
</html>

[m-i-k-e]

The filter dropdown should follow the example on outcomes.