Version: Latest

Build your first Dashboard with the AlphaSense SDK

This how-to guide will lead developers through building a standard Dashboard with 3 searches built in.

Quick Start & Starting From Scratch

Before diving into the quick start guide or starting from scratch, ensure you meet the following requirements:

Requirements

Node.js: Version 14.0.0 or higher. You can check your current version by running node -v in your terminal.
Programming Language: Ensure you have the latest version of your preferred programming language installed. For JavaScript/TypeScript projects, the Node.js version requirement applies.

You can create a new project with the help of the project template. To create a new project, run the following command:

npx @alphasense/sdk-create-app my-dashboard

This command will create a new project with the following structure:

my-dashboard
├── node_modules
├── alphasense.config.ts
├── index.ts
├── package.json
└── tsconfig.json

After updating the configuration (alphasense.config.ts file), you can generate the typings for the queries by running the following command:

npm run generate

After generating the typings, you can start using the SDK in your project! Update the index.ts file however you want, and you can run the code with the following command:

npm run dev

You can see the example result in the console if you have a valid configuration. Feel free to modify index.ts to make different queries.

Configuration

The SDK checks for the configuration for the following inputs to make sure the SDK is propertly authenticated:

// Typescript (alphasense.config.ts)
import {AlphaSenseConfig} from '@alphasense/sdk-client'

const config: AlphaSenseConfig = {
  username: '<your-username>',
  password: '<your-password>',
  apiKey: '<your-api-key>',
  clientId: '<your-client-id>',
  clientSecret: '<your-client-secret>',
}

export default config

Building the Search Queries

To start, you will need to build the search queries that you want to use. We will create a new file called api.ts that will contain everything in relation to extracting information from AlphaSense. Here is an example of how to build the search queries with various different filters:

const searchQueries = [
  {
    // Tech IPOs
    filter: {
      keyword: {query: 'tech ipo'},
      date: {preset: 'LAST_12_MONTHS'},
      type: {ids: ['1030']},
    },
    sorting: {field: 'RELEVANCE', direction: 'DESC'},
    limit: 10,
  },
  {
    // M&A
    filter: {
      keyword: {query: 'jv OR m&a'},
      date: {preset: 'LAST_12_MONTHS'},
      type: {ids: ['1030']},
    },
    sorting: {field: 'RELEVANCE', direction: 'DESC'},
    limit: 10,
  },
  {
    // Funding
    filter: {
      keyword: {query: 'funding or series a or series b or series c'},
      date: {preset: 'LAST_12_MONTHS'},
      type: {ids: ['68']},
    },
    sorting: {field: 'RELEVANCE', direction: 'DESC'},
    limit: 10,
  },
]

Searching the Documents

After you have your search queries ready, you can start searching the documents by building out the client and fetching each of the results:

// Function to search documents
const searchDocuments = async (
  filter: Record<string, any>,
  sorting: Record<string, any>,
  limit: number,
) => {
  const client = await createClient(config)
  const resp = await client.query({
    search: {
      documents: {
        id: true,
        title: true,
        releasedAt: true,
        type: {
          ids: true,
        },
      },
      __args: {
        limit,
        filter,
        sorting,
      },
    },
  })
  return resp?.search?.documents || []
}

// Function to fetch all results
async function fetchAllResults() {
  const allResults = []
  for (const query of searchQueries) {
    const results = await searchDocuments(query.filter, query.sorting, query.limit)
    allResults.push(results)
  }
  return allResults
}

// Export the function to be used in the browser
export {fetchAllResults}

Each of the result sets will be a different feed for a section of the dashboard.

Building the Dashboard

In a separate file index.ts, you can build a dashboard by looping through the results and creating a box for each section:

Tech IPOs
M&A
Funding

To start you will need to import the necessary libraries and instantiate the server and the DOM

import express from 'express'
import {JSDOM} from 'jsdom'
import {fetchAllResults} from './api.ts'

const app = express()
const port = 3000

const dom = new JSDOM(`<!DOCTYPE html><html><body></body></html>`)
const document = dom.window.document
const window = dom.window as any

After setting up the server and the DOM, you will create a section for each of the documents returned from the search queries. These will be in the form of boxes will information from the API call:

// Function to create a box for each document
const createDocumentBox = (doc: any) => {
  const box = document.createElement('a')
  box.className = 'document-box'
  box.href = doc.url || `https://research.alpha-sense.com?docid=${doc.id}`
  box.target = '_blank' // Open link in a new tab
  box.innerHTML = `
    <h3>${doc.title}</h3>
    <p><strong>Type:</strong> ${doc.type.ids}</p>
    <p><strong>Date:</strong> ${doc.releasedAt}</p>
    <p><strong>Snippet:</strong> ${doc.snippets.statements[0].text}</p>
  `
  return box
}

Next we can create a function that can combine all the boxes from the response into a section so that we can separate the searches from each other:

// Function to create a section for each query
const createSection = (title: string, results: any[]) => {
  const section = document.createElement('div')
  section.className = 'section'
  section.innerHTML = `<h2>${title}</h2>`
  const documentsContainer = document.createElement('div')
  documentsContainer.className = 'documents-container'
  results.forEach(doc => documentsContainer.appendChild(createDocumentBox(doc)))
  section.appendChild(documentsContainer)
  return section
}

Next, we will create a function that can combine all sections into a single dashboard and we want to make sure each section is beautiful and easy to read:

// Main function to create the dashboard
async function createDashboard() {
  try {
    // Add CSS to the head
    const style = document.createElement('style')
    style.textContent = `
      body {
        font-family: Arial, sans-serif;
        line-height: 1.6;
        color: #333;
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
        background-color: #f4f4f4;
      }
      h1 {
        text-align: center;
        color: #2c3e50;
        margin-bottom: 30px;
      }
      .dashboard {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        justify-content: space-around;
      }
      .section {
        flex: 1;
        min-width: 300px;
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        padding: 20px;
        margin-bottom: 20px;
      }
      .section h2 {
        color: #3498db;
        border-bottom: 2px solid #3498db;
        padding-bottom: 10px;
        margin-top: 0;
      }
      .documents-container {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 15px;
      }
      .document-box {
        background-color: #ecf0f1;
        border-radius: 6px;
        padding: 15px;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        text-decoration: none;
        color: inherit;
        display: block;
      }
      .document-box:hover {
        transform: translateY(-5px);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
      }
      .document-box h3 {
        color: #2980b9;
        margin-top: 0;
      }
      .document-box p {
        margin: 5px 0;
        font-size: 0.9em;
      }
    `
    document.head.appendChild(style)

    // Create basic HTML structure
    document.body.innerHTML = `
      <h1>AlphaSense Dashboard</h1>
      <div class="dashboard"></div>
    `

    const dashboard = document.querySelector('.dashboard')
    if (!dashboard) throw new Error('Dashboard element not found')

    // Fetch results for all queries
    const allResults = await fetchAllResults()

    // Create sections for each query result
    const titles = ['Tech IPOs', 'M&A', 'Funding']
    allResults.forEach((results, index) => {
      dashboard.appendChild(createSection(titles[index], results))
    })

    return dom.serialize()
  } catch (error) {
    console.error('Error creating dashboard:', error)
    return `<h1>Error creating dashboard. Check console for details.</h1>`
  }
}

Lastly, we will need to set up the server and the DOM to be able to serve the dashboard:

// Set up Express route
app.get('/', async (req, res) => {
  const html = await createDashboard()
  res.send(html)
})

// Start the server
app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`)
})

Finally, run the app using the following command:

npm run dev

Then, open your browser and navigate to the following URL to see the result: http://localhost:3000

Once all the steps are completed, you can start viewing data directly from AlphaSense in your dashboard!

Quick Start & Starting From Scratch​

Requirements​

Configuration​

Building the Search Queries​

Searching the Documents​

Building the Dashboard​