DEV Community: Gorchene Bader

DeepSeek Harness x Ox Alpha easy setup (Use it while it is free)

Gorchene Bader — Wed, 26 Aug 2026 09:40:50 +0000

Note

This is a quick and simple setup for using the Ox Alpha model through OpenRouter in DSH (DeepSeek Harness).

At the time of writing, the Ox Alpha multimodal LLM is available for free on OpenRouter, so it’s a good opportunity to try it out while free usage is still available.

If you're not familiar with Ox Alpha or DSH, I recommend taking a quick look at their official websites first:

DeepSeek Harness

Ox Alpha

Installing DeepSeek Harness

You can install and start DeepSeek Harness with the following command:

npx @deepseek-ai/dsh web

Once it starts, you should see something similar to this:

dsh web: http://127.0.0.1:3080
dsh web: opening the default browser; pass --no-open to disable

Your browser should open automatically. If it doesn't, simply open:

http://127.0.0.1:3080

You should then see the DSH interface:

DeepSeek Harness Web Interface

The next step is to create a folder wherever you want and set it as your workspace.

Select your DeepSeek workspace

Adding Ox Alpha as a custom model in DSH

First, create an account on OpenRouter if you don't already have one, then generate an API key.

Creating an API key in OpenRouter

Once you've copied your API key, go back to the DSH interface and open Settings.

From there:

Open the Models tab.
Click Add provider.
Expand Customized settings.
Click Add model.

You should now see two fields: Model ID and Display Name.

Fill them in as follows:

Model ID: stealth/ox-alpha
Display Name: Ox Alpha

Then click Apply.

That's it. Go back to the main interface and select the newly added Ox Alpha model:

Happy Hacking!

And you're ready to go — start experimenting with Ox Alpha in DSH! 🚀

Beyond Vibe Coding: A Quick Field Guide to Agentic Engineering

Gorchene Bader — Tue, 25 Aug 2026 19:36:20 +0000

In early 2025, Andrej Karpathy introduced "Vibe Coding"—building software by describing ideas in natural language and letting AI generate the code.

It worked brilliantly for MVPs and weekend hackathons. But once projects scale, developers hit a wall: the 200-prompt spiral, where fixing one bug breaks three more because no one truly owns or understands the architecture.

The industry has moved forward: Vibe coding is the ignition, but Agentic Engineering is the vehicle.

What is Agentic Engineering?

Agentic Engineering is the practice of systematically architecting, scoping, and directing AI agents to build reliable software—treating AI as a disciplined development tool rather than a slot machine.

Dimension	Vibe Coding	Agentic Engineering
Role	Prompter: Reacts backward to whatever the AI spits out.	Director: Defines clear architecture before generating code.
Prompting	Monolithic: Dumps an entire app spec into one prompt.	Decomposed: Builds one small, verifiable step at a time.
Verification	Passive: Manual visual inspection after 10+ changes.	Active: Strict types, automated tests, and TDD feedback loops.
Code Quality	Spaghetti: Fragmented files and tangled dependencies.	Deep Modules: Clean, robust logic hidden behind simple APIs.

The Vibe Coder: "Build me an analytics dashboard."
The Agentic Engineer: "Build a dashboard fetching /api/metrics, showing 3 KPI cards, polling every 30s, with a skeleton loader."

1. The Right Tool for the Job

All-in-One Builders (Base44, Lovable, Bolt.new): Rapid 0-to-1 prototyping with built-in auth, database, and hosting.
AI Code Editors (Cursor, Windsurf): Line-by-line surgical precision inside your local IDE.
Autonomous Agents (Claude Code, Codex): Terminal-level power for multi-file refactoring, planning, and shell tasks.

Pro Workflow: Scaffold the initial MVP in an All-in-One builder, sync via GitHub, and handle complex logic or deep refactoring locally with Cursor or Claude Code.

2. Four Rules to Direct AI Effectively

Define the Outcome First: Summarize the exact user value and technical scope in two sentences before prompting.
One Job per Prompt: Build modularly (Auth $\rightarrow$ Schema $\rightarrow$ UI $\rightarrow$ API Binding).
Verify Every Step: Never prompt step two until step one compiles and passes tests.
Use "Expected vs. Happened" for Bug Fixes: > "What I expected: A responsive top navbar with sans-serif font. > What happened: You updated the hero section banner instead. > Action: Revert the hero change and apply styles strictly to <Navbar />."

3. Engineering Fundamentals That Save Your Codebase

The "Grill Me" Prompt: Force the AI to interview you relentlessly about edge cases and dependencies before generating code.
Ubiquitous Language File: Maintain a ubiquitous-language.md in your repo with domain terms, entities, and business rules to keep AI context sharp and eliminate hallucinated jargon.
Deep Modules: Avoid dozens of tiny, shallow files. Wrap complex internal logic behind a simple, well-typed interface.
Test-Driven Feedback (TDD): The rate of feedback is your speed limit. Use TypeScript and write tests first so the agent catches mistakes instantly.

The Grand Mental Model

The AI Agent is your Tactical Sergeant: Lightning-fast at writing boilerplate, tests, and isolated functions.
You are the Strategic General: Setting boundaries, designing API interfaces, and keeping software entropy under control.

AI doesn't make classical software engineering obsolete—it makes fundamentals your biggest superpower.

Deploy Open Source SLMs (Small Language Models) locally - DeepSeek R1 Distilled .

Gorchene Bader — Sun, 09 Feb 2025 13:25:51 +0000

Building Free AI Agents: Setting Up Ollama for AI Models

This post is part of a series where we break down each step in creating fully free AI agents capable of handling various tasks.

While this may be a common topic, this tutorial will guide you through each step to develop a more comprehensive solution.

For this task, we have two main options:

Using Hugging Face libraries – powerful but requires more setup.
Leveraging Ollama – a more streamlined, user-friendly alternative.

To keep things simple and efficient, we’ll focus on Ollama, which offers an easier setup for running AI models.

Step 1: Download and Install Ollama

To get started, we need to install Ollama on our system.

Visit the Ollama Download Page.
Select your operating system (Windows, macOS, or Linux).
Click Download (for Windows and macOS) or copy the installation command (for Linux users).

Since I’m using Linux, I installed Ollama by running this command in my terminal:

curl -fsSL https://ollama.com/install.sh | sh

Step 2: Explore and Download AI Models

Once Ollama is installed, we need to fetch a model to use.

Browse the available models on the Ollama Models Page.
Search for a specific model or scroll through the list of available options.
Once you find a model you like, grab the command to download and run it.

For this tutorial, I’ll be using deepseek-r1:1.5b, a lightweight SLM (Small Language Model) capable of Chain of Thought (CoT) reasoning.

To download and run it, simply enter the following command in your terminal:

ollama run deepseek-r1:1.5b

Step 3: Running the Model for Text Generation

Now that our model is up and running, we can start using it for text generation. Simply enter some input, and let the AI do the rest!

What’s Next?

Thank you for following along! If you have any feedback, feel free to share it.

In the next post, we’ll take this further by integrating the model into a Python application, showcasing how to make this SLM truly useful. Stay tuned! 🚀

Deploy Yolov8 model locally using FastAPI x ReactJS 🐍⚡

Gorchene Bader — Wed, 04 Sep 2024 17:44:36 +0000

Hello, data science enthusiasts! In this tutorial, we'll walk through the process of deploying a YOLOv8 object detection model using FastAPI for the backend microservice and ReactJS for the frontend interface.

First, make sure you have Python installed on your system. Then, let's create our project directory:

mkdir Yolov8_Fast_React
cd Yolov8_Fast_React

Next, we'll set up a Python virtual environment to keep our dependencies isolated:

python -m venv env
source env/bin/activate

With the virtual environment activated, we can now proceed to install the necessary dependencies. We'll use FastAPI for the backend and React for the frontend:

pip install fastapi uvicorn ultralytics opencv-python-headless numpy

Now that we have the required tools, let's start building the backend API using FastAPI:

touch main.py

In the main.py file, we'll define the API endpoints and handle the object detection logic:

from fastapi import FastAPI, File, UploadFile
import cv2
import numpy as np
from ultralytics import YOLO
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()
model = YOLO("yolov8n.pt")

allowed_origins = [
    "http://localhost",
    "http://localhost:3000",
]

app.add_middleware(
    CORSMiddleware,
    allow_origins=allowed_origins,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

@app.post("/detect/")
async def detect_objects(file: UploadFile):
    # Process the uploaded image for object detection
    image_bytes = await file.read()
    image = np.frombuffer(image_bytes, dtype=np.uint8)
    image = cv2.imdecode(image, cv2.IMREAD_COLOR)

    # Perform object detection with YOLOv8
    results = model.predict(image)

    # Process the detection results and return a response
    detections = []
    for result in results[0].boxes:
        x1, y1, x2, y2 = result.xyxy[0]
        confidence = result.conf[0]
        class_id = result.cls[0]
        detections.append({
            "x1": float(x1),
            "y1": float(y1),
            "x2": float(x2),
            "y2": float(y2),
            "confidence": float(confidence),
            "class_id": int(class_id)
        })
        print(detections)

    return {"detections": detections}

Next, let's create the frontend using React:

npx create-react-app frontend
cd frontend
npm start

In the React app, we'll create a simple interface to upload an image and display the detected objects:

import React, { useState } from 'react';
import axios from 'axios';

function App() {
  const [image, setImage] = useState(null);
  const [detections, setDetections] = useState([]);

  const handleImageUpload = async (event) => {
    const file = event.target.files[0];
    setImage(file);

    const formData = new FormData();
    formData.append('file', file);

    const response = await axios.post('/detect', formData);
    setDetections(response.data.objects);
  };

  return (
    <div>
      <input type="file" onChange={handleImageUpload} />
      {image && (
        <div>
          <img src={URL.createObjectURL(image)} alt="Uploaded" />
          {detections.map((detection, index) => (
            <div key={index}>
              Object at {detection[0]}, {detection[1]}, {detection[2]}, {detection[3]}
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

export default App;

Finally, to run the full application, start the FastAPI backend and the React frontend in separate terminals:

# Backend
uvicorn main:app --reload

# Frontend
cd frontend
npm start

The application should now be accessible at http://localhost:3000, allowing you to upload images and view the detected objects using the YOLOv8 model.

Use TailwindCSS with Next.JS & TypeScript

Gorchene Bader — Thu, 17 Nov 2022 10:01:15 +0000

Next.JS has been one of the most powerful and popular fullStack web frameworks which is based on ReactJS, combined with TailwindCSS and TypeScript it gives us a better and a faster way for building fast and modern web applications, and in this post we will learn how to create your project using these technologies.

First way is to install it all when creating project using "npx" :

npx create-next-app -e with-tailwindcss --ts

you type "y" for yes and it will demand the name of your project like this:

after naming your project and everything is downloaded you're left with a basic Next.JS x TailwindCSS x TypeScript Project.

Second case is that you have an existing Next.JS project and you want to add TypeScript and/or TailwindCSS to it:

2.1. For TypeScript you need to create tsconfig.json you can do that by the usual way or by typing this in the command line of your choice in your project directory :

if you're using git Bash (which i recommend) or linux terminal you can use:

touch tsconfig.json

-if you're using CMD for Windows or Powershell then you can use:

type [<drive>:][<path>] tsconfig.json

echo [content] > [<path>\tsconfig.json]

and then execute this command:

npm install --save typescript @types/node @types/react

2.2. For TailwindCSS you just need to run few commands and modify a couple of files:

first thing you need to do is to run the following commands:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

-then in the tailwind.config.js you copy this lines:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    './app/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

and also for the file "styles\globals.css" you add on top these three imports:

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

And the last thing you wanna do is to import golbals.css in your main project folder pages_app.tsx or (app\layout.tsx in Next.JS 13):

import '../styles/globals.css'

And that's it now after migrating you're project from js to ts you're good to go..