Skip to content

inngest/agentkit-render-tutorial

Repository files navigation

Hacker News Agent with Render and Inngest

Hacker News Agent

Render docs  ·  Inngest Agent Kit docs


Learn how to build and deploy a Hacker News agent with Inngest, Render, and Next.js.

What the agent does

This Hacker News Agent periodically generates a summary of popular articles on Hacker News, and emails you a report.

To use it, you:

  • Specify questions you want answered about specific interests.

    For example, you can specify "Next.js" as an interest, and ask "What are the latest open source libraries?"

  • Specify the frequency at which you want summaries for each question. (E.g. every hour, once a day, once a week)

The Agent will do the rest.

Hacker News Agent

Table of contents

Project structure

  • packages/indexer: A cron job that indexes Hacker News content into a vector database.

    This job is deployed using a Render Cron Job, and the vector database is a Render PostgreSQL database that has the pgvector extension enabled.

  • packages/app: A web app that includes the UI to configure topics and questions for the Hacker News agent, and the backend logic for the agents.

    This app is written in Next.js and hosted as a web service on Render. The app uses Inngest's AgentKit to create and orchestrate agents. To use Inngest's terminology, we'll refer to the combination of routing logic, agents, and tools as the AgentKit Network.

Prerequisites

Accounts

To run this project, you need the following accounts:

Github code

Before you get started, please fork this repo. By having your own copy of the repo, you can freely make changes to it.

Then git clone your forked repo to your local machine.

Deploy this project on Render

1. Set up the PostgreSQL vector database

What it's for

The PostgreSQL database is used to store Hacker News stories. It serves as the vector database for the AgentKit Network.

Steps

To set up this database, we'll create a new PostgreSQL database on Render, enable the pgvector extension on the database, and initialize it with our project's schema.

Follow these steps:

  1. Create a Project on Render. Name it "Hacker News Agent".

  2. Create a new PostgreSQL database on Render.

    • For the "Project", specify the project you created in Step 1.
    • For the "Instance Type", you may use the Free plan.
  3. Enable the pgvector extension and initialize the database with the project's schema.

    • 3.1. Locate the schema.sql file in this repo. (This file contains the commands to enable the pgvector extension and set up this project's schema.)

    • 3.2. Copy your database's external database URL from the Render dashboard.

    • 3.3. Run the following command in your terminal from the root of the project, but replace the dummy PostgreSQL URL with your URL from Step 3.2:

      psql -Atx postgresql://<redacted>@<redacted>.render.com/<redacted> -f packages/indexer/schema.sql

2. Set up the Indexer cron job

What it's for

The Indexer service fetches Hacker News stories and stores them in the PostgreSQL vector database.

Steps

We will set up the Indexer service as a cron job on Render. (Render offers a Cron Job service type.)

This cron job is packaged as a Docker image that is configured with Playwright and its Chromium binary. For your convenience, we've made this Docker image publicly available on Docker Hub.

  1. Create a new cron job on Render using these instructions.
    1. Choose the Existing image option and provide the following Image URL: docker.io/wittydeveloper/inngest-render-indexer:0.6.
    2. Configure the Schedule to run on an hourly basis: 0 * * * *.
    3. Configure the following environment variables:
      • DATABASE_URL: The internal URL of your PostgreSQL database (here's how to find it).
      • OPENAI_API_KEY: Your OpenAI API key.
  2. (optional) To see a sample run, manually trigger a run of your cron job. Note that the cron job will not fetch any stories from Hacker News yet. You'll need to set up the Next.js app (next step), and specify some "interests" to track via the app's UI.

About the code

The Docker image is built from the Dockerfile at the root of this project.

See the packages/indexer directory for the source code.

3. Set up the Next.js app with AgentKit Network

What it's for

The Next.js app serves the UI that lets you configure the Hacker News agent with "interests" you want to track. The app's backend hosts the logic of the AgentKit Network.

Steps

To set up the app, we'll create a new web service on Render and configure it to run the Next.js application. The code is located in the packages/app directory.

  1. Create a new web service on Render using these instructions.
    1. Choose the Git provider option, and select the GitHub repo you forked. Click Connect.

    2. In the service creation form, provide the following details:

      Field Value
      Language Node
      Root Directory packages/app/
      Build Command pnpm install; pnpm build
      Start Command pnpm start
    3. Configure the following environment variables:

  2. Click Deploy Web Service.

After the deploy finishes, your service will be accessible at the onrender.com URL displayed in the dashboard.

4. Sync the Inngest app

Each time you deploy a new app that uses Inngest, or update your Inngest functions, you must sync the app with Inngest.

Inngest offers several ways to sync an app. Here, we'll sync the app manually through the Inngest dashboard.

  1. Open your Inngest dashboard.
  2. Click Sync new app (or visit this link).
  3. Choose the Sync manually option, and provide the following app URL: https://<your-app-name>.onrender.com/api/inngest
  4. Click Sync app.

5. Try it out!

You're now ready to try out your Hacker News Agent.

  1. Go to your Render Web Service dashboard and click on the URL of your web service (ex: https://agenkit-render-tutorial.onrender.com).
  2. Log into your app using the APP_PASSWORD you specified. You'll then see the homepage.
  3. Add an interest and an email address where you want email updates to be sent. Then add a question for your Hacker News Agent to answer for you and specify the frequency at which you want the Agent to update you.

app homepage

  1. Manually trigger a run of your Indexer cron job.

    • In the cron job's logs, you'll see a log line for each Hacker News story that's stored into the database.
    Cron job logs
  2. Sit back and wait for the next time your Agent runs. The Agent will run based on the frequency you specified for your question(s).

Modify or run the project locally

Install dependencies by running the following command from the root of the project:

pnpm install

Indexer (packages/indexer)

Run the indexer locally

Note: You'll need to set up the .env.local file.

pnpm build

pnpm start

Push a new Docker image version

Example:

docker build -t docker.io/wittydeveloper/inngest-render-indexer:0.5 .
docker push docker.io/wittydeveloper/inngest-render-indexer:0.5

Next.js app (packages/app)

Note: You'll need to set up the .env.local file. Don't forget to set the APP_PASSWORD password

Run the Next.js app locally

pnpm dev

Start the Inngest Dev Server

npx inngest-cli@latest dev

About

Get custom summaries of Hacker News stories in your inbox

Topics

Resources

License

Stars

Watchers

Forks

Contributors 3

  •  
  •  
  •