I made a quick app saturday. I had told a colleague : “I am going to do this and that, this weekend”. But then you also have to do it… “or die trying”. I wanted to take an array of WordPress posts, through the REST API, and feed the content to a local AI (Meta Llama 3) and have it produce an ‘editorial comment’, so I can add it to the content and update the post.
It is an aggregator site so it has no ‘unique content’, and this is a quick and easy way to expand the content.
So I started making one in WordPress, but the remote_get functions all time out after 10 seconds, and I need it to wait for about 2 minutes for the LLM to generate the comment.
I figured I’d do it in JavaScript. I am just not very good at JavaScript.And I tried for two hours to get something going, and then I remembered I had already made an interface a while back. So I copied the source and voila it works. It is just a Next.js/TypeScript source, that gets in me in even more trouble because I know jack shit about TypeScript… but hey, let’s give a it a go… I needed some code to retrieve the posts, and 9d8 had a good source online, a starter kit for headless WordPress.
So I integrated the sources and now I could download all the posts, and select a post, push a button ‘ai comment’ and get comment.
So far, so good (so what ?). But now I needed a routine to update the post and the entire source was only for downloading. So there I had to actually code something.
export async function updatePostById(
id: number,
data: Partial<Post>
): Promise<Post> {
const username: string | undefined = process.env.NEXT_PUBLIC_WORDPRESS_USER;
const password: string | undefined =
process.env.NEXT_PUBLIC_WORDPRESS_PASSWORD;
const url = getUrl(`/wp-json/wp/v2/posts/${id}`);
const headers = new Headers();
headers.append("Authorization", "Basic " + btoa(username + ":" + password));
headers.append("Content-Type", "application/json");
const response = await fetch(url, {
method: "POST",
headers: headers,
body: JSON.stringify(data),
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const post: Post = await response.json();
console.log("post", post);
return post;
}
The Post type missed a member, content.raw, so you couldn’t immediately update, but if you add the content.raw member to the Post type, the API digests it and updates the post with it.
…and that worked.
That did wonders for my confidence. I have been stuck in ‘tutorial hell’ mostly with React, and it rocks to be able to think something up and next day have it work.
This week I am going to try and build one that grabs all the posts of a category, and updates the entire list with a comment. Or a bad AI animal joke.
I am already thinking about everything I can build with this, you could add a tag and have the machine traverse your post list and replace every occurrence of ‘toothpaste’ with “<a href=”https://www.domain.com/tags/toothpaste’. Or an app to sell ‘in content links’. There’s all kinds to stuff you can do with this. Inspiring…
AI assisted WordPress… sweet….it is going to be an arms race to incorporate AI assistance in just about everything. Soon your own socks come with AI. But it is time to learn how to integrate AI. If you are a coder, you have no choice.