Skip to content

Latest commit

 

History

History

nextjs-blog-cms

README.md

Blog AI workflows | Next.js template

Workflow Kit by Inngest

Documentation  ·  Blog  ·  Community


This demo is Next.js blog back-office featuring some AI workflows helping with grammar fixes, generating Table of Contents or Tweets, built with Inngest, Supabase and OpenAI.

Get started by cloning this repo and following the below setup instructions or directly deploy this template on Vercel.

Getting Started - Local setup

0. Prerequisites

To run this demo locally, you'll need the following:

1. Setup

  1. First, clone the repository and navigate the examples/ folder:
git clone

cd examples/nextjs-blog-cms
  1. Then, install the dependencies:
npm i
# or
yarn
# or
pnpm --ignore-workspace i
  1. Finally, copy your local .env.example as .env.local and fill your OPENAI_API_KEY.

2. Database setup

This project needs a database to store the blog posts and workflows.

Follow the below steps to get a database up and running with Supabase:

  1. Go to your Supabase Dashboard and create a new project
  2. While your database is being created, update your .env.local and fill the NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY
  3. Open the SQL Editor from the left side navigation, and copy the content of the examples/nextjs-blog-cms/supabase/schema.sql file
  4. Still in the SQL Editor, create a new snippet and do the same with the examples/nextjs-blog-cms/supabase/seed.sql file
  5. Navigate to the Table Editor, you should see two tables: blog_posts and workflows

You are all set, your database is ready to be used!

3. Starting the application

First, start the Next.js application:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the application. See our Demo Tour section to trigger your first workflow.

Finally, start the Inngest Dev Server by running the following command:

npx inngest-cli@latest dev

Open http://localhost:8288 with your browser to explore the Inngest Dev Server.

Getting Started - Vercel/Deployment setup

0. Prerequisites

To run this demo locally, you'll need the following:

1. Deploy on Vercel

Use the below button to deploy this template to Vercel:

Deploy with Vercel

Once deployed, make sure to configure your OPENAI_API_KEY environment variable.

2. Inngest Integration setup

Navigate to the Inngest Vercel Integration page and follow the instructions to link your Vercel application with Inngest.

3. Database setup

This project needs a database to store the blog posts and workflows.

Follow the below steps to get a database up and running with Supabase:

  1. Go to your Supabase Dashboard and create a new project
  2. While your database is being created, update your Vercel project environment variables: NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY
  3. Open the SQL Editor from the left side navigation, and copy the content of the examples/nextjs-blog-cms/supabase/schema.sql file
  4. Still in the SQL Editor, create a new snippet and do the same with the examples/nextjs-blog-cms/supabase/seed.sql file
  5. Navigate to the Table Editor, you should see two tables: blog_posts and workflows

You are all set, your database is ready to be used!

Demo tour

This template is shipped with a Database seed containing three blog posts (two drafts) and two workflows.

Here are some suggestions of steps to follow as a tour of this demo:

1. Configuring an automation

  1. Navigate to the automation tab
  2. Click "Configure" on the "When a blog post is moved to review" automation
  3. Hover the "blog-post.updated" node to click on the "+" icon
  4. Select "Add a Table of Contents" on the right side panel
  5. Add another step from "Add a Table of Contents" by using the "+" icon and select "Perform a grammar review"
  6. Finally, add a "Apply changes after approval" as a final step
  7. Click on "Save changes" at the top right

2. Move a blog post to review

We now have an active automation that will trigger when a blog post moves to review.

Let's trigger our automation:

  1. Navigate to the blog posts page
  2. Click on "Send to review" on the draft blog post
  3. Navigate to your Inngest Dev Server or Inngest Platform and go over the "Runs" tab
  4. You can now see your automation running live, step by step, to finally pause
  5. Return to the demo app, the blog post should have the "Needs approval" status. Click on "Review" and compare the Original blog post with the AI revision using the tabs.
  6. At the bottom, click on the "Approve suggestions & Publish" button
  7. Back on the Runs page of the Inngest Dev Server or Inngest Platform, you see the workflow in a completed state.
  8. Going back to the demo application, on the "blog posts" tab, the blog post should be flagged as "Published"

License

Apache 2.0