DEV Community: Phú

I Used Gemma 4 as a Local Coding Agent With OpenCode. Here’s What Happened

Phú — Wed, 13 May 2026 14:18:31 +0000

This is a submission for the Gemma 4 Challenge: Write About Gemma 4

Introduction

Cloud coding assistants are useful. I use them to explain unfamiliar code, generate tests, review changes, and sometimes help me debug weird problems faster than I could alone. But I have always had one question: What if I can use coding assistants locally? Is it possible?

That question led me to try a setup with latest open weight model of Google which is Gemma 4. This is my setup:

Gemma 4 26B A4B MXFP4 of Unsloth as the model
OpenCode as the coding agent
My own codebase as the test environment

The goal was simple: I wanted to see whether Gemma 4 could behave like a useful local coding agent inside my real development workflow. Not a benchmark. Not a perfect lab test. Just a practical experiment: give the model real coding tasks, let it inspect files, ask it to make changes, and see what actually happens.

What is OpenCode?

OpenCode is an open-source AI coding agent. It can connect to many different model providers, and its model documentation says it supports local models as well.

That made it a good fit for this experiment.

I was not looking for simple autocomplete. I wanted to test agent-style behavior:

Can it inspect my project?
Can it find the right files?
Can it implement new feature?
Can it understand a bug?
Can it suggest a safe fix?
Can it review a diff before I commit?

For me, that is the difference between a chatbot and a coding agent.

A chatbot answers questions.

A coding agent works inside the codebase.

Why I chose Gemma 4

Gemma 4 was interesting for this experiment because Google describes the family as supporting reasoning, multimodal input, larger context windows, enhanced coding capability, and agentic workflows. Google’s Gemma 4 documentation lists four model sizes: E2B, E4B, 31B, and 26B A4B. It also says the small models support a 128K context window, while the medium models support 256K.

That matters for coding.

A coding assistant needs more than short answers. It needs enough context to understand files, dependencies, naming conventions, and the relationship between different parts of a project.

Google DeepMind also describes the 26B and 31B Gemma 4 models as aimed at advanced reasoning for IDEs, coding assistants, and agentic workflows.

So Gemma 4 felt like the right model family to test with OpenCode.

My configuration

I use llama.cpp with KV Cache is 8bit. I try with maximum context window of this model. This is my configuration:

./build/bin/llama-server \
    -m /home/Downloads/gemma-4-26B-A4B-it-MXFP4_MOE.gguf \
    -ngl all \
    -c 262144 \
    -fa on \
    -ctk q8_0 \
    -ctv q8_0 \
    --host 127.0.0.1 \
    --port 8080

In my opencode configuration, I setup it like this

{
  "$schema": "https://opencode.ai/config.json",
  "provider": {
    "llama.cpp": {
        "npm": "@ai-sdk/openai-compatible",
        "name": "llama-server (local)",
        "options": {
          "baseURL": "http://127.0.0.1:8080/v1"
        },
        "models": {
          "gemma-4-26B-A4B-it-MXFP4_MOE": {
            "name": "Gemma 4 26B A4B MXFP4"
        }
      }
    }
  }
}

Then now, I run command to create Laravel project with React to try to test.

laravel new gemma4

After run this command, choose React as stack. Do not need to use built authentication.

Can it inspect my project?

I check it with this prompt Explain to me tech stack of this project., see how it will answer.

Thinking: The user wants to know the tech stack of the current project. I should start by exploring the codebase to identify the main technologies used. I'll look for key files like composer.json, package.json, vite.config.js, etc.
⚙ laravel-boost_application-info 
Thinking: The laravel-boost_application-info tool provided a comprehensive list of the tech stack.
Summary:
- Backend: PHP 8.5, Laravel 13.8.0
- Frontend: React 19.2.6, Inertia.js 3.1.0 (inertiajs/inertia-laravel and @inertiajs/react)
- Styling: Tailwind CSS 4.3.0
- Database: SQLite
- Testing: Pest 4.7.0, PHPUnit 12.5.24
- Build Tools/Environment: Vite, Laravel Sail 1.58.0, Laravel Pint 1.29.1 (formatting), ESLint 9.39.4, Prettier 3.8.3
- Other Laravel Ecosystem: Laravel Wayfinder, Laravel Boost, Laravel Prompts, Laravel MCP, Laravel Pail
I can now answer the user's request.
This project uses the following tech stack:
*   Backend: PHP 8.5 with Laravel 13.8.0
*   Frontend: React 19.2.6 and Inertia.js 3.1.0
*   Styling: Tailwind CSS 4.3.0
*   Database: SQLite
*   Testing: Pest 4.7.0 and PHPUnit 12.5.24
*   Tooling: Vite, Laravel Sail, Laravel Pint (formatting), ESLint, and Prettier

It is correct. Now, try to ask more detail Where can I add my controller?

Thinking: The user wants to know where to add a controller in this Laravel project.
I should look for the standard Laravel directory structure to confirm where controllers are typically placed.
Standard Laravel controllers are located in app/Http/Controllers.
I will use ls or glob to check the existence of this directory.
✱ Glob "app/Http/Controllers/**/*" (1 match)
You can add your controllers in app/Http/Controllers.

and Where can I add my test?.

Thinking: The user is asking where they can add their tests.
I should look for existing tests in the project to identify the testing directory and pattern.
I'll start by using glob to find directories that look like test directories (e.g., tests/).
✱ Glob "tests/**/*" (4 matches)
Thinking: The user wants to know where to add tests.
The glob results show:
- tests/TestCase.php
- tests/Feature/ExampleTest.php
- tests/Pest.php
- tests/Unit/ExampleTest.php
This indicates that tests are located in the tests/ directory, specifically divided into tests/Feature and tests/Unit.
The project uses Pest, as indicated by tests/Pest.php and the pestphp/pest package in the application info.
I will inform the user that they can add tests in the tests/ directory, specifically in tests/Feature for feature tests and tests/Unit for unit tests.
You can add your tests in the tests/ directory, specifically in:
*   tests/Feature for feature tests.
*   tests/Unit for unit tests.

Pretty nice. Now ask what does this project current have. My question is What is this project about? Explain in detail..

Thinking: The user wants a detailed explanation of what the project is about.
I need to explore the codebase to understand its purpose.
I'll start by listing the files in the root directory and looking at README.md if it exists.
# List files in the root directory
$ ls -F
AGENTS.md
CLAUDE.md
app/
artisan*
boost.json
bootstrap/
composer.json
composer.lock
config/
database/
eslint.config.js
node_modules/
opencode.json
package-lock.json
package.json
phpunit.xml
pint.json
pnpm-workspace.yaml
public/
resources/
routes/
storage/
tests/
tsconfig.json
vendor/
vite.config.ts
Click to collapse
Thinking: There's no README.md. I'll check CLAUDE.md and AGENTS.md as they might contain information about the project. I'll also look at composer.json to see the package dependencies and potentially a description.
→ Read CLAUDE.md 
Thinking: CLAUDE.md seems to be a set of guidelines for the assistant (me) rather than a description of the project's business logic. It contains rules for using the Laravel ecosystem tools.
I'll check AGENTS.md.
→ Read AGENTS.md 
Thinking: Both CLAUDE.md and AGENTS.md are just the Laravel Boost guidelines. They don't describe the project's actual functionality.
I'll look at the routes/web.php and routes/api.php to see what endpoints exist, and then inspect the controllers and models to understand the business logic.
→ Read routes/web.php 
Thinking: The routes/web.php only has a single route pointing to a welcome Inertia page. This suggests the project might be a very minimal boilerplate or a template.
Let's check resources/js/pages/ to see what the welcome component looks like.
✱ Glob "resources/js/pages/**/*" (1 match)
Thinking: Okay, let's read resources/js/pages/welcome.tsx.
→ Read resources/js/pages/welcome.tsx 
Thinking: The welcome.tsx is just the standard Laravel welcome page.
This project appears to be a fresh installation of Laravel with Inertia and React, likely used as a development environment or a template for building applications. There is no specific business logic currently implemented.
I'll summarize based on the tech stack I found earlier and the fact that it's a minimal/boilerplate setup.
Based on the current codebase, this project appears to be a minimal boilerplate or template for a web application. It does not yet contain specific business logic or a defined purpose beyond being a starting point.
It is configured with a modern, full-stack architecture:
*   Backend Framework: Laravel 13 (PHP 8.5)
*   Frontend Framework: React 19 with Inertia.js 3 (providing a Single Page Application experience)
*   Styling: Tailwind CSS 4
*   Database: SQLite
*   Testing Suite: Pest 4 and PHPUnit 12
The current application only contains a standard "Welcome" page, which serves as a placeholder for developers to begin building their own features.

In response, you can see that it list correct file. Read content of welcome page, then answer correctly. So for me, it is good for understand my project.

Plan and implementation

I will try to implement fitness project. I will need landing page with contact us form. Sign in and sign up page for my customer and dashboard for them. I will ask it to plan first to see how it does.
This is my prompt:

Implement fitness project. I need a landing page to introduce about fitness, have contact us form page for user to send question. Sign in and sign up page. When login successfully, user can see their dashboard.

Since output is too long now, so I only put a final result here. This is what it plan for me:

I have analyzed your requirements and the project environment. Based on your request, I have developed a comprehensive implementation plan.
Proposed Implementation Plan
Phase 1: Authentication Setup
I recommend installing Laravel Breeze (Inertia/React stack). This is the industry standard for Laravel applications and will automatically provide secure, pre-built:
- Sign-in and Sign-up pages.
- Password reset functionality.
- Session management and protected routes.
- A functional Dashboard page.
Phase 2: Core Features
1.  Landing Page: A visually appealing introduction to your fitness project using Tailwind CSS.
2.  Contact Us Page:
    - A dedicated ContactMessage model and database table to store inquiries.
    - A ContactController to handle form submissions.
    - A React-based form page with validation.
3.  Dashboard: A personalized area for logged-in users to view their fitness-related information.
Phase 3: UI/UX & Refinement
- Theme: Implement a cohesive fitness-themed design using Tailwind CSS.
- Layouts: Create shared layouts for the Landing page (public) and the Dashboard (authenticated).
- Components: Build reusable UI elements like buttons, inputs, and navigation bars.
---
Clarifying Questions
Before I begin, please clarify the following:
1.  Authentication: Are you okay with me using Laravel Breeze to set up the authentication system? It is the fastest and most secure method.
2.  Dashboard Content: Do you have specific fitness data you'd like displayed on the dashboard (e.g., step counter, calorie tracker, workout logs), or should I use placeholder data for now?
3.  Contact Form: Should contact messages simply be saved to the database, or would you like them to be emailed to an administrator as well?
Once you confirm these details, I will start the implementation.

As usual, I ask it to put this into plan.md. Just an old day habit, I put into plan.md then I start new session to implement. With this way, I avoid to pollute context window of implementation. Now, I ask it to implement phase by phase. Implement phase 1 in plan.md, Implement phase 2 in plan.md and so on.

Now I have sign in and sign up page. Note that UI is actually from Breeze package. So mainly in this phase, it install and configure Breeze package correctly. Now move to implement landing page and dashboard.

Unfortunately, it finish to implement landing page, but when go to localhost:8000 which is domain of my app, it still show welcome page of laravel. I see that error is because of mismatch Pages to pages. However, I want to let it check and see if it can figure out this issue or not. I use playwright mcp and ask it to visit localhost:8000 to check and report to me. My prompt Even after finish to implement @resources/js/pages/Welcome.tsx , in localhost:8000 shows nothing. Use playwright to check that and let me know what is an issue.. And wow, it actually can figure out. This is its response.

The issue is a mismatch between where your new component is located and where the Inertia resolver is looking for it.
The resources/js/app.jsx file is configured to resolve components from resources/js/Pages/ with a .jsx extension:
    resolve: (name) =>
        resolvePageComponent(
            `./Pages/${name}.jsx`,
            import.meta.glob('./Pages/**/*.jsx'),
        ),
However, your new implementation is located at resources/js/pages/Welcome.tsx (lowercase pages and .tsx extension). As a result, Inertia is still loading the old component at resources/js/Pages/Welcome.jsx.
To fix this, you can either:
1. Move and rename your file to resources/js/Pages/Welcome.tsx (and update the resolver in app.jsx to support .tsx).
2. Update resources/js/app.jsx to support the pages directory and .tsx extensions.

Then I ask it to fix this issue. This is response after it fixes.

I have fixed the issue by:
1. Moving Welcome.tsx, Dashboard.tsx, and Contact.tsx from resources/js/pages/ to the standard resources/js/Pages/ directory and renaming them to .tsx.
2. Removing the old .jsx versions of these components.
3. Updating resources/js/app.jsx with a flexible resolver that supports both .jsx and .tsx extensions.
The application now correctly renders the new components at localhost:8000.

But well, style is not good. Seems like it miss style.

No worries, ask it to check and fix again. Yay, it figured out.

Now, it looks beautiful.

Actually, I expect it show contact us form there as well. But when click to a button, it redirects to another page. However, it is ok. Then I test contact us form. At least it works. However, it does not show any notification to let user know that they send successfully.

And now, I move on to check dashboard in login page. I run command to seed user. Then I login. And wow, it is nice. This is awesome I can say.

In conclusion, if want to understand codebase, find and fix bug, this model is great. However, for implementation, it is a little bit inconsistent for UI and have many bugs to fix after finish.

Test

Now I want to try to let it test page. Do manual testing with playwright and report to me. See if it test properly or not. I expect it test landing page, responsive. Test contact us form works or not. Then login, sign up and dashboard. This is my prompt go to localhost:8000 with playwright. Test and report to me which feature work and which one is not. Check credential of user in seed and use that to login to test dashboard.. In the meantime, I take some coffee :D. This is result.

I have completed the testing. Here is the report:
Credentials used (from DatabaseSeeder.php):
- Email: test@example.com
- Password: password
Test Results:
- Login: ✅ Works (successfully logged in with seed credentials).
- Dashboard: ✅ Works (all metrics and recent workouts loaded correctly).
- Profile: ✅ Works (profile information and password update sections are accessible).
- Contact Us: ✅ Works (form loads and submits without errors).

It did not test landing page at all. So I need to ask it to check. Simple prompt Test landing page and responsive. Result is good. Then I am confident about my application after testing.

I have tested the landing page responsiveness:
Landing Page Test Results:
- Desktop View: ✅ Works (all headings, paragraphs, and links are present).
- Mobile View (375x667): ✅ Works (content structure is preserved).
- Tablet View (768x1024): ✅ Works (content structure is preserved).
- Responsiveness: ✅ Responsive (the page layout and elements adapt correctly to different viewport sizes without errors).

Now I will commit this changes. Another simple prompts "commit all changes". Since I have not init git before. So it only show commit "init". I think I have another chance to challenge it. So I will ask it that if no changes relate to plan.md. Put that to first commit call "init". Then check all changes and commit second time. Let's see how it goes. My prompt check changes, if changes not in @plan.md , add that with commit "init". Then check all changes left, generate commit message and then commit it. This is a result I get:
Laravel Breeze, Contact Us feature, and Dashboard. Not very detail but it is ok.

Bonus

After test it with understand project, implement new feature, testing and commit. It is good for around 30B model. I am quite interested about understanding project, codebase and testing. So I want to do further testing with random open source repo. I choose rtk repo here RTK AI. So I clone that to my local. Then I ask it a question Check this repo and explain to me how does it work. It respond to me.

RTK (Rust Token Killer) is a high-performance CLI proxy designed to minimize the number of tokens an LLM (like Claude Code, GitHub Copilot, or Cursor) has to consume when running shell commands.
How It Works
RTK operates using three main mechanisms:
1.  Explicit Command Modules:
    RTK has built-in, highly optimized filters for common commands (e.g., git, cargo, npm, pytest, docker). When you run rtk git status, instead of getting the full raw output, you get a condensed, token-optimized version that retains only the essential information.
2.  Automatic Command Rewriting (Hooks):
    The most powerful feature is its integration with AI agents. When you run rtk init -g, it installs a "hook" into your AI tool (like Claude Code). This hook intercepts Bash commands before they are executed in the shell and transparently rewrites them.
    *   User runs: git status
    *   Hook intercepts and rewrites to: rtk git status
    *   Result: The AI receives the compact output without you ever having to manually type rtk.
3.  TOML-based Fallback Filters:
    For commands that RTK doesn't have a built-in module for, it uses a fallback system. If a command is intercepted but not recognized, RTK looks for a matching configuration in a local .rtk.toml file. This allows you to define custom regex-based filtering, grouping, and truncation rules for any tool.
Core Strategies for Token Savings
To reduce token counts by 60-90%, RTK applies four strategies to command outputs:
*   Smart Filtering: Removes "noise" like boilerplate text, comments, and excessive whitespace.
*   Grouping: Aggregates similar items (e.g., grouping multiple file errors by their error type or directory).
*   Truncation: Keeps the most relevant context (like the last few lines of a long log) while cutting redundant data.
*   Deduplication: Collapses repeated log lines into a single line with a count (e.g., [error] ... (x42)).
Key Commands
*   rtk init: Sets up integration for your specific AI agent.
*   rtk gain: Displays your token savings statistics and history.
*   rtk proxy <cmd>: Runs a command exactly as-is but still tracks the usage metrics.
*   rtk read <file>: A smart file reader that can provide "aggressive" summaries (signatures only) to save tokens.

At this stage, I understand a big picture how RTK can save token and it is written in Rust. But I still not have a clear understand how exactly does it help to save token. Then I want to add it to give me detail example so I can understand clearer.

Give me detail example of output so I understand why rtk save tokens.

rtk saves tokens by removing "noise" (boilerplate, repetitive logs, large context) while preserving the "signal" (actual changes, error messages, or structure) that an LLM needs to solve a task.
Here are detailed examples of how different strategies transform output:
1. Smart Filtering (Noise Removal)
Goal: Remove directory metadata and repetitive paths in file listings.
*   Raw ls -la (~800 tokens):
        drwxr-xr-x  15 user staff 480 Jan 15 10:00 my-project/
    -rw-r--r--   1 user staff 1234 Jan 15 10:00 src/main.rs
    -rw-r--r--   1 user staff 567 Jan 15 10:00 src/lib.rs
    -rw-r--r--   1 user staff 234 Jan 15 10:00 src/utils.rs
    ... (40 more lines of metadata and files) ...
    *   rtk ls (~150 tokens):
        my-project/
    +-- src/ (8 files)
    |   +-- main.rs
    |   +-- lib.rs
    |   +-- utils.rs
    +-- Cargo.toml
    +-- README.md

---
2. Aggressive Signature Extraction
Goal: When reading large files, show only the "skeleton" (function signatures) instead of the full implementation.
*   Raw cat main.rs (~2,000 tokens for 200 lines):
        fn main() -> Result<()> {
        let config = Config::load()?;
        let data = process_data(&config);
        for item in data {
            println!("{}", item);
        }
        Ok(())
    }
    // ... 190 lines of complex logic ...
    *   rtk read main.rs -l aggressive (~500 tokens):
        fn main() -> Result<()> { ... }
    fn process_data(input: &str) -> Vec<u8> { ... }
    struct Config { ... }
    impl Config { fn load() -> Result<Self> { ... } }

---
3. Deduplication & Grouping
Goal: Merge thousands of lines of repetitive logs or error reports into a single summary line.
*   Raw cargo test (~5,000 tokens on failure):
        running 15 tests
    test utils::test_parse ... ok
    test utils::test_format ... ok
    test utils::test_edge_case ... FAILED
    thread 'utils::test_edge_case' panicked at 'assertion failed: left == right'
      at src/utils.rs:45:10
    ... (huge backtrace, environment info, and repetitive output) ...
    *   rtk cargo test (~150 tokens):
        FAILED: 2/15 tests
    test_edge_case: assertion failed
    test_overflow: panic at utils.rs:18

---
4. Truncation (Context Condensing)
Goal: Simplify diff outputs by removing git headers and focusing only on changed lines.
*   Raw git diff (~1,000 tokens):
        diff --git a/src/main.rs b/src/main.rs
    index abc123..def456 100644
    --- a/src/main.rs
    +++ b/src/main.rs
    @@ -10,6 +10,8 @@
     fn main() {
    +    let config = Config::load()?;
    +    config.validate()?;
         println!("Starting...");
    -    let x = 42;
    *   rtk git diff (~50 tokens):
        src/main.rs (+5/-2)
    +  let config = Config::load()?;
    +  config.validate()?;
    -  let x = 42;

Nice, now I understand how does it work. I can start to tweak that for my need, start to contribute if I want. Honestly speaking, it will save you a lot of money for spending to read project.

Conclusion

After this experiment, my answer is: yes, Gemma 4 can be a useful local coding agent with OpenCode — but it works best when I treat it as a coding partner, not as a fully autonomous developer.

The strongest part of Gemma 4 was codebase understanding. It correctly inspected my Laravel + React project, identified the stack, found where controllers and tests should live, and explained that the project was still a fresh boilerplate. That is already very useful. When I tried it on the RTK open source repository, it also gave me a clear high-level explanation of how the project works and then followed up with practical examples. For learning a new codebase, this is where Gemma 4 impressed me the most.

For implementation, the result was more mixed. It successfully planned and built a fitness application with authentication, a landing page, contact form, and dashboard. It also installed and configured Laravel Breeze correctly. However, the first implementation was not perfect. There were issues with file naming, Inertia page resolution, styling, and missing user feedback after submitting the contact form. The good part is that when I asked Gemma 4 to debug those problems, it was able to inspect the project, understand the issue, and fix it.

Testing was also useful, but not perfect. It could use Playwright to test login, dashboard, profile, and contact form flows. However, it missed the landing page until I explicitly asked it to test that page and responsiveness. This taught me an important lesson: local coding agents can test applications, but the quality of the result depends a lot on how specific the prompt is.

My biggest takeaway is this:

Gemma 4 + OpenCode is very good at understanding, investigating, explaining, and fixing code. It is also capable of implementing real features, but the output still needs human review, UI polish, and follow-up debugging.

This experiment changed how I think about local AI coding. Before trying it, I thought local models were mainly interesting for privacy. After using Gemma 4 with OpenCode, I think local models are also interesting for developer productivity.

A local coding agent does not need to replace cloud tools completely to be valuable. Even if it only helps me understand a codebase, debug an issue, test a page, or prepare a first implementation draft, that already saves time.

So my final verdict is simple:

Gemma 4 did not replace me as a developer. But with OpenCode, it became a practical local coding assistant that can understand projects, implement features, debug issues, test pages, and explain unfamiliar repositories. It still needs guidance, but for an open model running locally, the result is impressive.

Hermes agent: Connect to Discord

Phú — Tue, 12 May 2026 00:13:44 +0000

Introduction

In last post, we already find out how to setup and connect Hermes Agent to Telegram. Today, we find out how to connect that to discord.

Flow

First of all, you need to create bot in Discord. After that, you setup gateway to use this Discord bot. Then you start gateway. After that, you can chat with your agent through Discord.

Create Discord Bot

Go to this Discord developer portal with your account. Then go to applications on the left menu side bar.

Then type your bot name. Click agree then click "Create" button.

After that, you see it like this

Then go to Bot item on the left. It has section call "Reset Token", click to this button to get Reset Token. Then you go to hermes, run command hermes gateway setup, then choose Discord. Next, it will ask for bot token, paste your Reset Token in here. Then go back to Discord Portal, we continue to setup bot. In left menu, choose OAuth2, scroll to bottom. Find and check Bot checkbox. Then it will show another section name "Bot Permissions", choose permission you want your bot to have. In here, I choose Send Message for Text Permission.Then choose copy Generated URL, then open new tab and paste it to url.

Click continue. Then go back to hermes to finish setup gateway. It show you like this

Then you choose what you need. In this case, I just let it Enable open access. Then we can start to talk with agent on this channel. This is an example.

Playaround with Agent

Generate Image

Since I use Minimax model so it can generate image as well. I ask it to create minimax gen image skill, then ask it to use that image to gen image for me. Quite nice. I notice that, even I do not ask it to create generate image skill, it will auto create if I ask it to generate image use Minimax. After many try, it start to automatically create skill for this repeated tasks. That's why it call that it is an agent that grow with you. Another part that it has memory so it can remember what you say.

Generate Music

Another case that I want to generate music, then I ask my agent to do that. Just simple prompt like this.

In the end, it can figure out and produce me this one. Quite chill.

Speak

Another use case is that, I ask my agent and it answer me by using TTS. So instead of show me text, it generate that to audio and play that to answer. So I do not to read, only need to hear. To have this, you only need to choose TTS. In Discord, use this command /voice in channel you want it to answer you with audio. Then choose tts option.

In my case, I choose to use Minimax TTS since I have subscription of it. However, I want to do this in another level that I can go to voice, then I can talk to it in realtime.

First of all, you need to go back to OAuth2. Then check these item in Bot Permissions. Then copy Generated URL and paste to new tab again. Choose your channel so bot can join that channel. Next, you join to voice channel on the left, in this case, I join general channel.

After you join, in channel, you type voice. Then choose channel and type your Voice channel name. Bot will join your voice channel. And now you can start to talk with it. This is my demo. It is super slow. However, at least, now I can talk to my bot directly. If change to use another TTS like like Elevenlabs, surely it will be much faster and more natural. However, to really answer in realtime, we need to have streaming which Hermes agent does not have currently. Maybe, I will try to implement that someday and show you. I already can do that with GPT realtime voice 2.0. However, to make it work in Hermes agent, need to have extra step.

Conclusion

That's all for today. Hope you guys enjoy this article. Any question, please comment below. See you next time.

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 Connect Hermes Agent to Discord, I will show you how to connect to Discord. 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!