Inspiration

The inspiration behind the Executive Intelligence Product demo stemmed from a core challenge faced by executives and board members today: the urgent need for fast, accurate, and cited intelligence in an increasingly complex and rapidly changing business landscape. Traditional research methods are often too slow to keep pace, and existing tools don't always provide the structured insights required for high-stakes decision-making in the boardroom. I envisioned a tool, powered by Perplexity Sonar, that acts as a dedicated "boardroom copilot," powered by advanced AI, directly addressing the needs for competitive analysis, scenario planning, benchmarking, and persistent knowledge access.

What I Learned

This project was a significant learning experience.

  • API Integration & Prompt Engineering: Crafting precise prompts for Perplexity's API (specifically Sonar) was critical to getting the desired structured, factual, and cited responses.
  • Building Robust UI with AI Output: Developing a front-end capable of dynamically rendering complex Markdown content, including tables and citations, generated by the AI, required careful use of libraries like react-markdown and developing custom parsing logic.
  • State Management for Complex Interactions: Managing the state across multiple interactive elements like modals, loading indicators, dynamic content based on user input (company, scenarios), and persistent memory items demanded a thoughtful approach to ensure a smooth and responsive user experience. Cursor helped in structuring state hooks and logic within components like CompetitiveThreatAlertCard and BenchmarkBoard.
  • Component Design & Integration: Designing and integrating components like CompetitiveThreatAlertCard and BenchmarkBoard into a cohesive dashboard required iterative refinement.
  • Attention to Executive UX: Tailoring the user interface and interactions specifically for a time-constrained executive audience highlighted the importance of user-centric design in AI applications.

How I Built It

The Executive Intelligence Product Demo is built as a modern web application using Next.js with React and TypeScript. Tailwind CSS provides the styling layer. The core intelligence is powered by Perplexity's Sonar API. Development was significantly accelerated by using Cursor as an AI pair programmer, which aided in writing, debugging, and refactoring the code throughout the process.

Following are specific prompts used to interact with the Perplexity API for different features:

  • Competitive Intelligence Briefs: Perform a deep, board-level competitive analysis for [Company Name] as of [Month Year]. Structure your response in markdown with the following sections: ### Executive Summary ... ### Recent High-Impact Competitor Moves - Bullet list: [Competitor], [Move], [Date], [Strategic Implication for [Company Name]], [Source] ### Market Shifts, Threats & Opportunities ... ### Board-Ready Recommendations - 3–5 specific, actionable next steps for [Company Name]... ### References - Numbered markdown list for all sources... cite with sources as [n]... Do NOT include a 'Top Competitors' table or section. Focus on recent moves, implications, and board-level recommendations. All claims must be cited with sources as [n] and listed in the References section as a markdown numbered list.
  • Scenario Planning: Given this scenario: "[Scenario description]", generate a board-level scenario analysis for [Company Name] as of [Month Year]. Structure your response in markdown with the following sections: ### Executive Summary ... ### Risks & Opportunities ... ### Board-Ready Recommendations ... ### References ... cite with sources as [n]... Do NOT include a 'Top Competitors' table or section. Focus on scenario implications, risks, and board-level recommendations. All claims must be cited with sources as [n] and listed in the References section as a markdown numbered list.
  • Instant Benchmarking: Create a markdown table comparing [Company Name] to the following competitors: [Competitor List] across these metrics: [Metric List]. Structure the table with the Company as the first column, followed by the requested metrics as columns. Include [Company Name] as the first row, followed by the competitors. For each value, include a source citation (URL or reference) as a superscript [n]. If a value is not available, state 'N/A' and briefly explain why in a note below the table. Include a '### Sources' section below the table with a numbered markdown list of all sources, including URLs. Return ONLY the markdown table and the Sources section. Do NOT include any other narrative or explanation outside these sections.
  • Alert-Triggered Briefs (Market Risk, Regulatory Update): (Examples from MainLayout, triggering brief/alert types which are saved to Board Pack)
    • For Market Risk: What are the top market risks for [Company Name] this week? Provide a board-ready summary with cited sources. Then, under the heading "Action Items:", list 3-5 clear, actionable next steps as markdown bullet points.\n\n At the end, include a "References:" section with clickable URLs for each source.
    • For Regulatory Update: Summarize the latest regulatory changes affecting [Company Name] and recommend board actions. Provide cited sources.\n\n Then, under the heading "Action Items:", list 3-5 clear, actionable next steps as markdown bullet points.\n\n At the end, include a "References:" section with clickable URLs for each source.

On the frontend, React's state and effect hooks and a custom Boardroom Memory Context are being used for persistent storage. ReactMarkdown renders the AI-generated content, with custom components and parsing logic handling citations and specific formatting requirements (like tables and ordered lists for sources). Interactive elements like modals (@headlessui/react) are used for detailed views.

Challenges Faced

Developing this project, even with AI assistance, presented several challenges:

  • Citation Extraction and Linking: Accurately identifying, extracting, and linking citations from the AI's varied output formats was a persistent challenge that demanded fine-tuning of regular expressions and parsing functions.
  • Integrating Disparate Features Cohesively: Combining Competitive Analysis, Scenario Planning, and Benchmarking into a single, intuitive "Boardroom Intelligence" card, while also managing a persistent Board Pack memory, involved careful UI/UX design and state management to ensure a seamless flow without clutter.
  • Layout and Styling Precision: Achieving the exact desired executive-grade layout and visual alignment using Tailwind CSS, particularly when integrating complex dynamic components and modals, sometimes required detailed debugging of styling interactions and component structure.

Built With

Share this project:

Updates