Skip to content

Commit 9e9e42e

Browse files
djfarrellycharlypolyjpwilliams
authored
Add demo project (#7)
* fix(workflows): some DX and publishing fixes * feat(next-js-demo): first draft of a Next.js demo * feat(next-js-demo): Automation Editor lifecycle * feat(example): working MVP * feat(examples): last changes to be video demo ready * fix(sdk): insert action name in the state * feat(example): some UX fixes * Add missing table columns * Fixes * fix(example): workflow actions issue * Short actions names * chore: `packages/next-js-demo` -> `examples/nextjs-blog-cms` * feat(examples): ensure schema and seed are up to date * fix(examples): overall cleanup * feat(examples): add "AI publishing recommendations" workflow actions * doc(examples): README * doc: README * Add release process and clean up packages (#3) * Make a pnpm workspace (with `packages/` structure) * Add `@changesets/cli` and config * Add `@types/node` * Clean up `tsconfig.json` * Add default ESM export * Add basic build script * Add `package.json` metadata * Add real Apache 2.0 license * Add `publish` script to `@inngest/workflow` to include provenance * Add `release.yml` workflow for changesets * Use explicit `CHANGESET_GITHUB_TOKEN` secret (much clearer) * Fix exports typing typo * Fix types imports in UI files * Rename `@inngest/workflow-kit`; fix some example imports --------- Co-authored-by: Charly POLY <[email protected]> Co-authored-by: Charly Poly <[email protected]> Co-authored-by: Jack Williams <[email protected]>
1 parent e4f2785 commit 9e9e42e

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

71 files changed

+18558
-30
lines changed

‎.changeset/README.md

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
# Changesets
2+
3+
Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
4+
with multi-package repos, or single-package repos to help you version and publish your code. You can
5+
find the full documentation for it [in our repository](https://github.com/changesets/changesets)
6+
7+
We have a quick list of common questions to get you started engaging with this project in
8+
[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

‎.changeset/config.json

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"$schema": "https://unpkg.com/@changesets/[email protected]/schema.json",
3+
"changelog": "@changesets/cli/changelog",
4+
"commit": false,
5+
"fixed": [],
6+
"linked": [],
7+
"access": "public",
8+
"baseBranch": "main",
9+
"updateInternalDependencies": "patch",
10+
"ignore": []
11+
}

‎.github/workflows/release.yml

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
name: Release
2+
3+
on:
4+
push:
5+
branches:
6+
# - main
7+
- holding-branch-until-ready
8+
9+
env:
10+
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
11+
12+
jobs:
13+
release:
14+
runs-on: ubuntu-latest
15+
permissions:
16+
contents: write
17+
id-token: write
18+
steps:
19+
- uses: actions/checkout@v4
20+
with:
21+
persist-credentials: false
22+
# Used to fetch all history so that changesets doesn't attempt to
23+
# publish duplicate tags.
24+
fetch-depth: 0
25+
# Replaces `concurrency` - never cancels any jobs
26+
- uses: softprops/turnstyle@v1
27+
with:
28+
poll-interval-seconds: 30
29+
env:
30+
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
31+
- run: pnpm install
32+
with:
33+
working-directory: packages/workflow
34+
- run: pnpm run build
35+
with:
36+
working-directory: packages/workflow
37+
- run: pnpm run test
38+
with:
39+
working-directory: packages/workflow
40+
- uses: changesets/action@v1
41+
with:
42+
cwd: packages/workflow
43+
title: "Release @latest"
44+
publish: pnpm run publish
45+
env:
46+
GITHUB_TOKEN: ${{ secrets.CHANGESET_GITHUB_TOKEN }}
47+
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
48+
NODE_ENV: test # disable npm access checks; they don't work in CI

‎.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,5 @@ node_modules
33

44
# Nix
55
/.direnv/
6+
7+
.env.local

‎README.md

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<p align="center">
2+
3+
![Workflow Kit by Inngest](./workflow-kit.jpg)
4+
5+
</p>
6+
7+
<p align="center">
8+
<a href="https://www.inngest.com/docs?ref=github-workflow-sdk-readme">Documentation</a>
9+
<span>&nbsp;·&nbsp;</span>
10+
<a href="https://www.inngest.com/blog?ref=github-workflow-sdk-readme">Blog</a>
11+
<span>&nbsp;·&nbsp;</span>
12+
<a href="https://www.inngest.com/discord">Community</a>
13+
</p>
14+
<br/>

‎examples/nextjs-blog-cms/.env.example

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
NEXT_PUBLIC_SUPABASE_URL=<SUBSTITUTE_SUPABASE_URL>
2+
NEXT_PUBLIC_SUPABASE_ANON_KEY=<SUBSTITUTE_SUPABASE_ANON_KEY>
3+
INNGEST_EVENT_KEY=<https://www.inngest.com/docs/events/creating-an-event-key>
4+
INNGEST_SIGNING_KEY=<https://www.inngest.com/docs/platform/signing-keys>
5+
OPENAI_API_KEY=
6+
OPENAI_MODEL=gpt-3.5-turbo

‎examples/nextjs-blog-cms/.eslintrc.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"extends": ["next/core-web-vitals", "next/typescript"]
3+
}

‎examples/nextjs-blog-cms/.gitignore

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
.yarn/install-state.gz
8+
9+
# testing
10+
/coverage
11+
12+
# next.js
13+
/.next/
14+
/out/
15+
16+
# production
17+
/build
18+
19+
# misc
20+
.DS_Store
21+
*.pem
22+
23+
# debug
24+
npm-debug.log*
25+
yarn-debug.log*
26+
yarn-error.log*
27+
28+
# local env files
29+
.env*.local
30+
31+
# vercel
32+
.vercel
33+
34+
# typescript
35+
*.tsbuildinfo
36+
next-env.d.ts

‎examples/nextjs-blog-cms/README.md

+168
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
## Blog AI workflows | Next.js template
2+
3+
<p align="center">
4+
5+
![Workflow Kit by Inngest](./workflow-editor.png)
6+
7+
</p>
8+
9+
<p align="center">
10+
<a href="https://www.inngest.com/docs?ref=github-workflow-sdk-example-nextjs-blog-cms-readme">Documentation</a>
11+
<span>&nbsp;·&nbsp;</span>
12+
<a href="https://www.inngest.com/blog?ref=github-workflow-sdk-example-nextjs-blog-cms-readme">Blog</a>
13+
<span>&nbsp;·&nbsp;</span>
14+
<a href="https://www.inngest.com/discord">Community</a>
15+
</p>
16+
<br/>
17+
18+
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](https://www.inngest.com/?ref=github-workflow-sdk-example-nextjs-blog-cms-readme), [Supabase](https://supabase.com) and [OpenAI](https://github.com/openai/openai-node).
19+
20+
Get started by cloning this repo and following the below setup instructions or directly deploy this template on Vercel.
21+
22+
- [Getting Started - Local setup](#getting-started-local-setup)
23+
- [0. Prerequisites](#0-prerequisites)
24+
- [1. Setup](#1-setup)
25+
- [2. Database setup](#2-database-setup)
26+
- [3. Starting the application](#3-starting-the-application)
27+
- [Getting Started - Vercel/Deployment setup](#getting-started-verceldeployment-setup)
28+
- [0. Prerequisites](#0-prerequisites-1)
29+
- [1. Deploy on Vercel](#1-deploy-on-vercel)
30+
- [2. Inngest Integration setup](#2-inngest-integration-setup)
31+
- [3. Database setup](#3-database-setup)
32+
- [Demo tour](#demo-tour)
33+
34+
## Getting Started - Local setup
35+
36+
### 0. Prerequisites
37+
38+
To run this demo locally, you'll need the following:
39+
40+
- a [Supabase account](https://supabase.com)
41+
- an [OpenAI account](https://platform.openai.com/)
42+
43+
### 1. Setup
44+
45+
1. First, clone the repository and navigate the `examples/` folder:
46+
47+
```
48+
git clone
49+
50+
cd examples/nextjs-blog-cms
51+
```
52+
53+
2. Then, install the dependencies:
54+
55+
```bash
56+
npm i
57+
# or
58+
yarn
59+
# or
60+
pnpm
61+
```
62+
63+
3. Finally, copy your local `.env.example` as `.env.local` and fill your `OPENAI_API_KEY`.
64+
65+
### 2. Database setup
66+
67+
This project needs a database to store the blog posts and workflows.
68+
69+
Follow the below steps to get a database up and running with Supabase:
70+
71+
1. Go to [your Supabase Dashboard](https://supabase.com/dashboard/projects) and create a new project
72+
1. While your database is being created, update your `.env.local` and fill the `NEXT_PUBLIC_SUPABASE_URL` and `NEXT_PUBLIC_SUPABASE_ANON_KEY`
73+
1. Open the SQL Editor from the left side navigation, and copy the content of the `examples/nextjs-blog-cms/supabase/schema.sql` file
74+
1. Still in the SQL Editor, create a new snippet and do the same with the `examples/nextjs-blog-cms/supabase/seed.sql` file
75+
1. Navigate to the Table Editor, you should see two tables: `blog_posts` and `workflows`
76+
77+
You are all set, your database is ready to be used!
78+
79+
### 3. Starting the application
80+
81+
First, start the Next.js application:
82+
83+
```bash
84+
npm run dev
85+
# or
86+
yarn dev
87+
# or
88+
pnpm dev
89+
# or
90+
bun dev
91+
```
92+
93+
Open [http://localhost:3000](http://localhost:3000) with your browser to see the application. See our [Demo Tour section](#demo-tour) to trigger your first workflow.
94+
95+
Finally, start the Inngest Dev Server by running the following command:
96+
97+
```
98+
npx inngest-cli@latest dev
99+
```
100+
101+
Open [http://localhost:8288](http://localhost:8288) with your browser to explore the [Inngest Dev Server](https://www.inngest.com/docs/dev-server?ref=github-workflow-sdk-example-nextjs-blog-cms-readme).
102+
103+
## Getting Started - Vercel/Deployment setup
104+
105+
### 0. Prerequisites
106+
107+
To run this demo locally, you'll need the following:
108+
109+
- an [Inngest account](https://www.inngest.com/?ref=github-workflow-sdk-example-nextjs-blog-cms-readme)
110+
- a [Supabase account](https://supabase.com)
111+
- an [OpenAI account](https://platform.openai.com/)
112+
113+
### 1. Deploy on Vercel
114+
115+
Use the below button to deploy this template to Vercel:
116+
117+
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Finngest%2Fworkflow-sdk%2Ftree%2Fmain%2Fexamples%2Fnextjs-blog-cms%2F&project-name=nextjs-blog-cms-ai-workflow-with-inngest&repository-name=workflow-sdk&demo-title=nextjs-blog-cms-ai-workflow-with-inngest&demo-description=Next.js%20blog%20back-office%20featuring%20some%20AI%20workflows%20helping%20with%20grammar%20fixes%2C%20generating%20Table%20of%20Contents%20or%20Tweets&demo-image=)
118+
119+
**Once deployed, make sure to configure your `OPENAI_API_KEY` environment variable.**
120+
121+
### 2. Inngest Integration setup
122+
123+
Navigate to the [Inngest Vercel Integration page](https://vercel.com/integrations/inngest) and follow the instructions to link your Vercel application with Inngest.
124+
125+
### 3. Database setup
126+
127+
This project needs a database to store the blog posts and workflows.
128+
129+
Follow the below steps to get a database up and running with Supabase:
130+
131+
1. Go to [your Supabase Dashboard](https://supabase.com/dashboard/projects) and create a new project
132+
1. While your database is being created, update your Vercel project environment variables: `NEXT_PUBLIC_SUPABASE_URL` and `NEXT_PUBLIC_SUPABASE_ANON_KEY`
133+
1. Open the SQL Editor from the left side navigation, and copy the content of the `examples/nextjs-blog-cms/supabase/schema.sql` file
134+
1. Still in the SQL Editor, create a new snippet and do the same with the `examples/nextjs-blog-cms/supabase/seed.sql` file
135+
1. Navigate to the Table Editor, you should see two tables: `blog_posts` and `workflows`
136+
137+
You are all set, your database is ready to be used!
138+
139+
## Demo tour
140+
141+
This template is shipped with a Database seed containing three blog posts (two drafts) and two workflows.
142+
143+
Here are some suggestions of steps to follow as a tour of this demo:
144+
145+
### 1. Configuring an automation
146+
147+
1. Navigate to the automation tab
148+
1. Click "Configure" on the "When a blog post is moved to review" automation
149+
1. Hover the "blog-post.updated" node to click on the "+" icon
150+
1. Select "Add a Table of Contents" on the right side panel
151+
1. Add another step from "Add a Table of Contents" by using the "+" icon and select "Perform a grammar review"
152+
1. Finally, add a "Apply changes after approval" as a final step
153+
1. Click on "Save changes" at the top right
154+
155+
### 2. Move a blog post to review
156+
157+
We now have an active automation that will trigger when a blog post moves to review.
158+
159+
Let's trigger our automation:
160+
161+
1. Navigate to the blog posts page
162+
1. Click on "Send to review" on the draft blog post
163+
1. Navigate to your [Inngest Dev Server](http://localhost:8288) or [Inngest Platform](https://app.inngest.com/?ref=github-workflow-sdk-example-nextjs-blog-cms-readme) and go over the "Runs" tab
164+
1. You can now see your automation running live, step by step, to finally pause
165+
1. 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.
166+
1. At the bottom, click on the "Approve suggestions & Publish" button
167+
1. Back on the Runs page of the [Inngest Dev Server](http://localhost:8288) or [Inngest Platform](https://app.inngest.com/?ref=github-workflow-sdk-example-nextjs-blog-cms-readme), you see the workflow in a completed state.
168+
1. Going back to the demo application, on the "blog posts" tab, the blog post should be flagged as "Published"

‎examples/nextjs-blog-cms/app/actions.ts

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
"use server";
2+
import { inngest } from "@/lib/inngest/client";
3+
import { Json } from "@/lib/supabase/database.types";
4+
import { createClient } from "@/lib/supabase/server";
5+
import { type Workflow } from "@/lib/supabase/types";
6+
7+
export const sendBlogPostToReview = async (id: string) => {
8+
const supabase = createClient();
9+
await supabase
10+
.from("blog_posts")
11+
.update({
12+
status: "under review",
13+
markdown_ai_revision: null,
14+
})
15+
.eq("id", id);
16+
17+
await inngest.send({
18+
name: "blog-post.updated",
19+
data: {
20+
id,
21+
},
22+
});
23+
};
24+
25+
export const approveBlogPostAiSuggestions = async (id: string) => {
26+
await inngest.send({
27+
name: "blog-post.approve-ai-suggestions",
28+
data: {
29+
id,
30+
},
31+
});
32+
};
33+
34+
export const publishBlogPost = async (id: string) => {
35+
const supabase = createClient();
36+
await supabase
37+
.from("blog_posts")
38+
.update({
39+
status: "published",
40+
markdown_ai_revision: null,
41+
})
42+
.eq("id", id);
43+
44+
await inngest.send({
45+
name: "blog-post.published",
46+
data: {
47+
id,
48+
},
49+
});
50+
};
51+
export const updateWorkflow = async (workflow: Workflow) => {
52+
const supabase = createClient();
53+
await supabase
54+
.from("workflows")
55+
.update({
56+
workflow: workflow.workflow as unknown as Json,
57+
})
58+
.eq("id", workflow.id);
59+
};
60+
61+
export const toggleWorkflow = async (workflowId: number, enabled: boolean) => {
62+
const supabase = createClient();
63+
await supabase
64+
.from("workflows")
65+
.update({
66+
enabled,
67+
})
68+
.eq("id", workflowId)
69+
.select("*");
70+
};

‎examples/nextjs-blog-cms/app/api/blog-posts/route.ts

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { createClient } from "@/lib/supabase/server";
2+
import { NextResponse } from "next/server";
3+
4+
export async function GET() {
5+
const supabase = createClient();
6+
const { data: blogPosts } = await supabase
7+
.from("blog_posts")
8+
.select(
9+
"id, title, subtitle, markdown_ai_revision, created_at, status, markdown, ai_publishing_recommendations"
10+
)
11+
.order("created_at", { ascending: false });
12+
13+
return NextResponse.json({ blogPosts });
14+
}

0 commit comments

Comments
 (0)