Alpha Grove Strategies

What is Alpha Grove?

Alpha Grove is a research project that seeks to explore how artificial intelligence can be used to analyze and predict social behavior, focusing on political trends and public opinion.

Opinion data is collected from primary source research conducted at scale, using our home grown conversational AI platform AGS-1.

The project aims to provide nuanced insights at scale, into the behavior of individuals and groups, and to help organizations make more informed strategy decisions.

Learn more about Alpha Grove

The Landing Page

The landing page is integral to the project, since it serves as the first impression for new users. It is not just enough to make the landing page look professional and visually appealing; we need to ensure that the landing page integrates seamlessly with the application, which is crucial for a positive user experience.

Accomplishing this required implementing custom JavaScript logic to handle session state between the landing page which was built and deployed with Webflow, and the application which was built with Next.js and deployed on Vercel.

Managing Session Persistence

There is a link to the Alpha Grove AGS-1 platform demo on nearly every page of the website. To ensure that users can seamlessly transition between the landing page and the application, we implemented session management by saving the URL the user visited before accessing the demo, and appending it to the application URL as a base64 encoded parameter.

// Webflow custom code
// Get current page URL
currentUrl = window.location.href;

// Base64 encode the current URL
encodedUrl = base64Encode(currentUrl);

// Get target URL from button
targetUrl = button.dataset.href;

I chose to use a URL parameter instead of session storage because we weren't passing a lot of data, and the API is not implemented consistently in all browsers when saving to root and accessing between subdomains.

// Webflow custom code
// Modify the targetUrl to include the session parameter
url = new URL(targetUrl);
url.searchParams.set('session', encodedUrl);

// Update the button's redirect behavior
button.href = url.toString();

When the user visits the AGS-1 demo with a session parameter, the application decodes the previous URL and hydrates back links accordingly. If the session parameter is not present, back links default to the landing home page.

// AGS-1 Next.js
import { useSearchParams } from "next/navigation";

// Get the URL params and set default
[backUrl, setBackUrl] = useState("https://www.alpha-grove.com");
searchParams = useSearchParams();

// Get session parameter from URL
sessionParam = searchParams.get("session");

// decode sessionParam and set backUrl if present and valid
if (sessionParam) {
  try {
    decodedUrl = atob(sessionParam);
    setBackUrl(decodedUrl);
  } catch (error) {
    console.error("Failed to decode session parameter", error);
  }
}

Personalizing the Post-Demo Landing Page

The v1 demo of AGS-1 was voice-only. To make the experience more personal, users would begin by inputting their name, which would included in the dynamic AI context and used throughout the demo conversation.

While this feature was removed with v2 in favor of a more traditional chat-style UI, a remnant of the old personalization flow remain in Webflow, where the user's name would be used to customize the post-demo landing page.

// Webflow custom code
// Get demo param from URL
demoParam = getURLParameter('demo');

// Function to apply proper noun capitalization before hydration
function toProperCase(str) {
  return str.replace(/\w\S*/g, function(txt) {
    return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
  });
}

Similar to the flow with visiting the demo from the landing page, the user's name is encoded in base64 and passed in a URL parameter to the post-demo landing page. Since we are just passing the user's name, the data size is negligible. If we wanted to pass more data, to have a more personalized landing page, session storage would be a better choice.

Any element with text that needed to be replaced with a user's name would have a "demo" attribute set to true in Webflow.

// Webflow custom code
// Handle decoding, capitalization, and hydration if param is present
if (demoParam) {
  try {
    // Decode base64 string
    const decodedString = atob(demoParam);

    // Apply proper noun capitalization
    const formattedString = toProperCase(decodedString);

    // Find all elements with demo="true" attribute
    const demoElements = document.querySelectorAll('[demo="true"]');

    // Update HTML content of each element
    demoElements.forEach(element => {
      element.innerHTML = `${formattedString} —<br><span class="font-opacity-low">thank you for trying AGS-1.</span>`;
    });
  } catch (error) {
    console.error('Error decoding base64 string', error);
  }
}

AGS-1 Application

AGS-1 is a realtime conversational AI platform built in Node.js and deployed at the edge for low latency and global availability. It is composed of a Next.js frontend that manages user state and UI, and an Express.js backend that manages AI orchestration and conversation memory. The two are connected via WebSocket, allowing for real-time communication and seamless integration.

The backend is deployed using Cloudflare Workers with Durable Objects, to achieve the speed and availability of edge computing, with the memory and state management of a traditional cloud deployment. This allows the platform to scale infinitely to meet any demand, and is capable of handling virtually unlimited concurrent conversations in either chat or voice format with negligible latency; a tremendous technical feat.

AGS-1 Demo

The AGS-1 demo uses multiple different AI model providers for different tasks that are best suited for their respective domains. For example, it uses xAI's Grok for realtime information retrieval, Anthropic's Claude for natural language processing, and Google's Gemini for conversation analysis and embedding generation. Additionally, ElevenLabs is used for voice functionality.

Conversation Analysis

The area I have been spending much of my time recently developing is the conversation analysis component of AGS-1. This involves using machine learning algorithms to analyze user's statements and generate semantic knowledge graphs based on their stated opinions, and beliefs.

Nodes and edges can be also assigned vector embedding values to represent their semantic meaning, allowing for fast querying of other user's similar statements and beliefs. My hope is that in doing so, we can identify uncommon patterns and correlations between different people's opinions and beliefs, and try to identify hidden underlying causes that may be driving these patterns.

Final Designs

Homepage

Process page

AGS-1 Interface