Hacker News analyzer

The Hacker News Analyzer  example uses GenSX to fetch, analyze, and extract trends from the top Hacker News posts. It shows how to combine data fetching, parallel analysis, and content generation in a single workflow to create two outputs: a detailed report and a tweet of the trends.

Workflow

The Hacker News Analyzer workflow is composed of the following steps:

1. Fetch the top 500 Hacker News posts and filters down to text posts (<FetchHNPosts>)
2. Process each post in parallel (<AnalyzeHNPosts>)
   • Summarize the content (<SummarizePost>)
   • Analyze the comments (<AnalyzeComments>)
3. Writes a detailed report identifying the key trends across all posts (<GenerateReport>)
4. Edits the report into the style of Paul Graham (<EditReport>)
5. Generates a tweet in the voice of Paul Graham (<WriteTweet>)

Running the example

# Install dependencies
pnpm install
 
# Set your OpenAI API key
export OPENAI_API_KEY=<your_api_key>
 
# Run the example
pnpm run start

The workflow will create two files:

• hn_analysis_report.md: A detailed analysis report
• hn_analysis_tweet.txt: A tweet-sized summary of the analysis

Key patterns

Parallel processing

The workflow uses the <AnalyzeHNPosts> component to process each post in parallel. GenSX extends JSX to support returning objects so that components can return arrays and structured objects containing other components, which will all be resolved at runtime.

This component takes advantage of this and uses array.map to return a list of analyses, each containing a summary of the post and an analysis of its comments.

const AnalyzeHNPosts = gensx.Component<
  AnalyzeHNPostsProps,
  AnalyzeHNPostsOutput
>("AnalyzeHNPosts", ({ stories }) => {
  return {
    analyses: stories.map((story) => ({
      summary: <SummarizePost story={story} />,
      commentAnalysis: (
        <AnalyzeComments postId={story.id} comments={story.comments} />
      ),
    })),
  };
});

Multiple outputs

This example also shows a simple pattern returning multiple outputs from a workflow. In this case, both the outputs of <GenerateReport> and <WriteTweet> are returned as a single object. This is done by using the the child function of <GenerateReport> to combine the outputs of multiple components into a single object.

<GenerateReport analyses={analyses}>
  {(report) => (
    <EditReport content={report}>
      {(editedReport) => (
        <WriteTweet
          context={editedReport}
          prompt="Summarize the HN trends in a tweet"
        >
          {(tweet) => ({ report: editedReport, tweet })}
        </WriteTweet>
      )}
    </EditReport>
  )}
</GenerateReport>

Additional resources

Check out the other examples in the GenSX Github Repo .