DEV Community: Phú

Hermes agent: Introduction

Phú — Sun, 26 Apr 2026 02:37:22 +0000

Concept

"Hermes Agent" is an open-source AI agent developed by Nous Research. It is described as an agent that runs continuously on your server, has long-term memory, can learn over time, connects to many chat platforms/tools, and supports browser automation. The project is released under the MIT license.

Typically, this AI agent is meant to work as a real assistant. It can do more than just answer messages or connect to third-party services for information. It can manage your machine and even help deploy a web app, for example. It also has long-term memory to remember your habits and notes. In parallel, it can self-learn:

If you repeat the same kind of task, it can proactively create a reusable skill so you do not need to manually re-derive the same steps every time.
This reduces token usage for similar or repetitive work.
It supports multiple gateways to mobile-friendly chat apps like Telegram and Discord, so you can operate your AI agent and machine from your phone.

Installation

Run:

curl -fsSL https://raw.githubusercontent.com/NousResearch/hermes-agent/main/scripts/install.sh | bash

Then refresh your terminal:

source ~/.bashrc    # reload shell (or: source ~/.zshrc)

Now, hermes command is available in your terminal. Next, you need to run hermes setup to setup LLM for your hermes. You can choose quick setup or full setup up to you. In here, I choose quick setup to setup LLM only.

I am using Minimax global, so I choose this option.

Then it asks me to pass my api key:

After that, you need to choose model.

After that, it asks to setup messaging platform or not. In this case, we skip this step. I will guide you to setup gateway later in this post.

Then test with hermes. If you see the expected prompt, the agent is installed successfully.

Try asking what it is.

SOUL.md

When using AI, we usually define a system prompt so the model knows who it is and what it should do. This helps it stay focused on a specific type of work. For example, without a system prompt, if you ask for a simple "Hello World" program, the model may choose a language it is most familiar with. If you want it to always respond in a specific language, it may not comply consistently.

A system prompt is a way to standardize this behavior across sessions. If you want it to act as a PHP expert, you can include:

You are an expert in PHP

Then every prompt will be interpreted in that context, and the model will try to answer with PHP-oriented decisions and knowledge.

In Hermes Agent, there is SOUL.md, which plays a role similar to a system prompt. To optimize usage, set up SOUL.md for the agent. By default it is located at:

~/.hermes/SOUL.md

I changed it to:

After that, asking in that session, it now behaves as a PHP expert.

Session

At this point, I asked myself: why make it this complex? If I keep one session and ask questions from start to finish, it remembers previous context. Why bother with system prompts? Also, nobody has time to create a new session all the time.

That can work initially: if you define the role in the first prompt, by prompt 100 it may still remember. But over time, behavior can degrade. When you cover too many topics in one long session, the model may become confused.

Example: you work in workspace1, ask it to save output to result, then later switch to workspace2. If you later ask again to save to result, it may default to workspace2/result because it inferred the active context changed. If you use two separate sessions, session 1 for workspace1 and session 2 for workspace2, the same command will correctly map to each workspace.

When working longer, the model also has a finite context window:

That status bar shows the model is minimax 2.7 highspeed with a context window of 204.8k. Every user prompt and model reply consumes part of that budget. The post shows one question-and-answer pair consuming about 11.7k tokens.

As history grows beyond the window limit, the model compresses previous context. For example, when at around 200k tokens it may summarize context down to about 10k tokens. You can then continue with the summary, but the compressed memory loses detail. Some earlier details may no longer be present.

That is why it is useful to keep a system prompt and open a fresh session for different tasks. You can start a new session using:

/new

Prompt

This is the prompt area used to communicate with the AI. This is where you issue commands or requests.

In this example I asked it to summarize a YouTube video. Hermes Agent shows each step it performs, such as invoking a skill and opening the browser.

And this is the result:

Gateway

If you want to use your AI agent through chat apps (for example Telegram or Discord), either for team use or for personal use, set up a gateway.

I used Telegram as an example. First, use Telegram BotFather to create a bot. It gives you:

a bot access handle (to open your bot)
the bot token

To configure:

hermes gateway setup

Then choose the Telegram gateway, paste the bot token into bot token, and set allow user id using @userinfobot.

If your team should all be able to chat with the bot, enable open access. If you want manual approval first, use Use DM pairing.

In this step, you can choose open access to allow any user in this channel can chat with hermes agent. Otherwise, you choose pairing dm. This one, you can approve which message bot will answer, which one it will not answer.

For gateway mode:

Option 1: manual mode. You run hermes gateway start each time.
Option 2: service mode. The gateway runs automatically as a background service.

Test it by running the same brief video task, this time via Telegram.

Result:

Conclusion

That’s a brief first look. The next post can cover more topics in depth. If you need help, leave a comment.

Nextjs: Introduction

Phú — Thu, 02 Feb 2023 01:41:03 +0000

What is Nextjs?

Acorrding to the official documentation, Next.js is a flexible React framework that gives you building blocks to create fast web applications.

Why Nextjs?

Difference rendering techniques

Server Side Rendering is technique when you want to get new data from server, client will pass necessary params to server and get the whole html from server. With this approach, our app is not reactive. When you search something, filter something, click something, it will reload the whole html. It is not very friendly when you have a lot of data and user need to spend time to look at blank screen while your site is loading data. But it is good for SEO cause it always return html and google bot know what is your site about.

Client Side Rendering is technique when you pass params to server from client, you will get data in json format from server. For that reason, you will save your bandwidth, your page will load faster and it will be more reactive. Nowadays, good frameworks like React, Vue, Angular do these things really well. It also handle or at least, give you a tool or a clear guide transpile to work with old browser, bundling, minifying, splitting. It will make your app faster and more compatible. However, big disadvantage in this approach is that it is hard to SEO. Why? When you load a page, in React case, you only have an html element with id is root, after that React will handle to render the rest. And google bot just see the html element before React render the rest so it only see your page have an html element with id is root. For that reason, it have no idea what is your site about and lower your page rank.

Static Site Generation is technique to generate html file in build time. For example, you finish to implement your about page, you build your project, it will generate html file of about page and store in your project. So when user want to view your about page, the site will return that file instead of calling data from server. Then, it will much faster. It is very good if you don't have many changes for your page. Like about page, login page, landing page,... you won't often change or don't often have a new data so these pages is good to use SSG.

Usually, you don't have all these technique in your application cause no framework support all these rendering technique yet until Nextjs. Before Nextjs, if you want SSR, you may go with pure PHP, Laravel + Blade or Symfony + Twig. If you want CSR, definitely go with React, Vue or Angular and SSG will a place where you want to use gatsby. In Nextjs, you can choose the rendering technique you want. Thus, you can have page A with SSR, page B with CSR, page C with SSG. How cool is that?

Performance

To boost your site faster, you need to care about many things like code splitting, minifying files, image optimaztion, the way to get assets and many more. Thankfully, with Nextjs, you don't need to care much about this. If you use correct component which are provide by Nextjs, it will do all the heavy job for you. Small example is that when you have an image on your site, you need to take care very 2 basic things. First of all, you need to have difference size of that image for difference viewport. Secondly, you want your page only load that image when user near to it, so you will have very long page and of course, you don't want to load image at the end of that page where user don't see it when the page is loaded. When user scroll down near to the end, that image will be load. Therefore, to solve these two problems, you need add srcset and apply lazy load to your image. With simple component Image, it handle these two things automatically.

Routing

In Nextjs, it route base on file. In my opinion, it is more friendly for routing base on file. In case I want to find component for route /posts/, I can easily know that I need to go to index file in posts folder. No need to go to see which component is used for that route.

SEO

Nextjs provide a Head component. With this component, you can always add description, title, meta tag on header in Nextjs. For that reason, it will be better for SEO.

Conclusion

That's is a short introduction to nextjs. In recap, it provides us many ways to render page, help we improve performance, routing base on file, provide us a way to SEO and much more.

Multiple authentication in Laravel 9

Phú — Mon, 16 Jan 2023 01:46:52 +0000

Problem

In a basic web app, we usually have two parts, app and cms. App is for user to use and cms for staff to manage content in that system. So to design this web app, we need to have a role. User with role admin can access cms site and user without role admin cannot access cms. But what if you want to use 2 difference models for security, for performance? How can we authenticate with 2 difference models?

Introduce app

This is a web app have two parts, app and CMS. Model Staff can only access CMS part and model User can only access app part. Since Laravel have default guard authentication for User model, we will discuss more about Staff model

Configure guard

First of all, you need to add new guard to existing guard in config/auth.php.

   'guards' => [
        ...
        'staff' => [
            'driver' => 'session',
            'provider' => 'staffs',
        ],
    ],

In this configuration, I add new guard name staff, this guard use driver is session and provider name staffs. Currently, we do not have any provider name staffs, so let's define it.

    'providers' => [
        ...
        'staffs' => [
            'driver' => 'eloquent',
            'model' => App\Models\Staff::class,
        ],
    ],

With this definition, we define provider name staffs using driver eloquent and model we want to use is App\Models\Staff. Last but not least, we need to configure password part so we can reset password with Staff model.

    'passwords' => [
        ...
        'staffs' => [
            'provider' => 'staffs',
            'table' => 'staff_password_resets',
            'expire' => 60,
            'throttle' => 60,
        ],
    ],

This is quite simple. We use provider name staffs, table is staff_password_resets, expire and throttle is 60 minutes. Since we use staff_password_resets to reset password then remember to migrate it.

Ensure

After configuration, we need to ensure these things:

Migrate table for reset password It will look like this one:

public function up()
    {
        Schema::create('staff_password_resets', function (Blueprint $table) {
            $table->string('email')->index();
            $table->string('token');
            $table->timestamp('created_at')->nullable();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('staff_password_resets');
    }

Have Staff model

<?php

namespace App\Models;

// use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;
use Laravel\Sanctum\HasApiTokens;

class Staff extends Authenticatable
{
    use HasApiTo   'guards' => [
        ...
        'staff' => [
            'driver' => 'session',
            'provider' => 'staffs',
        ],
    ],kens, HasFactory, Notifiable;

    /**
     * The attributes that are mass assignable.
     *
     * @var array<int, string>
     */
    protected $fillable = [
        'name',
        'email',
        'password',
    ];

    /**
     * The attributes that should be hidden for serialization.
     *
     * @var array<int, string>
     */
    protected $hidden = [
        'password',
        'remember_token',
    ];

    /**
     * The attributes that should be cast.
     *
     * @var array<string, string>
     */
    protected $casts = [
        'email_verified_at' => 'datetime',
    ];
}

Have data in table

Use new guard

Let's try out new guard. In login logic, you will have code like this:
Auth::attempt($this->only('email', 'password'), $this->boolean('remember'))
This one will not work because it will use default guard which is user guard. If we want to use new guard, we need to explicitly use it. Change it to this:
Auth::guard('staff)->attempt($this->only('email', 'password'), $this->boolean('remember'))
So this one tell Laravel to use guard name staff instead of default. Try to login and check the session, you will see that we login successfully and have a session. However, we cannot go to page which ask for authentication. Why? Cause in these pages, we still not use new guard yet. This is my route:

Route::get('/dashboard', function () {
    return view('dashboard');
})->middleware(['auth', 'verified'])->name('dashboard');

Take a look at middleware(['auth', 'verified']). It will go to auth and verified middlewar before run callback in Route::get. Verified middleware simply check verified_at colume in table is null or not and auth middleware check that user is authenticated or not. Cause we just use auth middleware then again, it use default guard which is user guard. We need to tell it to use staff guard by passing parameter to middleware. Change it to this one:

Route::get('/dashboard', function () {
    return view('dashboard');
})->middleware(['auth:staff', 'verified'])->name('dashboard');

As you can see, we change to use auth middleware with staff guard instead of user guard. Then try to login again and you can access /dashboard route:

Perfection. You rock.

Testing

Lastly, we need to test to make sure that user in User table cannot use their data to login to /dashboard. This is user in User table:

Try to login using this credential:

Failed. Great, this is what we expect, it cannot find any records cause when using staff guard, it just only take a look in Staff table. That's why, it did not found any records. That's all. Thanks for reading.

VIM: Introduction

Phú — Sat, 16 Jul 2022 16:02:36 +0000

Video for this tutorial here:

https://youtu.be/BNx7tgDdTi0

What is VIM?

First of all, let’s talk about vi (pronouce vee-eye). Vi editor is a super popular editor in linux because it help you to increase your productivity by just using your keyboard. For that reason, you don’t need to use mouse when you want to move around in your file, you want to copy paste character or word, etc.

That’s it for vi and VIM is VI iMproved. So VIM is an improvement version of vi.

Open VIM

So how can we enter the VIM world. Firstly, you need to have VIM in your computer. If you do not have VIM, then go to install it first. For Ubuntu, you can run this command:

sudo apt install vim

In Arch based distro:

sudo pacman -S vim

After you have vim in your computer then open your terminal and type vim . The screen you are seeing is VIM welcome screen. It will explain to you what is VIM, version of VIM, VIM’s author, license and some helpful command, especially quit command. Why we need to pay attention to quit command? Because some people use VIM for many years just because they have no idea how to quit VIM. Don’t be that guy.

Quit VIM

As I say, quit VIM is a very important thing. Thus, to quit VIM, type ESC , after that type :q! . It means quit VIM without saving anything. Another way, you can type ZZ and you can quit VIM, too.

Write something, save and quit

Now, open VIM again by typing vim . Type i , you will see INSERT message on the bottom left of your screen. In this mode, you can type anything you want. So let’s type some code: <?php echo 'Hello World'; . Save it by type ESC and type :w filename , it means save this file whose name is filename . In this case, I want it to be index.php then I will type :w index.php and type :q to exit. Next, check files, you will see your new file name index.php . Let’s run it if you have PHP in your computer, if not then skip it php index.php . Hooray, you can open VIM, type something and save it.

Small tip and trick

I have a quicker way to name your file. When you open vim, you can type your filename after vim command. For example, vim filename , it means you start to write on file whose name is filename. Then when you want to save it, you just need to run command :w . In addition, if you want to save and quit, you can type :wq , it means write this file and quit.

Conclusion

In this article, we learnt how to open, write, save and quit VIM. See you next time. Until that, I hope you happy with VIM. See ya!