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
  • 1. Setup
  • 2. Database setup
  • 3. Starting the application
• Getting Started - Vercel/Deployment setup
  • 0. Prerequisites
  • 1. Deploy on Vercel
  • 2. Inngest Integration setup
  • 3. Database setup
• Demo tour

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

• a Supabase account
• an OpenAI account

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

git clone

cd examples/nextjs-blog-cms

2. Then, install the dependencies:

npm i
# or
yarn
# or
pnpm --ignore-workspace i

3. Finally, copy your local .env.example as .env.local and fill your OPENAI_API_KEY.

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!

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.

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

• an Inngest account
• a Supabase account
• an OpenAI account

Use the below button to deploy this template to Vercel:

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

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

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!

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. 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

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"

Apache 2.0