Forem: Shiwaforce

Implementing Cloudflare Workflows

György Márk Varga — Mon, 18 Nov 2024 14:12:00 +0000

Serverless functions are great for short running tasks, but what happens when you need a multi-step process or a lengthy calculation? Often, it means piecing together complex workarounds or relying on third-party SaaS services.
Here comes Cloudflare Workflows into the picture – a native, streamlined solution that lets you orchestrate intricate workflows effortlessly. With Cloudflare Workflows, you can set up custom triggers, from any Cloudflare Worker, HTTP calls, or scheduled cron jobs, to kick off sequences that adapt to your specific needs.

In this article, we’ll dive into a project that blends AI and Cloudflare services to create something unique. I built an app that runs in the background and, every day at 7:00 PM, emails an AI-generated summary of the day’s events straight from our calendar. It was a fun challenge to put together, and I’m excited to walk you through the details!

The project

In this article, we look at a project that uses quite a lot of Cloudflare services. This app is working entirely in the background: at the end of each day, at 19:00, it sends an email with an AI-generated text summary of the events that happened on our calendar on that day.

This is how the e-mail looks like:

The tech stack

Typescript (of course 🙂)
Cloudflare Workers
Cloudflare Workflows
Cloudflare’s Meta AI model
Cloudflare Cron triggers
Google Calendar API
Resend (for sending e-mails)
React-Email with TailwindCSS (for beautiful emails)

The architecture

Source code

As with all my articles, the source code of the entire project can be found HERE, on Github.

The project implementation

Let's start the project walkthrough. The structure of the project looks like this:

It seems simple enough and yes, it is!

Let's first look at the index.ts file in the src folder.

At the top we can see the types:

type Env = {
    MAIN_WORKFLOW: Workflow;
    GOOGLE_CLIENT_ID: string;
    GOOGLE_CLIENT_SECRET: string;
    GOOGLE_REFRESH_TOKEN: string;
    RESEND_API_KEY: string;
    AI: Ai;
};

type Params = {
    startDate: string;
    endDate: string;
};

interface TokenResponse {
    access_token: string;
    expires_in: number;
    token_type: string;
    scope: string;
}

interface EventData {
    items: Array<{
        id: string;
        summary: string;
        description: string;
        start: { dateTime: string };
        end: { dateTime: string };
    }>;
}

interface AiResponse {
    response: string;
}

The first type "Env" is the type of environment variables shown in the wrangler.toml file.
And the following types and interfaces are response types from Google and Meta LLama AI model.

Next, we can see a class called mainWorkFlow. You can find our 4-step workflow there. Let's go through them one by one, starting with the first step:

// Step 1: Retrieve Access Token
const accessToken = await step.do(
    "getAccessToken",
    { retries: { limit: 5, delay: 1000 } },
    async () => {
        const response = await fetch("https://oauth2.googleapis.com/token", {
            method: "POST",
            headers: { "Content-Type": "application/x-www-form-urlencoded" },
            body: new URLSearchParams({
                client_id: this.env.GOOGLE_CLIENT_ID,
                client_secret: this.env.GOOGLE_CLIENT_SECRET,
                refresh_token: this.env.GOOGLE_REFRESH_TOKEN,
                grant_type: "refresh_token",
            }),
        });

        if (!response.ok) throw new Error("Failed to refresh access token");
        const tokenData = (await response.json()) as TokenResponse;
        return tokenData.access_token;
    }
);

As you can see, we can specify the name and configuration of each step (for example, how many times we try to retry them if they fail).
In this first step, we request the access token from Google Oauth based on our refresh token and client data, which we can later use to query the events of the given day.
And that brings us to the next step.
Step two looks like this:

// Step 2: Fetch Calendar Events within Date Range
const events = await step.do(
    "fetchMeetings",
    { retries: { limit: 3, delay: 2000 } },
    async () => {
        const response = await fetch(
    `https://www.googleapis.com/calendar/v3/calendars/primary/events?timeMin=${startDate}&timeMax=${endDate}&orderBy=startTime&singleEvents=true`,
            {
                headers: { Authorization: `Bearer ${accessToken}` },
            }
        );

        if (!response.ok) throw new Error("Failed to fetch events");
        const data = (await response.json()) as EventData;
        return data.items.map((event) => ({ summary: event.summary, description: event.description }));
    }
);

Here, we very simply call the Google API and query the meetings based on the specified date range (today). We are particularly interested in the summary and description. We will give these as prompts for our AI model. This will be the third step.

In the third step, we use the Meta Llama 3.1 model provided by Cloudflare to generate a cool little summary text about the day behind us. We don't even need to use streaming here, since this is a Workflow, we have time and also we can't stream e-mails (yet).

// Step 3: Generate Summary using AI
const descriptions = events.map(event => event.description).join("\n");
const aiResponse = await step.do(
    "generateSummary",
    { retries: { limit: 3, delay: 2000 } },
    async () => {
        const messages = [
            { role: "system", content: "You are a friendly assistant" },
            { role: "user", content: `Generate a playful summary of the user's week based on these event description:\n${descriptions}. Please just write out the playful summary, nothing more!` },
        ];
        // @ts-ignore
        return await this.env.AI.run("@cf/meta/llama-3.1-70b-instruct", { messages });
    }
) as AiResponse;

And in the fourth and last step, there is nothing left but to send our beautiful email with our wonderful summary:

// Step 4: Send Email using Resend
const resend = new Resend(this.env.RESEND_API_KEY);
await step.do(
    "sendEmail",
    { retries: { limit: 3, delay: 2000 } },
    async () => {
        const { data, error } = await resend.emails.send({
            from: 'Gyuri <hello@gyorgymarkvarga.com>',
            to: ['gyorgy.varga@shiwaforce.com'],
            subject: 'Weekly Summary',
            react: SummaryEmail({ meetingSummary: aiResponse.response })
        });

        if (error) {
            console.error({ error });
            throw new Error("Failed to send email");
        }
    }
);

Here we use Resend with React Email, which allows us to send emails in a very simple, developer-friendly way. Of course feel free to modify the email addresses. :)

Now you wonder how we can make sure to trigger that workflow every working day at 19:00. Here is the code snippet that is responsible for that:

const startWorkflow = async (env: Env) => {
    const today = new Date();
    const firstDayOfWeek = new Date(today.setDate(today.getDate() - today.getDay()));

    const instance = await env.MAIN_WORKFLOW.create({
        params: { startDate: firstDayOfWeek.toISOString(), endDate: new Date().toISOString() },
    });

    return new Response(JSON.stringify(await instance.status()), {
        headers: { "content-type": "application/json" },
    });
}

export default {
    async scheduled(
        env: Env,
        ctx: ExecutionContext,
    ) {
        ctx.waitUntil(startWorkflow(env));
    },
};

In here we have a startWorkFlow function that will fire up our workflow and we have a scheduled handler, that is needed for starting the workflow at a specific time (every working day at 7 pm).

Now let's see how to create beautiful emails based on React using React email. In the src folder inside the email folder there is a summary-email.tsx file, this will be the template for our email:

import * as React from 'react';
import { Html, Head, Body, Container, Section, Text, Button, Hr, Link, Tailwind } from '@react-email/components';

interface EmailProps {
    meetingSummary?: string;
}

export const SummaryEmail = ({ meetingSummary = "Your AI-generated meeting summary will appear here." }: EmailProps) => {
    return (
        <Html>
            <Head />
            <Tailwind>
                <Body className="bg-white font-sans">
                    <Container className="mx-auto px-6 py-8 max-w-2xl">
                        <Text className="text-3xl font-bold text-center text-black mb-6">
                            Your meetings summary for the day
                        </Text>
                        <Text className="text-lg text-gray-700 mb-4">Hello,</Text>
                        <Text className="text-lg text-gray-700 mb-4">
                            Here's a summary of your meetings for this day:
                        </Text>
                        <Section className="bg-gray-100 rounded-lg p-6 mb-6">
                            <Text className="text-base text-gray-800 whitespace-pre-wrap">
                                {meetingSummary}
                            </Text>
                        </Section>
                        <Hr className="border-t border-gray-300 my-6" />
                        <Section className="text-center">
                            <Text className="text-lg text-gray-700 mb-4">
                                Need more details? Check your full calendar:
                            </Text>
                            <Button
                                href="https://calendar.google.com"
                                className="bg-black text-white py-3 px-6 rounded text-base font-medium no-underline inline-block"
                            >
                                View Calendar
                            </Button>
                        </Section>
                        <Hr className="border-t border-gray-300 my-6" />
                        <Text className="text-sm text-gray-500 text-center">
                            © 2024 My Calendar Summary, Inc. All rights reserved.
                            <br />
                            <Link href="https://example.com" className="text-blue-600 underline">
                                My Calendar Summary
                            </Link>
                        </Text>
                    </Container>
                </Body>
            </Tailwind>
        </Html>
    );
}

export default SummaryEmail;

Here we can create a template as if we were creating a React component. With props, components and TailwindCSS. Do you need more than that?
We can even watch this in real time. Let's just start the preview with our "email" script in package.json:

"email": "email dev --dir ./src/emails"

With this, we can see the previews of our e-mail template in real time with hot reload.

Another thing worth looking at is the wrangler.toml file:

name = "calendar-workflow"
main = "src/index.ts"
compatibility_date = "2024-10-22"
compatibility_flags = ["nodejs_compat"]


[observability]
enabled = true

[[workflows]]
name = "main-workflow"
binding = "MAIN_WORKFLOW"
class_name = "mainWorkflow"

[ai]
binding = "AI"

[triggers]
crons = ["0 19 * * 1-5"]

and also the dev.vars file (which you can create for local development):

GOOGLE_CLIENT_ID = "<YOUR_GOOGLE_CLIENT_ID>"
GOOGLE_CLIENT_SECRET = "<YOUR_GOOGLE_CLIENT_SECRET>"
GOOGLE_REFRESH_TOKEN = "<YOUR_GOOGLE_REFRESH_TOKEN>"
RESEND_API_KEY = "<YOUR_RESEND_API_KEY>"

Here will be all the secrets that we need. In production you will need to add these secrets with the wrangler CLI. More info on that HERE.

Here, what is interesting to us are the environmental variables, here we will have to replace them with our own if we want to start the project ourselves.
Within [[workflows]], we define our workflows. We also enter the name of the class here.
We will also bind AI in the next section.
And finally, we define triggers. This will ensure that every day, from Monday to Friday at 7pm, a cron job runs and starts our main workflow, which does the Google API authentication, then retrieves the calendar events for the given day, makes an AI summary and then it sends it via e-mail.

How to deploy it?

First register to Resend and get an API key. You can get up and running in no time HERE.
Register to Google Developers Console and get a client id and client secret, you can follow THIS guide.
Generate the refresh token HERE. On the top right you can set your client id and also client secret from the second step And you must set the calendar.readonly right on the left and you can generate your tokens
Now we have all the data that can be inserted into our .dev.vars file and also into the Cloudflare environment variables with Wrangler CLI, more that HERE. Probably you do need to do this after the last step if you haven't got Wrangler CLI installed in your project.
Pull the project from the Github repo.
Run npm install on route.
Follow THIS guide to deploy it to Cloudflare. You can skip the first step, because we already have a project.

Let' connect!

I hope this article was useful. If you have any questions, you can always find me here in the comment section or on X and we can talk! :)
I should also mention that this post was made possible thanks to Shiwaforce, where I’ve had the chance to work on projects like this and bring ideas to life.

Make a real-time, offline first application with Instant

György Márk Varga — Thu, 17 Oct 2024 08:30:47 +0000

We all like to work with tools like Figma, Notion or Linear. These are all convenient, collaborative and real-time user interfaces in our hands, which make it a pleasure to work with.

You might think creating such a complex apps is only possible for million-dollar companies, but with InstantDB, a little AI magic and a little time to spare, we can get impressively close on our own.

In my previous article, I already presented how we can make a real-time chart component with Supabase and Tremor charts.

First, let's see what open source system our application will be built around? This is Instant.

Let's see what Instant is!

InstantDB is a modern, Firebase-like database solution designed for real-time, collaborative applications. It allows developers to manage relational queries directly in the frontend without needing to handle backend complexities like servers, sockets, or authentication. InstantDB supports features like optimistic updates, offline mode, and real-time sync, making it ideal for building responsive, multiplayer applications that work seamlessly even when offline.

So what are we going to build? Charli XCX's Brat album and the BratGenerator web interface they created for it, inspired me to do something similar.

It will look like this:

In terms of functions, this application has been further developed to the extent that the creations can be viewed, liked and we can even track these on a leaderboard.

Let's see how we can build this application! Before we go into the description of the codebase, you can find the entire project here on my Github.

Here is the X post from the app and the Github repo: // Detect dark theme var iframe = document.getElementById('tweet-1834242671642058948-276'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1834242671642058948&theme=dark" }

This was even shared by one of the creators of Instant. :)

By the way, you can access the live project here, deployed on Vercel.

Before cloning, it will be worthwhile to register on the Instant platform. You can do this here.
After registration, create a new application called realtime-brat-generator on the interface. We should see an interface like this at the top of the window:

Once we're done with that, let's clone the repo I linked above.
We can start this with the commands in the readme. Once we are done with that, the first thing to do is to rewrite the App ID to our own. This is found in the db.ts file and it references the .env file.

Then, after launch, we can already see that the application appears. But let's take a look at what exactly this app consists of.

If we go into package.json, we can see that the following technologies are used in the application:

Next.js
InstantDB
TailwindCSS
ShadCN
Eslint / Prettier

We can also look at the basics of the project. First, if we look at the db.ts file:

import { init } from '@instantdb/react';
import { Schema } from '@/lib/types';

export const APP_ID = process.env.APP_ID as string;

export const db = init<Schema>({ appId: APP_ID });

Then we can see that here we define our database connection and our schema.

Our schema is in the types.ts file:

export type Schema = {
  bratCreations: BratCreation;
  votes: Vote;
};

export interface BratCreation {
  id: string;
  text: string;
  preset: string;
  createdAt: number;
  createdBy: string;
}

export interface Vote {
  id: string;
  createdUserId: string;
  createdAt: number;
  bratCreationId: string;
  orientation: 'upvote' | 'downvote';
}

export interface User {
  id: string;
  email: string;
}

Simple enough, right? This database structure can also be seen on the Instant interface. Here in the following image:

On the Explorer page, we can see the current content of our database and how it is structured.

Let's go to page.tsx where we can see Instant in its full glory. This line of code queries the reactive data and we can use this hook as the useState() hook from React.

 const { isLoading, error, data } = db.useQuery({
    bratCreations: {},
    votes: {},
  });

Here, we practically do not have to do anything with this, it will be immediately reactive and automatically update the interface if something changes in our data.
We can also perform filtering very easily here, you can read more about it here.

Let's take a look at the Instant specific points of interest in the same component:

if (existingVote) {
      if (existingVote.orientation === orientation) {
        db.transact(tx.votes[existingVote.id].delete());
      } else {
        db.transact(tx.votes[existingVote.id].update({ orientation }));
      }
    } else {
      db.transact(
        tx.votes[id()].update({
          createdUserId: user.id,
          createdAt: Date.now(),
          bratCreationId: creationId,
          orientation,
        })
      );
    }
  };

Here you can see the code snippet where we can update and delete very easily with the Instant query language. The toggle operation of the liking system can be found here.

Another very interesting thing in the same file is authentication.

const { user } = db.useAuth();

With this line, we can query our currently logged-in user. This will be important because of the liking function. Only logged in users will be able to like.

The entry itself is managed by these lines of code:

const handleSendMagicCode = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!authState.email) return;

    setAuthState({ ...authState, sentEmail: authState.email, error: null });

    try {
      await db.auth.sendMagicCode({ email: authState.email });
    } catch (error) {
      if (error instanceof Error) {
        setAuthState({ ...authState, error: error.message });
      }
    }
  };

  const handleVerifyMagicCode = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!authState.code) return;

    try {
      await db.auth.signInWithMagicCode({
        email: authState.sentEmail,
        code: authState.code,
      });
      setIsAuthModalOpen(false);
      setAuthState({ sentEmail: '', email: '', error: null, code: '' });
    } catch (error) {
      if (error instanceof Error) {
        setAuthState({ ...authState, error: error.message });
      }
    }
  };

As you can see, we use email login and registration, which we can configure very easily on the appropriate interface of Instant, here:

However, for this we need to define Permissions in the application, on the Permissions tab in Instant DB. Here is the screen for that:

And also the code:

{
  "votes": {
    "bind": [
      "isOwner",
      "auth.id == data.createdUserId"
    ],
    "allow": {
      "create": "auth.id != null",
      "delete": "isOwner",
      "update": "isOwner"
    }
  }
}

In the permissions we must only "lock" the vote creations, because only authenticated users can create votes and of course only the vote creator (owner) can modify and delete these votes.

What's even more exciting is the code in BratCreationForm.tsx, where we can save our current Brat creation:

 const handleSave = () => {
    const bratCreation = {
      text: bratText,
      preset: selectedPreset.value,
      createdAt: Date.now(),
    };
    db.transact(
      tx.bratCreations[id()].update({
        ...bratCreation,
      })
    );

    setShowSaveAnimation(true);
    setShowConfetti(true);
    setConfettiComplete(false);

    setTimeout(() => {
      setShowSaveAnimation(false);
    }, 2000);
  };

And with that, we practically covered all CRUD operations with Instant DB in our application.

Now let's test the application!

If you also feel like developing with InstantDB, feel free to fork this Github repo and add new features to it, make pull requests or start from scratch in a new application in a few minutes using this tutorial:

https://www.instantdb.com/docs

I hope this article was useful. If you have any questions, you can always find me here in the comment section or on X and we can talk! 🙂

I should also mention that this post was made possible thanks to ShiwaForce, where I’ve had the chance to work on projects like this and bring ideas to life.

Realtime Chart with Supabase and Tremor

György Márk Varga — Wed, 28 Aug 2024 09:59:08 +0000

In our fast-paced world, users of our application want to get information as soon as possible. What could be faster than "real time"? Let's see how we can build a "real-time dashboard" component. First, we should check out how the implementation of a line chart looks like, and then it will be easy to do anything else with this stack, even putting together a complete real-time dashboard.

What will we build?

So, as I mentioned, we will start by constructing a line chart that will be updated in real time. This line chart represents prices in specific time (for example a stock prices in the market):

The technologies that we use

If you haven't heard of Supabase yet, I'll describe it in a few sentences so that you can get to know it better:

Supabase is an open-source backend-as-a-service platform that provides developers with a real-time database, authentication, and storage solutions, built on top of PostgreSQL. It offers a seamless integration with modern frameworks, allowing developers to easily create, manage, and deploy full-stack applications without needing to manage server infrastructure. Supabase is often compared to Firebase, but with the advantage of being open-source and SQL-based.

Implementation

Let's give ourselves a big advantage by using Supabase's Next.js starter project, which we can access HERE. This saves us a lot of settings. We can already create the project with this command:



npx create-next-app -e with-supabase

After this has been issued, we can continue with the default settings. I named my project "realtime-chart".
There are some settings we need to make. An example of this is rewriting the .env.local.example file to .env and replacing the two Supabase API key values:



NEXT_PUBLIC_SUPABASE_URL=[INSERT SUPABASE PROJECT URL]
NEXT_PUBLIC_SUPABASE_ANON_KEY=[INSERT SUPABASE PROJECT API ANON KEY]

We will be able to get this by creating a Supabase project.
We can easily do this HERE. I also named my Supabase project "realtime-chart" for the sake of simplicity.

We will access our API keys through the "Project settings" and within it the "API" point. We will find these two keys here:

If we have copied them, we can start the application with the dev command in package.json.

When we start and look at the project for the first time, we can see a lot of extra things (e.g. authentication) that we won't necessarily need, at least for this small example project (of course, we can put them in easily enough later). As you can see in the source code on Github, I stripped everything down enough to focus only on the real time component.

If we return to the Supabase admin interface, in the left menu bar, if we click on Table Editor, the interface will appear where we can add a new database table to our project. Click on the green "Create a new table" button, then fill out the form as follows:

What will be interesting for us here is the "Enable Realtime" checkbox, which we need to tick.

This “Realtime” function works as follows:

Supabase’s real-time functionality with PostgreSQL works by listening to changes in the database, such as when new data is added or existing data is updated. It uses PostgreSQL’s built-in capabilities to capture these changes and instantly sends updates to connected clients (like your web or mobile app). This means that whenever something in the database changes, your app can immediately react and display the latest information without needing to refresh or manually check for updates.

Now that we understand how it works, let's take a look at how we will implement it. Let's go back to our project and install the appropriate packages.

Let's start with Tremor first. We will use Tremor to display the data in the form of a chart. It is described in great detail in the docs that in order to be able to upload it to a Nextjs project, we should follow this description.

We need to install Tremor first:



npm install @tremor/react

After that, we need to update Tailwind (this step is probably not even necessary, because we installed the latest Tailwind version by default, but we can do it anyway):



npm install tailwindcss@latest

Then we upload the headless ui:



npm install @headlessui/react

Then the Tailwind css headless ui plugin:



npm install @headlessui/tailwindcss

The tailwind css form:



npm install -D @tailwindcss/forms

Remix icon is also required:



npm install @remixicon/react

And the last and most important step is to modify our tailwind.config.ts file based on the docs.

If we are satisfied with this, we are ready to code and to implement the real time feature in our chart.

First, let's go to the app/page.tsx file, where our page will look like this:



import { createClient } from "@/utils/supabase/server";
import RealtimeChart from "@/components/realtime-chart";

export default async function Index() {
    const supabase = createClient();

    const { data, error } = await supabase.from("chart_data").select();

    if (error) {
        console.error("Error fetching data:", error);
        return (
            <div className="min-h-screen flex items-center justify-center bg-gray-100">
                <p className="text-red-600 text-lg font-semibold">Error loading data</p>
            </div>
        );
    }

    return (
        <div className="min-h-screen flex flex-col w-full items-center bg-gray-50">
            <main className="flex-1 w-full flex flex-col items-center py-10">
                <div className="max-w-4xl w-full px-6">
                    <h2 className="text-3xl p-4 font-bold text-gray-800 text-center">Real Time Chart</h2>
                    <div className="bg-white rounded-lg shadow p-6">
                        <RealtimeChart serverPrices={data} />
                    </div>
                </div>
            </main>
        </div>
    );
}

Here we need the Supabase client. This will allow us to start our database query. And the data is passed to a component that we haven't implemented yet. This will be a client component and will be responsible for displaying our data visually.

So let's create a components folder, and then the realtime-chart inside it. The code of this component is also quite simple, let's look at it:



'use client';

import { useEffect, useState } from "react";
import { createClient } from "@/utils/supabase/client";
import { LineChart } from '@tremor/react';

interface PriceItem {
    id: number;
    created_at: string;
    price: number;
}

interface RealtimeChartProps {
    serverPrices: PriceItem[];
}

export default function RealtimeChart({ serverPrices }: RealtimeChartProps) {
    const supabase = createClient();
    const [prices, setPrices] = useState<PriceItem[]>(serverPrices);

    useEffect(() => {
        const channel = supabase.channel("realtime chart data").on('postgres_changes', {
            event: 'INSERT', schema: 'public', table: 'chart_data'
        }, (payload) => {
            console.log(payload);
            setPrices((prevPrices: PriceItem[]) => [...prevPrices, payload.new as PriceItem]);
        }).subscribe();

        return () => {
            supabase.removeChannel(channel);
        };
    }, [supabase]);

    const formatTime = (dateString: string) => {
        const date = new Date(dateString);
        return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
    };

    const chartData = prices.map((item: PriceItem, index: number) => ({
        date: formatTime(item.created_at) || `Point ${index + 1}`,
        Price: item.price,
    }));

    return (
        <LineChart
            className="h-80 w-full"
            data={chartData}
            index="date"
            categories={["Price"]}
            showAnimation={true}
            valueFormatter={(number) =>
                `$${Intl.NumberFormat("us").format(number)}`
            }
        />
    );
}

Let's see exactly what's going on here. First, let's define the type. By the way, we can do this automatically with Supabase.
For now, the manual solution will be good for us for this small project.

The soul of the entire component is the code section in useEffect. Here we subscribe to the INSERT event and add the new price to the existing prices, which we insert into the database, so every time a new price (or exchange rate) is entered into the data table, it will also be visible on the graph in real time, without reloading the browser window.
In the following sections, we will perform different formatting to make the values appear aesthetically on the graph.
And part of the template will be a LineChart component. We will pass the appropriate data to it.

Before we try it out, let's set another thing: in the Supabase interface, under Authentication, Policies, we set "public can read chart data".

If we are done with this, then we fill the database with data.
We can do this easily in the Table editor. Add 6-8 records so that the data looks good on the graph.

We should see something like this in our browser:

Now we also test whether this chart really provides real-time data display. Place the browser tab containing the chart and the tab for editing the Supabase table next to each other. If we insert a current price into the table, we can also see that our chart is updated in real time.

We can subscribe not only to INSERT, but also to other database events, such as UPDATE or DELETE. So the possibilities are endless.

I hope this helped to better understand the fact that there are not only static charts that can be accessed after an browser refresh, but also that we can display data here dynamically with the help of Supabase and Tremor.

How can we improve it?

Of course we can improve it in a lot of ways. For example Tremor offers you the raw components of the charts. We can get those raw components and modify it that it behaves in the way that only the end of the charts getting the animation, not the whole chart when a new price point is added. Feel free to do this and open a Merge request on Github!

If you have any questions, please head to the comment section or find me on X!

And of course (as always) the source code is available on my Github, feel free to try it out and use it! :)

Implementing the "Cloudflare worker stack"

György Márk Varga — Thu, 15 Aug 2024 14:43:33 +0000

So you need a full serverless infrastructure that can scale to zero and infinity all for $0 (with lower traffic)? All this with Cloudflare services. I've got you covered. (and this isn't even an ad, Cloudflare is just thaaat good)

Let's explore how you can use Cloudflare Workers to build your next app. You can even use this as a template when starting your project.

The specific application that we will build is a system that uses AI to generate a poem and an image with hourly timing, based on the current Budapest weather. Then saves it to the database and R2 storage. We will keep a record of how long a generation took in Cloudflare's KV store. We will display the current status on a Cloudflare Pages page a Nextjs web application.

Now that we know the purpose and operation of the application. Let's take a look at what this architecture looks like with the help of a diagram.

Our Tech stack will look like this:

Cloudflare Workers
Cloudflare D1 database
Cloudflare R2 object storage
Cloudflare KV (Key value storage)
Cloudflare scheduler (cron jobs)
Cloudflare AI
Cloudflare Pages (Next.js)
Hono web framework
Drizzle ORM

Let's move on to the implementation:
First of all, we will need a Cloudflare account. After logging in, we can start working.

However, we will first start creating the project on our own machine. We issue the following command in the terminal based on the Cloudflare docs:

npm create cloudflare@latest cloudflare-poem -- --framework=hono

If the packages are not installed, this command does the job for us. In fact, it will even deploy our project.
Open the created project in your favorite IDE. In index.ts we can also see the simple structure of the code:



import { Hono } from 'hono'

type Bindings = {
  [key in keyof CloudflareBindings]: CloudflareBindings[key]
}

const app = new Hono<{ Bindings: Bindings }>()

app.get('/', (c) => {
  return c.text('Hello Hono!')
})

export default app

Then create a D1 database and associate it with our worker. Based on the official tutorial, it will not be difficult for us to do this.

Let's issue this command standing in the root of our project:

npx wrangler d1 create cloudflare-poem-db

This creates our database. This command returns the values in the terminal that we need to copy into the wrangler.toml file. This is what they look like to me:



[[d1_databases]]
binding = "DB" # i.e. available in your Worker on env.DB
database_name = "cloudflare-poem-db"
database_id = "ebf949ce-56e8-4d98-ad63-a7ba7aa8df64"
migrations_dir = "drizzle/migrations"

With this, we practically connected the system to our DB. However, the next step is to set up the database schema. Here we can already see that we have a migrations_dir key, we will talk about this a little later. This is where Drizzle ORM will come to our aid. We also install it:



npm i drizzle-orm
npm i -D drizzle-kit

Next, create a drizzle.config.json file in the root directory that tells Drizzle where to create the migration files and where to find the schema file:



{
  "out": "drizzle/migrations",
  "schema": "src/db/schema.ts"
}

We can also create the schema.ts file with this momentum in the src/db folder:



import { integer, sqliteTable, text } from "drizzle-orm/sqlite-core";

export const poems = sqliteTable("poems", {
    id: integer("id", { mode: "number" }).primaryKey(),
    text: text("text").notNull(),
    imgUrl: text("imgUrl").notNull(),
    createdDate: integer("created_date", { mode: "timestamp" }).notNull().default(sql`(current_timestamp)`),
});

We store the text of the poem, the URL of the associated generated image and the date of the creation. That will be enough for us.

Our next task will be to push this schema to our D1 database running in Cloudflare. For this, let's create a couple of commands in the package.json file, which we can use to start this.
This can also go into the scripts block:



   "db:generate": "drizzle-kit generate",
   "db:migrate": "wrangler d1 migrations apply cloudflare-poem-db --remote"

We can use generate to generate our schema. Let's start that. Then we need to migrate these to our database running in Cloudflare, so the next command we run will be migrate. If everything is fine, we can see a green checkmark that our .sql migration file has been applied successfully.

We can also see this on the Cloudflare dashboard page, under the "Workers & Pages" menu item, under "D1". If everything went fine, we can see that our database schema has been applied correctly.

Now it's time to connect the scheduler. First, let's say that a new record is created in the database every 1 minute. For this, we need a scheduled event export in the index.ts file and, of course, settings must also be made in wranger.toml.

Add the following to wrangler.toml:



[triggers]
crons = [ "* * * * *" ]

This sets our trigger to once every minute for now. It will be perfect for us to test. Well, let's also look at the index.ts file:



import { Hono } from 'hono';
import { drizzle } from 'drizzle-orm/d1';
import { poems } from "./db/schema";

type Bindings = {
  [key in keyof CloudflareBindings]: CloudflareBindings[key]
}

const app = new Hono<{ Bindings: Bindings }>();

app.get('/', (c) => {
  return c.text('Hello Hono!');
});

export default {
  scheduled(
      event: ScheduledEvent,
      env: Bindings,
      ctx: ExecutionContext
  ) {
    const delayedProcessing = async () => {
      await createPoem(env);
    };
    ctx.waitUntil(delayedProcessing());
  },
  fetch(request: Request, env: Bindings, ctx: ExecutionContext) {
    return app.fetch(request, env, ctx);
  },
};

async function createPoem(env: Bindings) {
  const db = drizzle(env.DB);
  const poemData = {
    text: 'The rose is red',
    imgUrl: 'https://example.com/rose.jpg'
  };
  const result = await db.insert(poems).values(poemData).returning();
}

Here we see exactly what happens is that we create a createPoem function that runs every minute and uses the Drizzle ORM to save a fairly simple poem to the database.

Now let's integrate an AI model provided by Cloudflare and generate a poem with it.
To do this, first add a binding in wrangler.toml:



[ai]
binding = "AI"

Then run the cf-typegen scripts from package.json, because this will ensure that we have the right env variables and that typescript will not have errors.

We modify our createPoem function as follows:



async function createPoem(env: Bindings) {
  const db = drizzle(env.DB);
  const aiGeneratedPoemResponse = await env.AI.run('@cf/meta/llama-3.1-8b-instruct', {
    prompt: "Write a poem about a rose."
  });
  const poemData = {
    text: aiGeneratedPoemResponse.response,
    imgUrl: 'https://example.com/rose.jpg'
  };
  const result = await db.insert(poems).values(poemData).returning();
}

You can see that we are using the latest model of llama here. This works very well, it also generates the poem for us. This is enough for us to start, but let's go further. What else do we want?

Of course, we would like the poem to be constructed from the current weather, an image generated by AI should also be prepared and saved in the database (poem text) and in the R2 object storage (picture). It would also not hurt to store in the KV store how long the generation lasted.



wrangler r2 bucket create cloudflare-poem-bucket

And then this can go into our wrangler.toml config file:



[[r2_buckets]]
binding = 'BUCKET'
bucket_name = 'cloudflare-poem-bucket'

Then let's create a kv namespace for it. Now, for the sake of variety, let's create this on Cloudflare's dashboard (because it is possible there as well). Under Workers & Pages, in the KV menu, go to Create Namespace, then name it and get its id, which we need.

This can also be pushed into wrangler.toml (I named my KV namespace “KV” for noble simplicity)



[[kv_namespaces]]
binding = "KV"
id = "f1c144608d9c4a1991c98a966e800934"

And with that, we would be done with configuring the tools of our backend system. Let's see what else is needed to create the above-mentioned system. Let's go to index.ts and complete our code with the following. It will be quite a bit, but after the code I will explain what we did there:



import { Hono } from 'hono';
import { drizzle } from 'drizzle-orm/d1';
import { poems } from "./db/schema";
import { desc } from "drizzle-orm";

type Bindings = {
  [key in keyof CloudflareBindings]: CloudflareBindings[key]
}

interface WeatherResponse {
  weather: { description: string }[];
  main: { temp: number; feels_like: number };
}

const app = new Hono<{ Bindings: Bindings }>();

app.get('/current-weather-poem', async (c) => {
  const db = drizzle(c.env.DB);

  const poem = await db.select().from(poems).orderBy(desc(poems.createdDate)).limit(1);

  return c.json(poem[0]);
});

export default {
  scheduled(
      event: ScheduledEvent,
      env: Bindings,
      ctx: ExecutionContext
  ) {
    const delayedProcessing = async () => {
      await createPoem(env);
    };
    ctx.waitUntil(delayedProcessing());
  },
  fetch(request: Request, env: Bindings, ctx: ExecutionContext) {
    return app.fetch(request, env, ctx);
  },
};

async function createPoem(env: Bindings) {
  const db = drizzle(env.DB);

  const startTime = Date.now();

  const currentWeatherInBudapestResponse = await fetch(`https://api.openweathermap.org/data/2.5/weather?lat=47.497913&lon=19.040236&appid=${env.OPENWEATHER_API_KEY}`);
  const currentWeatherInBudapest = await currentWeatherInBudapestResponse.json() as WeatherResponse;

  const aiGeneratedPoemResponse = await env.AI.run('@cf/meta/llama-3.1-8b-instruct', {
    prompt: `Write a poem about the current weather in Budapest. Here is the weather in an object JSON: ${JSON.stringify(currentWeatherInBudapest)}. Please make sure to not make anything up, just write about the exact weather that is provided. Please note that the temperature is in Kelvin (main.temp, main.feels_like), so convert it to Celsius! Please only write the text of the poem, nothing else!`
  }) as { response: string }

  const imageName = generateRandomImageName();

  const aiGeneratedImageResponse = await env.AI.run(
      "@cf/stabilityai/stable-diffusion-xl-base-1.0",
      {
        prompt: `${currentWeatherInBudapest.weather[0].description} in Budapest, Hungary.`
      }
  );

  await env.BUCKET.put(imageName, aiGeneratedImageResponse);

  const poemData = {
    text: aiGeneratedPoemResponse.response,
    imgBucketName: imageName,
    createdDate: new Date().toISOString()
  };

  const [insertedPoem] = await db.insert(poems).values(poemData).returning({
    id: poems.id,
  });

  const endTime = Date.now();

  const elapsedTime = endTime - startTime;

  await env.KV.put(insertedPoem.id.toString(), elapsedTime.toString());
}

function generateRandomImageName(): string {
  return `image_${Math.random().toString(36).substring(2, 15)}`;
}

First, let's look at the createPoem function. In the first round, here we query the Budapest weather from OpenWeatherMap. Where you have to register to get an API key. We can do that HERE. Also, by definition, we need to include this in the wrangler.toml file:



[vars]
OPENWEATHER_API_KEY = <YOUR_API_KEY>

We also have a scheduled function that will run with the frequency set in the wrangler.toml file and this will trigger the createPoem function.

We will need the "/current-weather-poem" endpoint to be able to return the newly created poem and all its data.
How simple is it?

Now let's look at Cloudflare Pages, where we can solve to display both the poem and the image inside a Next.js application.
We will have a similarly simple task. Within Cloudflare, we can also create a Next.js project, where we can create a full stack app. We can start this with a command:



npm create cloudflare@latest cloudflare-poem-next -- --framework=next

If we go through the setup with the default settings, we will get a deployed Nextjs application.
From this application, we can access data from our backend system in many ways.

Since this is a full stack application, we can directly access the database, KV store and R2 object storage with the help of React Server Components.
We can also call the endpoint that we defined in our backend worker.

We look at both ways as an example. We will query the generation time and the image directly from KV and R2, while the poem and related data from the REST API endpoint. There is also a wrangler.toml file in the Nextjs project, where we can bind these systems together with the application. The corresponding values for KV and R2 must be entered here. Mine looks like this. Insert the appropriate ID for the KV:



name = "cloudflare-poem-next"
compatibility_date = "2024-08-06"
compatibility_flags = ["nodejs_compat"]
pages_build_output_dir = ".vercel/output/static"

[[kv_namespaces]]
binding = "KV"
id = "f1c144608d9c4a1991c98a966e800934"

[[r2_buckets]]
binding = 'BUCKET'
bucket_name = 'cloudflare-poem-bucket'

Next, remove all the frills from globals.css, leaving only this:



@tailwind base;
@tailwind components;
@tailwind utilities;

Then go into the page.tsx file and create the code like this:



import { getRequestContext } from "@cloudflare/next-on-pages";
import { marked } from 'marked';

export const runtime = 'edge';

interface PoemResponse {
    id: string;
    text: string;
    createdDate: string;
    imgBucketName: string;
}

export default async function Home() {
    const response = await fetch("https://cloudflare-poem.gyurmatag.workers.dev/current-weather-poem");
    const responseData = await response.json() as PoemResponse;

    const pic = await getRequestContext().env.BUCKET.get(responseData.imgBucketName);
    const timeToGenerate = await getRequestContext().env.KV.get(responseData.id.toString());

    let imageSrc: string | undefined;

    if (pic) {
        const imageArrayBuffer = await pic.arrayBuffer();
        const imageBase64 = Buffer.from(imageArrayBuffer).toString('base64');
        imageSrc = `data:image/jpeg;base64,${imageBase64}`;
    }

    const formattedText = marked(responseData.text);

    return (
        <main className="flex min-h-screen items-center justify-center bg-gray-100 p-6">
            <div className="max-w-md w-full bg-white shadow-md rounded-lg p-6 space-y-4">
                {imageSrc ? (
                    <div className="w-full">
                        <img src={imageSrc} alt="Cloudflare Bucket Image" className="w-full h-48 object-cover rounded-lg shadow" />
                    </div>
                ) : (
                    <div className="w-full h-48 bg-gray-300 rounded-lg flex items-center justify-center">
                        <p className="text-gray-500">Image not found</p>
                    </div>
                )}

                <div className="text-center space-y-2">
                    <div
                        className="prose prose-sm text-gray-800"
                        dangerouslySetInnerHTML={{ __html: formattedText }}
                    ></div>
                    <p className="text-sm text-gray-600 mt-2">- {responseData.createdDate}</p>

                    {timeToGenerate && (
                        <p className="text-xs text-gray-500 mt-2">
                            <span className="font-semibold">Generation Time:</span> {timeToGenerate} ms
                        </p>
                    )}
                </div>
            </div>
        </main>
    );
}

Here, we first define that the service of these components takes place on an 'edge' environment, because Cloudflare's EDGE network runs on it.
After that, we retrieve the current poem, take the image from our bucket based on the name, and the generation time from the KV. Then we render everything nicely on the HTML page. For this, we will also need to properly display the markdown text generated by the AI on the card. This requires two things.

Tailwind's Typography plugin.
The Marked package, with which we will display the markdown format.

First, let's upload the Typography plugin:



npm install -D @tailwindcss/typography

This should also be configured in the tailwind.config.ts file:



 plugins: [
      require('@tailwindcss/typography')
  ],

Let's also add Marked:



npm install marked

To have zero Typescript errors, the Cloudflare names, we use, must be included in the env.d.ts file. The content of this file is automatically generated by running the cf-typegen script in package.json.

If we made everything right, we can already see the results of our work. If we open the application in the browser (you can also open the app from the Cloudflare dashboard), we can see something similar.

We have a beautiful poem adapted to the current weather, the related equally beautiful AI-generated image and, of course, the date with the generation duration.

Pretty cool, right? We got to know a good part of the Cloudflare stack and we have an application that we can build on top of in a fully scalable and cost-effective way. If we want to store BE separately from FE, then I think this is a pretty good solution. If we want to build a full stack app, Vercel is perfect for that.

You can find the code base of the two projects HERE and HERE.

If you have any questions, write a comment here and/or find me on X!

Happy coding! :)

Local first AI app with Gemini Nano and Chrome

György Márk Varga — Fri, 26 Jul 2024 12:01:17 +0000

Until now, when creating an AI enabled application, we usually needed an OpenAI (or other provider) API key to communicate with the interfaces. In such a case, we can use very powerful LLMs in exchange of some API tokens.

However, Google recently announced that we can easily run its smallest model, the Gemini Nano, on our computers easily. We can do this in the Chrome browser. This solution is no stranger to Google, as it is already available on some mobile devices with Android operating systems.
For now, this is not available in the main version of Chrome, only in the Dev and Canary versions, so it is still only an early stage built-in API. However, we developers like to try new things, which is why I came up with the idea to build something with this new API.

As soon as this new browser API came out, Vercel already updated their AI SDK to allow access to this API as well.
With these tools, nothing is simpler than building an application that does not need any API key, and can run 100% locally (yes, even without internet) and has some cool AI features.

What are we going to build?

Let's make a small mini blog application that generates hashtags matching the content of the article when you press a button. This is exactly a task for the Gemini Nano model, which it can easily cope with.

Technology stack

Next.js
Vercel AI SDK
Chrome AI
TailwindCSS

Prerequisites

Before we get started, it is necessary to download the Chrome Dev version. Once you're done with that, start it and do some settings:

Enter this "address" in the address bar, then press enter:

chrome://flags

Here, look for the “Enables optimization guide on device” setting, then set it to Enabled BypassPerfRequirement. Then set the “Prompt API for Gemini Nano” setting to Enabled. In the end you have to end up with this configuration:

Then restart Chrome and type this into the address bar:

chrome://components

Let's check here whether the "Optimization Guide On Device Model" component is up-to-date, if not, update it. This is the setting that contains our model. Chrome will probably have to download this the first time you use it, it will take a few minutes.

If everything is fine you should see something like this:

If we did everything right, we can already play with our local AI model on this page. Let's also try turning off the Internet. Doesn't it work so well and quickly? Just think how good it could be to use this in the future on platforms where it's important that the data does not leave our local machine and/or fast response time is also a key factor.

Implementation

And then the exciting part begins. Let's start making the app!
To begin with, issue the well-known command in the terminal of our machine:

npx create-next-app@latest

As usual, we name our application and check the default settings. You can enter anything for the name of the application, for me it was:

local-first-article-summary

Now onto building it... Let's make the smallest building blocks first. And these are the componenst and the markdown files of the blog post.

We will have an ArticleCard.tsx file that contains the card view of each article and expects the appropriate input parameters:



import Link from 'next/link'
import { Article } from '@/types'

const ArticleCard = ({ article }: { article: Article }) => {
    return (
        <div className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30">
            <h2 className="mb-3 text-2xl font-semibold">
                {article.title} <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">-&gt;</span>
            </h2>
            <p className="m-0 max-w-[30ch] text-sm opacity-50">
                {article.excerpt}
            </p>
            <Link href={`/articles/${article.id}`}>
                <span className="text-blue-500">Read more</span>
            </Link>
        </div>
    )
}

export default ArticleCard

Then comes the soul of our entire application, which is AISummary.tsx. I'll write down the code, and then let's see what exactly is going on here. So the code is:



'use client'

import { streamText } from "ai";
import { chromeai } from "chrome-ai";
import { SparklesIcon } from "@heroicons/react/16/solid";
import { FormEvent, useState } from "react";

interface AISummaryProps {
    articleContent: string;
}

const AISummary = ({ articleContent }: AISummaryProps) => {
    const [hashtags, setHashtags] = useState<string>("");
    const [loading, setLoading] = useState<boolean>(false);

    const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
        e.preventDefault();
        let accumulatedHashtags = "";
        setLoading(true);
        try {
            const { textStream } = await streamText({
                model: chromeai("text", {}),
                prompt: `This is the content of an article: ${articleContent} Summarize in three basic hashtag with emojis at the end of each hashtag! Please make sure you only write the hashtags and emojis down, nothing more!`,
            });
            for await (const textPart of textStream) {
                accumulatedHashtags += textPart;
                setHashtags(accumulatedHashtags);
            }
        } catch (e) {
            console.error(e);
        } finally {
            setLoading(false);
        }
    }

    return (
        <>
            <form onSubmit={handleSubmit}>
                <button type="submit"
                        className="mt-10 flex items-center px-6 py-2 bg-blue-600 text-white rounded hover:bg-blue-600">
                    <SparklesIcon className="h-5 w-5 mr-2"/>
                    {loading ? "Generating hashtags..." : "Generate some hashtags!"}
                </button>
            </form>
            <p className="mt-4 text-gray-700 text-lg font-bold">
                {hashtags}
            </p>
        </>
    );
}

export default AISummary;

We have a form here. Within this, we have a button, which will do the AI hashtag generation when clicked. Here we also display the hashtags below. It is important that there are interactive parts and we use the useState hook, so this will be a client component. This is necessary in order to display the hashtag parts, generated for us by Chrome AI, in a nice stream. Within the handleSubmit function, we use the streamText function from the Vercel AI SDK, which interacts with our "chromeai" local model. Here we need a good prompt and, of course, the ability to iterate through the streamed text chunks and continuously fill our hashtag state with it. Pretty simple and easy to read, right?

However, there are a few dependencies that we need to install in order for this to work. These are the AI interface tools and heroIcons. Let's also install these:



npm i ai
npm i @ai-sdk/openai
npm i chromes

If we done with this, then we can create the content, precisely in .md format, since our application will process posts in markdown format. I created two examples, but the markdown of any article can be inserted here. Let's make an app/content folder and inside it there should be an article1.md and an article2.md. As I mentioned, we can fill it with any content we like, I filled it with these and with this formatting:

article1.md



---
title: "The Rise of Quantum Computing"
excerpt: "Quantum computing is set to revolutionize technology. This article explores its potential and challenges."
---

# The Rise of Quantum Computing

Quantum computing is one of the most exciting advancements in technology today. Unlike classical computers, which use bits to process information in binary form (0s and 1s), quantum computers use quantum bits or qubits. These qubits can exist in multiple states at once, thanks to the principles of quantum superposition and entanglement.

## What Makes Quantum Computing Different?

At the heart of quantum computing is the qubit. While a classical bit can be either 0 or 1, a qubit can be both at the same time. This property is known as superposition. Furthermore, qubits can be entangled, meaning the state of one qubit can depend on the state of another, no matter the distance between them. This entanglement allows quantum computers to perform complex calculations at unprecedented speeds.

### Potential Applications

The potential applications of quantum computing are vast and varied:

1. **Cryptography**: Quantum computers could crack current cryptographic codes with ease, leading to new methods of securing data.
2. **Medicine**: They can model molecular structures to accelerate drug discovery.
3. **Artificial Intelligence**: Quantum computing can significantly enhance machine learning algorithms, making AI more powerful and efficient.
4. **Optimization Problems**: From logistics to financial modeling, quantum computers can solve optimization problems more efficiently than classical computers.

## Challenges Ahead

Despite its promise, quantum computing faces significant challenges:

1. **Error Rates**: Quantum computers are highly susceptible to errors due to decoherence and quantum noise.
2. **Scalability**: Building and maintaining a large number of qubits in a coherent state is incredibly difficult.
3. **Cost**: Quantum computers are currently extremely expensive to build and operate.

## The Future of Quantum Computing

Researchers and tech giants like IBM, Google, and Microsoft are investing heavily in quantum computing. IBM has already made quantum computers available through the cloud, allowing researchers and developers to experiment with this technology.

### Conclusion

Quantum computing holds the promise of revolutionizing many fields. While there are substantial challenges to overcome, the potential benefits make it one of the most exciting areas of research and development today. As technology progresses, we can expect to see quantum computing move from theoretical research to practical applications, reshaping our world in the process.

article2.md



---
title: "The Future of Artificial Intelligence"
excerpt: "Artificial Intelligence (AI) continues to evolve rapidly. This article explores the future trends and impacts of AI technology."
---

# The Future of Artificial Intelligence

Artificial Intelligence (AI) has seen tremendous growth and evolution over the past decade. As AI technology continues to advance, its impact on various industries and aspects of daily life is becoming increasingly profound.

## Current State of AI

Today, AI is used in a wide range of applications, from natural language processing and computer vision to autonomous vehicles and healthcare diagnostics. AI algorithms can process vast amounts of data at incredible speeds, making them invaluable tools for data analysis and decision-making.

### Key Trends in AI

Several key trends are shaping the future of AI:

1. **Ethical AI**: As AI systems become more integrated into society, the importance of ethical AI practices is growing. This includes ensuring fairness, transparency, and accountability in AI algorithms.
2. **AI and Automation**: AI-driven automation is transforming industries by streamlining processes and increasing efficiency. From manufacturing to customer service, automation is reducing the need for human intervention in repetitive tasks.
3. **AI in Healthcare**: AI is revolutionizing healthcare by enabling early diagnosis of diseases, personalized treatment plans, and efficient management of healthcare resources.
4. **Edge AI**: With the rise of IoT devices, there is a growing trend towards processing AI algorithms on the edge, closer to where data is generated. This reduces latency and enhances real-time decision-making capabilities.

## Challenges and Considerations

While the future of AI is promising, several challenges need to be addressed:

1. **Data Privacy**: AI systems rely on vast amounts of data, raising concerns about data privacy and security. Ensuring that AI systems protect user data is crucial.
2. **Bias in AI**: AI algorithms can inadvertently perpetuate biases present in training data. Addressing bias in AI is essential to ensure fair and equitable outcomes.
3. **Job Displacement**: As AI-driven automation increases, there is a potential for job displacement in various sectors. Strategies for workforce reskilling and transition are needed.

## The Road Ahead

Looking ahead, AI technology is poised to continue its rapid evolution. Researchers are exploring new frontiers in AI, such as general artificial intelligence, which aims to create systems with human-like cognitive abilities. Additionally, collaborations between academia, industry, and governments will play a vital role in advancing AI technology responsibly.

### Conclusion

The future of artificial intelligence is both exciting and challenging. As AI technology advances, it holds the potential to revolutionize industries, improve quality of life, and address some of the world's most pressing issues. However, realizing this potential requires careful consideration of ethical, social, and economic implications.

By fostering responsible AI development and addressing key challenges, we can ensure that the future of AI benefits all of humanity.

Now we need a helper file that converts our markdown files into a structure that React can understand. To do this, create a lib folder and a markdown.ts file inside it:



import fs from 'fs'
import path from 'path'
import matter from 'gray-matter'
import { remark } from 'remark'
import html from 'remark-html'
import remarkGfm from 'remark-gfm'
import { Article } from '@/types'

const contentDirectory = path.join(process.cwd(), 'content')

export async function getArticleData(filename: string): Promise<Article> {
    const fullPath = path.join(contentDirectory, filename)
    const fileContents = fs.readFileSync(fullPath, 'utf8')

    const matterResult = matter(fileContents)
    const processedContent = await remark()
        .use(html)
        .use(remarkGfm)
        .process(matterResult.content)
    const contentHtml = processedContent.toString()

    return {
        id: filename.replace(/\.md$/, ''),
        title: matterResult.data.title,
        excerpt: matterResult.data.excerpt,
        contentHtml,
    }
}

export async function getAllArticles(): Promise<Article[]> {
    const filenames = fs.readdirSync(contentDirectory)
    return await Promise.all(
        filenames.map(async (filename) => {
            return await getArticleData(filename)
        })
    )
}

This file is self-explanatory, it does the conversion for us with the help of some libs, which we can also install:



npm i gray-matter
npm i remark
npm i remark-gfm
npm i remark-html

If you are already in the terminal, then install the Tailwind typography add-on:

npm i @tailwindcss/typography

We will need this so that when we display the HTML file converted from markdown, TailwindCSS does not apply the default formatting to it. We also need to indicate the use of this add-on in our tailwind.config.ts file:



import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      backgroundImage: {
        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
        "gradient-conic":
          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
      },
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
  ],
};
export default config;

In addition, we will also need a type definition file.

types/index.ts



export interface Article {
    id: string
    title: string
    excerpt: string
    contentHtml: string
}

And then all you have to do is put the building blocks together. Change app/page.tsx to:



import ArticleCard from '../components/ArticleCard'
import { getAllArticles } from '@/lib/markdown'
import { Article } from "@/types";

export default async function Home() {
    const articles: Article[] = await getAllArticles()

    return (
        <main className="flex min-h-screen flex-col items-center justify-between p-24">
            <div className="grid gap-4 lg:grid-cols-2 lg:w-full lg:max-w-5xl">
                {articles.map((article) => (
                    <ArticleCard key={article.id} article={article} />
                ))}
            </div>
        </main>
    )
}

Here you can see that we iterate through the articles, which we query from the markdown files and pass their data to the previously created ArticleCard component.

We also need a detail page where we display the entire article. This is already referenced on the article card, you just need to create the route. Create the app/articles/[id]/page.tsx file:



import { getArticleData } from '@/lib/markdown';
import { notFound } from 'next/navigation';
import { Article } from '@/types';
import AISummary from "@/components/AISummary";

const ArticleDetail = async ({ params }: { params: { id: string } }) => {
    const article: Article = await getArticleData(`${params.id}.md`);

    if (!article) {
        return notFound();
    }

    return (
        <main className="flex min-h-screen flex-col items-center justify-center p-24">
            <div className="max-w-none w-full lg:max-w-3xl">
                <div className="prose prose-lg" dangerouslySetInnerHTML={{__html: article.contentHtml}}/>
                <AISummary articleContent={article.contentHtml}/>
            </div>
        </main>
    );
}

export default ArticleDetail;

Here we will use our wonderful helper function from markdown.ts and display it. The AISummary button will also play a role there.

This is how our project came about. Let's try it. Let's start it with this command:

npm run dev

If we did everything right, the two articles will be visible in a list and if we click on them, the interface will appear where we can view the text of the article and generate the AI-generated hashtags by pressing the appropriate button.
For the Quantum computing article, we received the following, for example:

And all this locally? Cool, right? :)

It is important to note here that this model will not be able to give us detailed and accurate answers in many cases, and I have often experienced that it "gets stuck" during generation and the text generation does not continue. These will surely be improved in the future with the development of the model.

I hope this little article was useful for you. You can find the source code on Github. Also, if you have any questions, feel free to contact me on X.

Happy coding! :)

Let's make a custom, AI generated React component based on user data!

György Márk Varga — Wed, 26 Jun 2024 15:15:04 +0000

Imagine visiting a website where every page feels like it was designed just for you, where each piece of content speaks to your interests and preferences. In 2024, this dream is becoming a reality as we strive to offer users a unique, personalized experience. After all, who wouldn't love a digital space that seems to understand and cater to their individual tastes and needs?

What we are going to build?

We will create a web application in which a personalized installment payment calculator will appear after Github login, based on the Github bio of the person who has just logged in. The appearance of the card and the subject of the installment payment itself will be personalized. All this by using the Vercel AI SDK to stream the component from the server.

Let's take a look at what technologies we will use to implement this small example application:

So, as usual, we will use only the latest web technologies. During the implementation, we will carefully go through all the elements of the technology stack and look at exactly what we need and why we need it.

But before we dive into the implementation, let's take a look at what we're going to build.

Okay, so here you can see on the image, that this component probably get generated for a Github user who is interested in sustainable lifestyle (which we all must be interested in anyways).

Stay with me and let's see the steps of making this app. In the meantime, let's learn how to use the individual solutions, so that you can later integrate this functionality into your products.

The implementation

Let's get into it! First, let's create a Next.js application. Follow this with me:

npx create-next-app@latest

Leave the default settings, except for Eslint, because we will use something else instead. We will be using Biomejs instead of Tailwind and Prettier, even if the automatic Tailwind class sorting is not yet fully resolved.

So, my configuration for starting the project looks like this:

You might have spotted the project has a slightly familiar name. There's gonna be a few buzzwords you might recognize, please don't take these too seriously! Adding a buzzword like BNPL (Buy Now Pay Later) can be a fun touch, even though Apple has rolled out this service.

Let's open our project in our favorite IDE. Our first step will be to install Biome. But what is a Biome? Biome JS is used to optimize JavaScript and TypeScript code. Its functions include code formatting, linting, and speeding up development processes. It replaces both Eslint and Prettier for us, all faster. There is a very good picture that came across me on X last time:

That sums things up nicely I think. Let's install Biome in our editor. There is also a simple description HERE. The next step is to issue the following command on our project:

npm install --save-dev --save-exact @biomejs/biome

Then we continue by creating the config file:

npx @biomejs/biome init

This command creates a file for us in which we can make various configuration settings. We can leave it at the default settings, but I modified the formatting a bit:

{
  "$schema": "https://biomejs.dev/schemas/1.8.2/schema.json",
  "organizeImports": {
    "enabled": true
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true
    }
  },
  "formatter": {
    "indentStyle": "space",
    "indentWidth": 2
  }
}

After that, it is advisable to integrate in our IDE that a formatting is done for every save. HERE we can download the plugin that suits us, then we can set it up in our IDE so that formatting takes place on the fly. For example, in Webstorm the configuration looks like this:

If we got this far, it's great, we can already enjoy fast formatting with Biome, and for this we only had to drag in one dependency.

The next step will be to install Auth.js. Here too, we will have a fairly simple task, as the new Auth.js documentation is very handy. We will use this package to authenticate the user with their Github profile. Of course, other Oauth 2 providers could be used, but Github provides us with one of the simplest APIs out there and probably every one of use have a Github profile as developers. Our command is:

npm install next-auth@beta

And then this:

npx auth secret

This will be our secret code, which will be used by Auth.js. After issuing this command, we will receive the message that the secret is ready and copy it to our .env file, which of course we must create first. So .env:

AUTH_SECRET=<your_secret>

Then we proceed according to the official documentation. In the root of our project, we need to create an auth.ts file with the following content:

import NextAuth from "next-auth"
 export const { handlers, signIn, signOut, auth } = NextAuth({
  providers: [],
})

And then create this file in the specified location to be created:

./app/api/auth/[…nextauth]/route.ts

Fill it with this content:

import { handlers } from "@/auth" // Referring to the auth.ts we just created
export const { GET, POST } = handlers

Next, we set up Github as an OAuth provider so that the user can access our application with his or her account. As we have seen, the providers array is currently empty.
In order to be able to authenticate our user with Github Oauth, we need to make some settings within Github. To do this (if you are already logged in to Github) go to THIS link. Then click on New Oauth App. We are greeted by this screen, which we fill out as shown in the picture:

After clicking on the Register application, we can access the Client ID and generate the Client Secret. Let's do this and copy these into our .env file in the form below:

AUTH_GITHUB_ID=<your_client_id>
AUTH_GITHUB_SECRET=<your_client_secret>

Then, modify the auth.ts file to include the Github login integration:

import NextAuth from "next-auth"
import GitHub from "next-auth/providers/github"

export const { handlers, signIn, signOut, auth } = NextAuth({
  providers: [GitHub],
})

We've had it pretty simple so far, haven't we? Now let's implement this on the application interface as well. We will also need a Login button and an action behind the button, where the user authenticates with a button press. app/page.tsx will look like this:

import { signIn } from "@/auth";

export default async function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <div className="z-10 w-full max-w-5xl items-center justify-between text-sm lg:flex">
        <form
          action={async () => {
            "use server";
            await signIn();
          }}
        >
          <button type="submit">Sign in</button>
        </form>
      </div>
    </main>
  );
}

What is going on here? We simply create a form that, with the "use server" directive of Next.js, calls a login interface when the form is submitted, which is provided by Auth.js. Furthermore, it is advisable to remove the frills inserted by the Next.js basic template from globals.css, so that only these remain in that file:

@tailwind base;
@tailwind components;
@tailwind utilities;

After making these changes, start the application (if you haven't already done so) with the "dev" script in package.json. Our application is already running on http://localhost:3000 and we see a "Sign in" inscription (which is a button by the way). This is already very good progress. Modify page.tsx as follows:

import { auth, signIn } from "@/auth";

export default async function Home() {
  const session = await auth();

  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <div className="flex max-w-5xl items-center justify-center text-sm">
        {session ? (
          <p>User logged in</p>
        ) : (
          <form
            action={async () => {
              "use server";
              await signIn();
            }}
          >
            <button
              className="p-3 border rounded-md hover:bg-gray-50"
              type="submit"
            >
              Sign in
            </button>
          </form>
        )}
      </div>
    </main>
  );
}

Here, when the session becomes available from Auth.js, we write that the user is logged in, and if the user is not logged in, we display our login form.
Also, we added a bit of design to make our site look like something, but that's not the main focus here. Currently do not login, we will make some modification later with the auth flow.
So what will be the next step? Let's just remember what our goal is: An interface that uses AI to generate a dynamic installment calculator based on the currently logged in user's Github bio.
What else do we need for this?

We need to be able to request the bio of the currently logged-in user from Github.
We need a component that contains the slider itself, where the user can set how many months he or she wants to pay for the item to be purchased.
We'll need Vercel's AI SDK to stream the component.
We need the package called "ai", with which we can also generate text.
We need an OpenAI API key

Let's start from the end of the list. As usual, we need an API key, which we can generate HERE.
If you have it, put it in the .env file:

OPENAI_API_KEY=<your_api_key>

Now let's start installing the still necessary packages:

npm i ai

and

npm i @ai-sdk/openai

Next, let's create a small component that we will display until our customized component is displayed to the user. Let's create a folder in the root of our project called 'components' and in it create this file: InstallmentLoading.tsx

export const InstallmentLoading = () => (
  <div className="animate-pulse p-4">
    Getting your personalised installment offer...
  </div>
);

Then we need the component itself, which is basically this:

"use client";

import { type ChangeEvent, useState } from "react";

interface InstallmentProps {
  styles: any;
  productItem: { item: string; price: number; emoji: string };
}

export const Installment = (props: InstallmentProps) => {
  const [months, setMonths] = useState(1);

  const handleSliderChange = (event: ChangeEvent<HTMLInputElement>) => {
    setMonths(Number(event.target.value));
  };

  const monthlyPayment = (props.productItem.price / months).toFixed(2);

  return (
    <div
      className="p-6 bg-white shadow-md rounded-lg max-w-md mx-auto"
      style={props.styles}
    >
      <div className="flex mb-4 justify-center text-lg space-x-3">
        <span className="font-semibold">{props.productItem.item}</span>
        <span>{props.productItem.emoji}</span>
      </div>
      <div className="mb-4 text-lg">
        Toal Amount:{" "}
        <span className="font-semibold">${props.productItem.price}</span> USD
      </div>
      <div className="mb-4">
        <label htmlFor="months" className="block text-sm mb-2">
          Installment Duration (in months):{" "}
          <span className="font-semibold">{months}</span>
        </label>
        <input
          type="range"
          id="months"
          name="months"
          min="1"
          max="60"
          value={months}
          onChange={handleSliderChange}
          className="w-full"
        />
      </div>
      <div className="text-lg">
        Your monthly payment is:{" "}
        <span className="font-semibold">${monthlyPayment}</span> USD
      </div>
    </div>
  );
};

Here we can see that there are a lot of variables that we will have to replace. These will be the ones that the AI generates for us based on the user's Github bio.
And then comes the core part of things. Let's create an actions.tsx file in the app directory. This is where the server action comes in, which will generate our component for us on the server side using the Vercel AI SDK. This is what the file will look like:

"use server";

import { Installment } from "@/components/Installment";
import { InstallmentLoading } from "@/components/InstallmentLoading";
import { openai } from "@ai-sdk/openai";
import { generateText } from "ai";
import { streamUI } from "ai/rsc";
import { z } from "zod";

const getInstallmentCardStyle = async (bio: string) => {
  const { text } = await generateText({
    model: openai("gpt-4o"),
    prompt:
      `Generate the css for an installment offer component card that would appeal to a user based on this bio in his or her Github profile: ${bio}.
       Please do not write any comments just write me the pure CSS. Please post only the css key value pairs and make the design modern and elegant!
       Here is the component div that you should style.` +
      '<div style="here">You payment details</div>',
  });

  if (text) {
    const cssWithoutSelectors = text
      .replace(/div:hover \{([^}]*)\}/g, "$1")
      .replace(/div \{([^}]*)\}/g, "$1");
    return cssWithoutSelectors.trim();
  }

  return "";
};

const getProductSuggestion = async (bio: string) => {
  const { object } = await generateObject({
    model: openai("gpt-4o"),
    schema: z.object({
      product: z.object({
        item: z.string(),
        price: z.number(),
        emoji: z.string(),
      }),
    }),
    prompt: `Please write a piece of advice on what a user can buy on credit, whose Github bio is this ${bio}.
      Also write the expected price for the item and a suggested emoji.`,
  });

  return object.product;
};

const cssStringToObject = (cssString: string) => {
  const cssObject: { [key: string]: string } = {};
  const cssArray = cssString.split(";");

  cssArray.forEach((rule) => {
    const [property, value] = rule.split(":");
    if (property && value) {
      const formattedProperty = property
        .trim()
        .replace(/-./g, (c) => c.toUpperCase()[1]);
      cssObject[formattedProperty] = value.trim();
    }
  });

  return cssObject;
};

export async function streamComponent(bio: string) {
  const result = await streamUI({
    model: openai("gpt-4o"),
    prompt: "Get the loan offer for the user",
    tools: {
      getLoanOffer: {
        description: "Get a loan offer for the user",
        parameters: z.object({}),
        generate: async function* () {
          yield <InstallmentLoading />;
          const styleString = await getInstallmentCardStyle(bio);
          const style = cssStringToObject(styleString);
          const product = await getProductSuggestion(bio);
          return <Installment styles={style} productItem={product} />;
        },
      },
    },
  });

  return result.value;
}

The function names speak for themselves, but let's take a look at which one does what more precisely.

The function of getInstallmentCardStyle is to return the personalized design of the installment card that the user is likely to be interested in. Here we use generateText from the ai library provided by Vercel, which simply connects to the gtp-4o model, which returns the response based on the given prompt. Then we format the output a bit.

getProductSuggestion, also with a telling name, calls the AI SKD's generateObject function since here we need the recommended product with a predefined format.

Our next function is cssStringToObject, which is a helper function we use in the next streamComponent function. This properly formats the css string returned by OpenAI into an object that we can then use in the component.

And finally, the previously mentioned streamComponent. This function will be the part where we can stream the client component using the streamUI function of the Vercel AI SDK. You can see that within generate we put together the values needed to create our Installment component. We can also notice that one of the parameters of the streamComponent is the github bio. We have reached the point where we query the Github bio of the logged-in user and call this action with it.

So to make it all come together, let's go to the app/page.tsx file. Our goal here would be that if the user has already logged in, the user can see his personalized component. But how do we request the Github bio of the logged-in user? For this, we also need to study the Github API a bit. They have such an endpoint. With this, we can query the data of the currently logged-in user. This is exactly what we need. However, as we read the documentation, we can see that we also need an access token, which we attach to the API query. To do this, we need to slightly modify our auth.ts file, where after logging in, we need to put the access_token received during the github Oauth login into the session managed by Auth.js. Change the content of the auth.ts file to:

declare module "next-auth" {
  interface Session {
    accessToken?: string;
  }
}

import NextAuth from "next-auth";
import Github from "next-auth/providers/github"

export const { handlers, signIn, signOut, auth } = NextAuth({
    providers: [Github],
    callbacks: {
        async jwt({token, user, account}) {
            if (account) {
                token.accessToken = account.access_token;
            }
            return token;
        },
        async session({ session, token }) {
            session.accessToken = token.accessToken as string;
            return session;
        }
    }
});

It is important that we can save the accessToken in this file in our session so that we can call the Github api from our server component on the main page. So let's go back to app/page.tsx:

import { streamComponent } from "@/app/actions";
import { auth, signIn } from "@/auth";

export default async function Home() {
  const session = await auth();
  let accessToken;
  let responseJson;

  if (session) {
    accessToken = session.accessToken;

    const response = await fetch(`https://api.github.com/user`, {
      headers: {
        Authorization: `Bearer ${accessToken}`,
      },
    });

    responseJson = await response.json();
  }

  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <div className="flex max-w-5xl items-center justify-center text-sm">
        {session ? (
          <div>{await streamComponent(responseJson.bio)}</div>
        ) : (
          <form
            action={async () => {
              "use server";
              await signIn();
            }}
          >
            <button
              className="p-3 border rounded-md hover:bg-gray-50"
              type="submit"
            >
              Sign in
            </button>
          </form>
        )}
      </div>
    </main>
  );
}

Since we put the accessToken in the session, we can reach this here and call Github's API, from which we can extract the bio of the logged-in user and match it to our streamComponent function.

Testing the application

Now all that's left is to test the app we've created. Let's have a look! First of all, let's set up a good Github bio description. I also have a good "fake" idea. Last weekend, I watched (again) the Matrix trilogy and played a lot with my Meta Quest 3 VR headset, so the following description is self-explanatory:

Cool, right? Well, let's see what will be served to me on the main page depending on this!
On the http://localhost:3000 page, go to the "Sign in" button, then click the "Sign in with Github" button. After logging in, I can already see that I have received my Matrix themed component, which offers me a Meta Quest 2. After all, it's right, because I don't have Quest 2, only Quest 3. 😁

Real Matrix design! Well, it's not a look you'd expect from a modern component, but it fits right into the world of The Matrix, as their website looked similar in 1999.

Conclusion and source code

We have reached the point where I can share with you the code of the entire project, which you can find HERE on Github.
Of course, this can be further developed in many ways, let's look at a few options:
We can deploy it to Vercel!

Introduction of AI caching with Vercel KV
Creating several basic components for the AI to choose from
TailwindCSS - Shadcn/ui generation instead of vanilla CSS

and if you have any more ideas, write them in the comments or make a Github pull request! :)

If you have any questions, feel free to write a comment, e-mail me at gyurmatag@gmail.com or contact me on Twitter, I will be happy to help and answer!

Many thanks to Shiwaforce for their support and resources in the creation of this article.

Notion Like text editor with AI autocomplete and Neon database in Next.js using shadcn/ui

György Márk Varga — Mon, 05 Feb 2024 08:26:59 +0000

Nowadays, there are many text editors that can be integrated into React applications. We can easily get lost in them, the selection is so wide.

If we are looking for inspiration in web products, we can still browse through many options. Many of you here are probably familiar with Notion and its associated document editor, which is very easy and user-friendly to use. I think this is one of the best. It's not just me, many people see it this way, which is why there are quite a few downloadable and/or open source solutions available as npm packages, with which we can integrate a good text editor experience into our web application.

I could go out with two projects that I have already worked with. One is Novel and the other is Blocknote. Both are based on already existing open-source projects, none other than Tip-Tap and Prosemirror. However, they are much easier to use. How easily these can be used is also evident from the fact that, in the case of Blocknote, we can already snap them into our React application with these lines of code:



import { BlockNoteEditor } from "@blocknote/core";
import { BlockNoteView, useCreateBlockNote } from "@blocknote/react";
import "@blocknote/core/style.css";

export default function App() {
  // Creates a new editor instance.
  const editor = useCreateBlockNote();

  // Renders the editor instance using a React component.
  return <BlockNoteView editor={editor} theme={"light"} />;
}

What are we going to build?

Well, let's not run so far ahead. Let's see what we will create together in this article and what we will get to know along the way:
We are making an application where you can take notes and view them in a list and in details in read-only mode as you can see in the picture above. The editing interface is supplemented with a small AI autocomplete, which is integrated into Blocknote based on the open source Novel editor. Let's see which main technologies we will use for this:

Among other things, we will learn how to stream responses in the form of an edge function, which is available through the AI package provided by Vercel. We will also look at how and in what form we save a formatted document to a Postgres database (Neon), so it will be worth staying with me until the end of the article.

Implementation

Creating the project

Let's start the project and get to know the tools used in detail along the way.
We can create the project called 'note-blocks' by issuing the following command:

npx create-next-app@latest

We will work with the following configuration (everything remains at default):

Then, let's quickly "clean up" the lines of code left behind after creating the Next.js project. Let's start with globals.css. It's enough if we just leave this:



@tailwind base;
@tailwind components;
@tailwind utilities;

Creating pages

Then go to page.tsx inside the app directory. And there we can convert the entire file to this:



import Link from "next/link";

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
        <Link href="/new">
          New Note
        </Link>
      </div>
    </main>
  )
}

Don't apply any design yet, that moment will come later. First, let's create a Next page, where we will arrive when we click on the “New Note” link. We create a folder called "new" in the "app" directory, then inside it a page.tsx file with this content:



export default function Page() {
  return (
    <div>
      Editor
    </div>
  )
}

It's not too much, and it's not pretty, but we'll talk about it later. For the time being, the placeholder page will open if you click on the "New Note" link.

Adding and using the Blocknote editor

It follows that, similar to the method described at the beginning of the article, we drag the Blocknote editor onto this page. To do this, we need to install it in our application with npm install:
npm install @blocknote/core @blocknote/react

If this has run, then create a component called Editor.tsx in the "new" folder, which by definition will be a client-side component, since our editor interface cannot be operated on the server side, in this regard you can read the relevant part of Blocknote's documentation here.

We can also insert the following lines into the Editor component:



"use client";
import { BlockNoteEditor } from "@blocknote/core";
import { BlockNoteView, useCreateBlockNote } from "@blocknote/react";
import "@blocknote/core/style.css";

export default function Editor() {
  const editor = useCreateBlockNote();

  return <BlockNoteView editor={editor} />;
}

Make sure that there is "use client" at the top of the file, which indicates to Next.js that this is a client component.

And page.tsx is transformed as follows:



import dynamic from "next/dynamic";

const Editor = dynamic(() => import("./Editor"), { ssr: false });

export default function Page() {
  return (
    <div>
      <Editor />
    </div>
  )
}

Here we import our client-side Editor component in such a way that it is represented on the client side ('ssr: false'). So when we're done with that, we can already see our editor on the page. Let's play with it a bit, let's see what it can do.

After looking at it and testing it, we quickly realized that this editor is very good, but how are we going to do the rest of the application?
Let's move nicely in line. First, let's see how we can add AI autocomplete to our little editor, first of all, let's see how we can add a menu item to our text editor. This menu item appears when we press a "/" in our editor or click on the "+" sign at the beginning of the line. So we want our Toolbar to look like this:

Implementing the magic AI function

We need to modify the code in the Editor.tsx file for the desired behaviour:



"use client";
import { BlockNoteEditor } from "@blocknote/core";
import { BlockNoteView, getDefaultReactSlashMenuItems, ReactSlashMenuItem, useCreateBlockNote } from "@blocknote/react";
import "@blocknote/core/style.css";
import { ImMagicWand } from "react-icons/im";

const insertMagicAi = (editor: BlockNoteEditor) => {
  console.log('Magic AI insertion incoming!')
};

  const insertMagicItem = (editor: BlockNoteEditor) => ({
    title: 'Insert Magic Text',
    onItemClick: async () => {
      const prevText = editor._tiptapEditor.state.doc.textBetween(
          Math.max(0, editor._tiptapEditor.state.selection.from - 5000),
          editor._tiptapEditor.state.selection.from - 1,
          '\n'
      );
      insertMagicAi(editor);
    },
    aliases: ['autocomplete', 'ai'],
    group: 'AI',
    icon: <ImMagicWand size={18} />,
    subtext: 'Continue your note with AI-generated text',
  });

  const getCustomSlashMenuItems = (
      editor: BlockNoteEditor
  ): DefaultReactSuggestionItem[] => [
    ...getDefaultReactSlashMenuItems(editor),
    insertMagicItem(editor),
  ];

export default function Editor() {
  const editor: BlockNoteEditor | null = useCreateBlockNote();

  return <BlockNoteView editor={editor} theme={"light"} />;
}

What this code addition currently does is to add a new item to the "slashMenuItems" list, which will be responsible for the AI autocomplete operation. But how are we going to do this function? Of course, we call the OpenAI API. If you haven't registered here yet (which is quite unlikely in 2024), you can get your API key HERE, which will be necessary for us to further develop the function.

Let's get into it. First, we need an endpoint that can stream the response, which OpenAI gives us. Here, the part of the code that can be found in the Novel open source project will be perfect for us. Let's create an "api" folder inside the "app" directory and a "generate" folder inside that "api" folder, and then a route.ts file in it. This folder structure tells Next.js that this will be an api endpoint at this URI: /api/generate. The following content will be added to the "route.ts" file, don't be alarmed if the packages that we will use in it are not installed at first, we will explain them and install everything:




import OpenAI from 'openai';
import { OpenAIStream, StreamingTextResponse } from 'ai';
import { kv } from '@vercel/kv';
import { Ratelimit } from '@upstash/ratelimit';

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY || '',
});

export const runtime = 'edge';

export async function POST(req: Request): Promise<Response> {
  if (!process.env.OPENAI_API_KEY || process.env.OPENAI_API_KEY === '') {
    return new Response(
      'Missing OPENAI_API_KEY – make sure to add it to your .env file.',
      {
        status: 400,
      }
    );
  }
  if (
    process.env.NODE_ENV != 'development' &&
    process.env.KV_REST_API_URL &&
    process.env.KV_REST_API_TOKEN
  ) {
    const ip = req.headers.get('x-forwarded-for');
    const ratelimit = new Ratelimit({
      redis: kv,
      limiter: Ratelimit.slidingWindow(50, '1 d'),
    });

    const { success, limit, reset, remaining } = await ratelimit.limit(
      `noteblock_ratelimit_${ip}`
    );

    if (!success) {
      return new Response('You have reached your request limit for the day.', {
        status: 429,
        headers: {
          'X-RateLimit-Limit': limit.toString(),
          'X-RateLimit-Remaining': remaining.toString(),
          'X-RateLimit-Reset': reset.toString(),
        },
      });
    }
  }

  let { prompt } = await req.json();

  const response = await openai.chat.completions.create({
    model: 'gpt-3.5-turbo',
    messages: [
      {
        role: 'system',
        content:
          'You are an AI writing assistant that continues existing text based on context from prior text. ' +
          'Give more weight/priority to the later characters than the beginning ones. ' +
          'Limit your response to no more than 200 characters, but make sure to construct complete sentences.',
      },
      {
        role: 'user',
        content: prompt,
      },
    ],
    temperature: 0.7,
    top_p: 1,
    frequency_penalty: 0,
    presence_penalty: 0,
    stream: true,
    n: 1,
  });

  const stream = OpenAIStream(response);

  return new StreamingTextResponse(stream);
}

It is not as hard as it seems at first. First, let's look at the package imports one by one at the top. First, we import the OpenAi package, which we can load into our program like this:

npm install openai

This provides us with an API client interface.
The next line shows a mysterious package called "ai". Vercel provides this for us. It will help us properly stream our response from OpenAI to the endpoint caller. Let's install this:

npm install ai

Then, in the next two import lines, we will also import the serverless Redis component called KV from Vercel, and then also a rate limiter, which will be responsible for ensuring that endless requests do not arrive here. We also install these:



npm install @vercel/kv
npm install @upstash/ratelimit

Once we have this, we can see that we don't encounter any more errors in the code lines (hopefully) and we can see exactly what the "soul" of our application is doing:



const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY || '',
});

This section initializes the OpenAI object with the API key obtained from the environment variables process.env.OPENAI_API_KEY. You can also copy your own key from the OpenAI developer interface and insert it into the .env file created in the root directory of the application in the following format:
OPENAI_API_KEY=my_secret_key

Just in case this was missed, in the next line of code we check whether we have defined this key:



if (!process.env.OPENAI_API_KEY || process.env.OPENAI_API_KEY === '') {
  return new Response(...);
}

And the next part uses the users IP address to control the requests to prevent overuse if you have the right .env variables for the requests. We will create these .env variables later, don't worry about it for now.



 if (
    process.env.NODE_ENV != 'development' &&
    process.env.KV_REST_API_URL &&
    process.env.KV_REST_API_TOKEN
  ) {
const ip = req.headers.get('x-forwarded-for');
const { success, limit, reset, remaining } = await ratelimit.limit(
  `noteblock_ratelimit_${ip}`
);
}

This line reads the user-supplied prompt (initial text) from the request:



let { prompt } = await req.json();

We use the GPT-3.5-turbo model to generate the answers:



const response = await openai.chat.completions.create({...});

The response is sent back to the user as a stream (a continuous stream of data), which enables more efficient data transmission, especially for larger responses:



const stream = OpenAIStream(response);
return new StreamingTextResponse(stream);

Now that we have an overview of exactly what this API endpoint does, we can move on to the next part, which is actually putting this endpoint to use. We go back to our previously edited TextEditor.tsx file and insert this function above the insertMagic() function:



 const { complete } = useCompletion({
    id: 'hackathon_starter',
    api: '/api/generate',
    onResponse: (response) => {
      if (response.status === 429) {
        return;
      }
      if (response.body) {
        const reader = response.body.getReader();
        let decoder = new TextDecoder();
        reader.read().then(function processText({ done, value }) {
          if (done) {
            return;
          }
          let chunk = decoder.decode(value, { stream: true });
          editor?._tiptapEditor.commands.insertContent(chunk);
          reader.read().then(processText);
        });
      } else {
        console.error('Response body is null');
      }
    },
    onError: (e) => {
      console.error(e.message);
    },
  });

useCompletion() must be imported from the AI module provided by Vercel:



import { useCompletion } from "ai/react";

This utilizes a custom React hook, useCompletion, to handle API responses and errors. It makes an API call, handles rate-limiting responses (status 429), and processes the response stream. If the response contains data, it decodes and inserts this content into our text editor.

Once we have this, add the insertMagicAi() function as follows:



  const insertMagicAi = (editor: BlockNoteEditor) => {
    const prevText = editor._tiptapEditor.state.doc.textBetween(
        Math.max(0, editor._tiptapEditor.state.selection.from - 5000),
        editor._tiptapEditor.state.selection.from - 1,
        '\n'
    );
    complete(prevText);
  };

Here you can see that we call our previously written complete() and getting the previous text. We extract the last text context from our editor (5000 characters to be exact) and continue the AI-supported generation of the text based on that.

If we test the functionality on the interface now, we can already see (if we did everything right) that AI autocomplete works.

Using a database to store the notes

What if we could save this note in a database? Let's do it! We will use Neon and Prisma.
After registration at Neon, we can very easily create a free database for our application.

Once we have that, we can look at our database url, which we can copy one by one into our .env file.
However, Prisma itself is not installed yet. We can install it by issuing the following command standing on the root directory:



npm install prisma --save-dev

Then start the Prisma CLI:



npx prisma

After that, we initialize the files necessary for Prisma to work:



npx prisma init

We can see that a Prisma folder has been created in the root directory, which contains a schema.prisma file, the content of which can be replaced with this:



datasource db {
  provider     = "postgresql"
  url          = env("DATABASE_URL")
  relationMode = "prisma"
}

generator client {
  provider = "prisma-client-js"
}

In this file, we specify that we will use postgres and what our database access path will be. Our next task will be to create the schema, which describes how our database will look like. We stay in the same schema.prisma file and insert this model:



model Note {
  id        String   @id @default(cuid())
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
  document  Json?    @db.Json
}

This defines a schema, which is a note object. In our Notion-like editor, we will store the text in the document field, in Json form. Fortunately, Postgres already supports this.
To implement the changes, run this command, which will "push" our schema model into the Neon database:

npx prisma db push

We'd be fine with that. We've come a long way, let's see what's left to build the app:

We need to save the note to the database using a Save button, Server Action will come in handy here
We need to list our notes on the main page
In terms of appearance, we need to get our site in order - TailwindCSS and the Schadcn UI library will help us here

Let's create the save function first. For this, we need to be able to access the Prisma client from anywhere in the application. In the prisma folder where we also have the prisma.schema ts file, create a client.tsx file that will look like this:



import { PrismaClient } from '@prisma/client';
declare global {
  namespace NodeJS {
    interface Global {}
  }
}
interface CustomNodeJsGlobal extends NodeJS.Global {
  prisma: PrismaClient;
}
declare const global: CustomNodeJsGlobal;

const prisma = global.prisma || new PrismaClient();

if (process.env.NODE_ENV !== 'production') global.prisma = prisma;

export default prisma;

Adding the saving action

Next, create a file in the root folder called actions.ts. Our server action, which is responsible for saving the note, will be placed here.



'use server'
import prisma from "@/prisma/client";

type Note = {
  document: object
}
export async function createNote(note: Note) {
  return prisma.note.create({
    data: note,
  });
}

Let's integrate this aciton next to our Editor by connecting a Save button. This requires a button. How surprising, right? First, let's put a very simple, design-free, smooth, natural HTML button on the interface. We will do this in TextEditor.tsx. First, import our server action at the top of the file:



import { createNote } from "@/app/actions";

At the bottom of the code line, add the following:



 const handleSubmitNote = async () => {
    const note = {
      document: editor.document
    }
    await createNote(note)
  }
  return (
    <div>
      <BlockNoteView editor={editor} theme={"light"}/>
      <button onClick={() => handleSubmitNote()}>Submit</button>
    </div>
  );

In the handleSubmitNote() function, we call our server action, which allows us to save our given note. Let's test the function. After we hit "Submit" we don't see anything, since we haven't developed what happens after the Save. For now, to check our work, let's look into the database. We can do that by starting Prisma Studio, enter in the terminal that:


 prisma studio

A database viewing system is already opened on a port, in which the content of the table is entered when clicking on the appropriate model, and thus we can see (if we have done it well) that there will be a line containing our note.

Designing our application

We would be ready with the main functions of our application. In the following, let's make it all a bit more fancy.
For this - as I have already described - we will use TailwindCSS with ShadCN. Tailwind was already installed when the project was initialized, now ShadCN is coming. In the root of the project, we must issue the following command:


 shadcn-ui@latest init

We'll go through everything on the default, except for the theme, which can actually be anything you like.

We will definitely need a button from this component library. We can install it as follows:


 shadcn-ui@latest add button

Then on the "main page" we will be able to use it in app/page.tsx, which will look like this:



import Link from "next/link";
import { Button } from "@/components/ui/button"
export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <div className="z-10 max-w-5xl w-full font-mono text-sm lg:flex items-center justify-center">
        <Button>
          <Link href="/new">
            New Note
          </Link>
        </Button>
      </div>
    </main>
  )
}

You can see that we have slightly modified the Tailwind layout and added our UI component. However, we have included the Link component from Next due to optimized routing.
Then go to our Note editor interface and make the design changes there as well. We will modify the Editor, so go into that component (TextEditor.tsx) and modify the HTML part as follows:



   <div className="flex flex-col items-center min-h-screen px-4 w-full">
      <div className="w-full max-w-4xl mx-auto m-5">
        <BlockNoteView
            editor={editor}
            slashMenu={false}
        >
          <SuggestionMenuController
              triggerCharacter={'/'}
              getItems={async (query) =>
                  filterSuggestionItems(getCustomSlashMenuItems(editor), query)
              }
          />
        </BlockNoteView>
        <div className="flex justify-end">
            <Button
                className="mt-4 mr-4 px-4 py-2"
                onClick={() => handleSubmitNote()}
            >
                Submit
            </Button>
        </div>
      </div>
    </div>

... we are done with the appearance of the application and we are ready with the core functions, which you can see in the title. You will find this project in this Github repository, whose code you can use and use as inspiration for your own projects!

Ship it!

Now let's deploy our system. For this, nothing else will be needed except to have our code on Github and to have a Vercel account. After we have uploaded our project to Github (or it is enough if we have a fork of the Github project I shared), we can now deploy the project. On the Vercel dashboard, go to the Add New... button, select Project, then select note-blocks from our Github repos. Then this configuration screen greets us:

Thank God we don't have to do anything because it recognizes everything automatically. We only need to set the Environment variables. We simply copy these from our .env file.
If we are satisfied with this, we also press the deploy button. After that, the application is activated and our app becomes publicly available.

Let's build in public

Well, I missed a few more things, didn't I? We also talked about how it would be nice to have a list section where I can see what notes I have so far. I leave this function open for those of you who want to fork my Github project and do a PR with this function. This way you can also practice Next.js Server Actions and the operation of Server components!
What is also missing and will be necessary (especially in production) is the proper configuration of the rate limiter. To do this, all we need is to connect the @vercel/kv package to our project within the Vercel interface, the description of which can be found HERE. This will also be very easy to solve.

Let's connect

If you have any questions about the article or noticed any problems with it feel free to write them down in the comment section or reach ot to me on my X account. Happy coding! :)

Edge Functions require Edge Database solutions

György Márk Varga — Tue, 11 Jul 2023 11:23:14 +0000

Nowadays, users of web applications expect to reach the pages they want to visit as soon as possible, in a fraction of a second, even if that interface is not static content, but for example the result of some kind of database operation. For this, we need to use appropriate tools during development. In this article, we will learn about technologies with which we can create applications that meet the requirements described above and we're going to build an application that demonstrates this.

What are we going to build?

We are making a full stack web application, which will be a simple message board for a better understanding of the architecture, supported by Edge Functions and Edge Database, for the fastest possible operation.

But before we get into the middle of it, let's familiarize ourselves with the two building blocks of our small application (and the main topic of the article). Let me introduce you Edge Functions and the concept of Edge Database:

Edge functions

Edge Function solutions assure us that calculations can be placed as close to the users as possible. For instance, if a user from Germany wants to access our application, their request will not be routed to an American data center, but to a server park in Frankfurt, thereby significantly reducing data travel distance. This approach is similar to that of CDNs, but while CDNs focus on serving static data, edge functions handle dynamic data. Compared to serverless functions, the cold start phenomenon is not present here, and the distance between the data center and the end user is less, therefore it is more cost-efficient. However, this comes with a few drawbacks, for example, in the case of edge functions defined in Javascript, most Node.JS APIs are not supported, and our functions can be compressed to a maximum of 4MB (specifically in the Vercel environment).

Let's look at the simplified architecture of Edge functions:

The figure shows that even though the edge functions are geographically close to the user, if the database is in one region, the data has to travel a long way before it reaches the end user.
We need a solution for that.

Edge database

We rightly ask the question that it is great to bring computing as close as possible to the user, but what about those functions that also require database access? The server close to the user (where the function runs) will call into a database that is in a fixed geographic location. If the database is in America, and the user and computing are in Europe, then the data has to travel quite a long way unnecessarily. The user calls in to the server closest to him, and then that server makes a database request to another point on Earth. That's not very optimal, is it? This problem is solved by certain database solutions, which ensure that the replicas of the database are close to computing, always with fresh data.
Here we can use three different architecture:

Single-leader: Here, one main server receives information from clients, and other servers, or 'replicas', copy this data.

Multi-leader: In this setup, several servers receive information and act as models for the replicas.

No-leader: In this type, all servers can receive information and act as models for the replicas.

In this article we will use the Single-leader architecture, however with Turso we can hit any replica with a write request and it will proxy it to the primary DB.

Here is a figure, how edge functions look like with edge database solutions:

The implementation

Now that we understand the theoretical things, let's dive into the making of our little program and get to coding.
First of all, if you just want to get your hands on the source code, then I've got great news for you, the source code is available on Github. Also some of the code may not be included here in the article for the sake of simplicity, in that case you can refer to this repository.
We will use cutting-edge solutions in terms of frameworks and technologies. Let's see the stack:
Edge infrastructure: Vercel
Edge database solution: Turso
Database ORM: Drizzle
Full Stack Web Framework: Next.js
UI: TailwindCSS

As stated above, the app we will create will be a very simple message board, where after entering our name we can post a maximum of 255 characters (khmm...Twitter/Threads?), as well as display the posts written by others. This will perfectly illustrate how and with what efficiency our system works.
First, let's issue the command needed to build the Next.js application. Let's navigate to the folder where we want to put the application and type in our terminal:

npx create-next-app@latest

Next, name our application ("edge-post"), then proceed through the wizard with everything set to default.
Now that we have that, let's look at -and install into our program- the tools that are necessary to make our database and the compute server as close as possible to the user.

First, we need TursoDB! But what is it? TursoDB is a database solution based on the libSQL database, which is an open-contribution fork of SQLite. It was developed to minimize the response time of applications. This is particularly useful in cases where we use Edge functions (Vercel, Netlify, CloudFlare), which we discussed above. TursoDB also manages to return the data from the database replica that is physically closest to the edge function that calls it and thus to the user.

Unfortunately, we cannot use such a database solution using a graphical interface for the time being, we have to use the terminal on our machine. On MacOS and Linux environments, use Homebrew to issue the following command:

brew install chiselstrike/tap/turso

...or you can use scripted install as well:

curl -sSfL https://get.tur.so/install.sh | bash

If everything was OK, then we authenticate ourselves by issuing the following command:

turso auth signup

This command opens a browser window in which we can log in with Github. If everything went well, we can create our DB for our application.

Interestingly, we can list the regions that are supported:

turso db locations

Turso currently supports these locations:

The default location will be the one we are currently closest to.
So let's make our database:

turso db create edge-post-db

Once our database is ready, we can even make a replica of it right away (the free tier allows 3 databases in total). It recommended the Virginia data center in the USA to me, so I made another replica there, as well as one in Paris, because I know that this is also a Vercel Edge compute location:

turso db replicate edge-post-db cdg

And for the example of the figure at the beginning of the article, let's do one in Tokyo as well.

turso db replicate edge-post-db nrt

That would be it, the next step is to retrieve the data belonging to the database, including the connection URL, which we use to connect to the DB.

turso db edge-post-db

We can see the name, locations and URL of the database, which we need now. Copy the URL, then create an .env file in our project. Here it is:

DATABASE_URL=libsql://edge-post-db-[username].turso.io

The .env file is responsible for storing these kind of key value pairs. Make sure to not commit your database URLs and secret keys to a GIT repository.

However, this will not be enough to connect to the database. We also need an authentication token, which we can create and retrieve as follows:

turso db tokens create edge-post-db

Let's also put this in our .env file:

DATABASE_AUTH_TOKEN=<your auth token>

Super! We are ready to set up our database. - Also we can use a basic web UI at turso.tech after logging in, but for the bigger part of the set up we have to use the CLI. - We can start dealing with dependencies within the project. How will we communicate with the database? No, not with Prisma, because it only runs with a workaround within Edge functions. We will use DrizzleORM, whose landing page shows that its developers have a very good sense of humor, but is their Open Source project great as well? Let's find out! Standing on the project, we can issue the command:

npm install drizzle-orm @libsql/client
npm install -D drizzle-kit

This command installs the Drizzle ORM itself and the LibSQL client. Furthermore, in order to get the appropriate autocompletes and developer help in a local environment, we also install the Drizzle Kit.
The next step is to create the data schemas, the data models, which define what our database will look like.
It will look like this:

To define this, standing on the root of the project, create a folder and inside it a schema.ts file with this code:

import { sqliteTable, text, integer, uniqueIndex } from 'drizzle-orm/sqlite-core';

export const users = sqliteTable('users', {
        id: integer('id').primaryKey(),
        email: text('email').notNull(),
    }
);

export const posts = sqliteTable('posts', {
        id: integer('id').primaryKey(),
        text: text("text", { length: 256 }).notNull(),
        userId: integer('user_id').references(() => users.id),
    }
);

The schema speaks for itself. We will have a table in which we will store users and a table where the posts related to them will be stored. So far everything is fine, now we have to somehow get these -for now empty- tables to appear in our database. Create the drizzle.config.ts file standing on the root of the project. Here we will define, among other things, where our schema file is located and what the connection URL of our database is. Let's create it like this:

import { Config } from "drizzle-kit";

export default {
    schema: "./db/schema.ts",
    out: "./migrations",
    driver: "turso",
    dbCredentials: {
        url: process.env.DATABASE_URL,
       authToken: process.env.DATABASE_AUTH_TOKEN
    }
} satisfies Config;

Now, in the package.json file, under 'scripts', enter the commands for generating and pushing the schema:

"generate": "drizzle-kit generate:sqlite",
"push": "drizzle-kit push:sqlite"

We run them in this order and if we didn't get an error, we already have the tables in our database in the cloud. If we don't believe this, issue the command in our terminal that allows us to enter the database shell:

turso db shell edge-post-db

Then issue this command:

.schema

And we already see the two CREATE TABLE.
Our schema is up in the database, that's fine, but we need a link inside the Next.js application where we can reach it. Standing on the root, create a lib folder, and in it a file with the name turso.ts:

import { drizzle } from 'drizzle-orm/libsql';
import { createClient } from '@libsql/client';
const client = createClient({ url: process.env.DATABASE_URL, authToken: process.env.DATABASE_AUTH_TOKEN });
export const db = drizzle(client);

This will give us an exported copy of our database access that we can then use on the endpoints.

By the way if you want to manage your database data using a GUI, you are able to with Drizzle Studio. All you need to do is modify the 'target' in the tsconfig.json file to this:

"target": "esnext",

and launch this command on the root of the project:

npx drizzle-kit studio

Now you have a GUI of your Turso SQLite database.

So talking about endpoints... let's start working a little on the Next.js project itself, creating these endpoints within it too... We'll need two: a POST endpoint to create a post and a GET endpoint to query the posts. First, let's create the endpoint where we can create a post. Here we need to reach: /api/posts/add, so accordingly in the app directory we create a post and then an add folder in it and a route.ts file with the following content:

import { NextRequest, NextResponse } from 'next/server'
import { db } from "@/lib/turso";
import { posts, users } from "@/db/schema";

export async function POST(req: NextRequest) {
    const { name, text } = await req.json()

    const newUser = await db.insert(users).values({ name }).returning().get()
    const newPost = await db.insert(posts).values({ text, userId: newUser.id }).returning().get()

    return NextResponse.json(newPost)
}

Here, we create a new user and a post for each post. This can be solved better with authentication in the future, as long as there is no Drizzle - NextAuth integration, we won't go into it, and authentication is not the scope of this article anyway.
In the meantime, let's also develop the endpoint that is responsible for listing the posts in a scrollable way. This will be the same in the api/posts folder in a get folder in a route.ts file:

import { NextResponse } from 'next/server'
import { db } from "@/lib/turso";
import { posts } from "@/db/schema";

export async function GET(req) {
    const page = req.query?.page ? parseInt(req.query.page) : 1;
    const limit = req.query?.limit ? parseInt(req.query.limit) : 10;
    const offset = (page - 1) * limit;

    const fetchedPosts = await db.select().from(posts).limit(limit).offset(offset).all();
    return NextResponse.json(fetchedPosts)
}

After the implementation of the endpoints, the spectacular part of the application can come: the interface. For this, we will use TailwindCSS with noble simplicity.
Our app will simply consist of 3 self-explanatory components. This is how we create a folder called 'components', where we will have a PostForm.tsx component on the one hand:

"use client";

import { useRouter } from "next/navigation";
import { addPost } from "@/app/actions";

export default function PostForm() {
  const router = useRouter();

  const handleAddPost = async (formData: FormData) => {
    await addPost(formData);
    router.refresh();
  };

  return (
    <div className="mx-auto w-full max-w-xs md:max-w-md lg:max-w-lg">
      <form
        action={handleAddPost}
        className="mb-4 rounded-lg bg-white px-4 pb-8 pt-6 shadow-md"
      >
        <div className="mb-4">
          <label
            className="mb-2 block text-sm font-bold text-gray-700"
            htmlFor="name"
          >
            Name
          </label>
          <input
            className="focus:shadow-outline w-full appearance-none rounded-lg border px-3 py-2 leading-tight text-gray-700 shadow focus:outline-none"
            id="name"
            name="name"
            type="text"
            placeholder="Name"
            required
          />
        </div>
        <div className="mb-6">
          <label
            className="mb-2 block text-sm font-bold text-gray-700"
            htmlFor="message"
          >
            Your Post
          </label>
          <textarea
            className="focus:shadow-outline w-full appearance-none rounded-lg border px-3 py-2 leading-tight text-gray-700 shadow focus:outline-none"
            id="message"
            name="message"
            placeholder="What's happening?"
            required
          />
        </div>
        <div className="flex items-center justify-end">
          <button
            className="focus:shadow-outline rounded-lg bg-blue-500 px-4 py-2 font-bold text-white transition-colors duration-200 ease-in-out hover:bg-blue-700 focus:outline-none"
            type="submit"
          >
            Post
          </button>
        </div>
      </form>
    </div>
  );
}

Here we practically define a form that calls a Server Action for submit action. With the help of this component, we will be able to submit a post. For this (as described in the Next.js documentation) - since this is a client component - we also define server actions in a separate file in the app directory, which will be called actions.ts and will look like this:

"use server";

export async function addPost(formData: FormData) {
  const formDataObject = Object.fromEntries(formData.entries());

  await fetch(`${process.env.NEXT_PUBLIC_APP_URL}/api/posts/add`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      name: formDataObject.name,
      text: formDataObject.message,
    }),
  });
}

This piece of code speaks for itself, we call our endpoint with the appropriate parameter and values.
You can see that we use an .env variable called NEXT_PUBLIC_APP_URL. Let's update our .env file with it too. So for the default port, we can add this line to the file:

NEXT_PUBLIC_APP_URL=http://localhost:3000

Our next component is PostItem.tsx, which will represent a post card:

interface PostItemProps {
  authorName: string;
  postText: string;
}

export default function PostItem({ authorName, postText }: PostItemProps) {
  return (
    <div className="mx-auto mb-4 w-full max-w-xs rounded-lg bg-white px-4 py-6 shadow-md md:max-w-md lg:max-w-lg">
      <h2 className="mb-2 text-xl font-bold">{authorName}</h2>
      <p className="text-base text-gray-700">{postText}</p>
    </div>
  );
}

After that, the list in which we will display the posts can also come. PostList.tsx:

import PostItem from "./PostItem";
import { PostData } from "@/types/post";

interface PostListProps {
  postList: PostData[];
}

export default async function PostList({ postList }: PostListProps) {
  return (
    <div className="mx-auto w-full max-w-xs space-y-4 md:max-w-md lg:max-w-lg">
      {postList.map((postData, index) => (
        <PostItem
          key={index}
          authorName={postData.users.name}
          postText={postData.posts.text}
        />
      ))}
    </div>
  );
}

Due to the proper typification, we would need two types here, so let's create a types folder in the root of the project, with two files in it.
post.ts:

import { User } from "@/types/user";

type Post = {
  text: string;
};

export type PostData = {
  users: User;
  posts: Post;
};

user.ts:

export type User = {
  name: string;
};

We coordinate these components in the page.tsx file along with passing the appropriate props, and calling the get endpoint:

import PostForm from "@/app/components/PostForm";
import PostList from "@/app/components/PostList";

export const runtime = "edge";

const getPosts = async () => {
  const response = await fetch(
    `${process.env.NEXT_PUBLIC_APP_URL}/api/posts/get`
  );
  return response.json();
};

export default async function Home() {
  const postList = await getPosts();
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-4 md:p-24">
      <PostForm />
      <PostList postList={postList} />
    </main>
  );
}

Once we are done with these, start our application with the npm run dev command and we can see what we have created in a local environment.

In the end our project structure will look like this:

But how will this be deployed in an edge computing architecture? It will be very simple, let's see:

We upload our code to Github
We deploy the Github repo on Vercel and set the environment variables
READY!

If everything went well, the following will be displayed in the deployment summary:

So now our endpoints and React Server Components run on Vercel's Edge Network. Not only these, but our database itself will be served from the right place, avoiding unnecessary round-trips.

Verdict

There you have it, a fully functional Edge Function-Edge Database application!

You can see that the paging is not implemented in the UI only in the API. Here is a challenge for you to implement this and make a pull request to the main repo.

Feel free to drop feedback in the comments section! If you get stuck or have questions please also use the comments section or reach out to me on Twitter.