DEV Community: Yuval

I Made My Claude AI Agents Invent Their Own Language. It Cut Token Costs by 63%.

Yuval — Fri, 06 Feb 2026 09:11:53 +0000

The Moment I Realized Agents Are Terrible at Talking to Each Other

I was running a team of 4 AI agents on a real project — a TikTok-style kids video platform built with Next.js and Fastify. One agent rewrites the scroll system, one audits for bugs, one fixes them, one polishes the UI.

They were crushing it. 24 bugs found, 16 fixed, a full component rewrite — all in ~8 minutes.

But when I looked at the inter-agent messages, I saw this:

"Hi team! I've finished working on the VideoFeed component. I removed all the console.log statements (there were 12 of them) and changed the animation from translateY to CSS scroll-snap. Everything compiles cleanly now. Let me know if you need anything else!"

~40 tokens. For a status update. Multiply that by hundreds of messages across 4 agents, and you're burning tokens on "Hi team!" and "Let me know if you need anything!" — words that add zero value to an AI-to-AI conversation.

So I asked: what if agents spoke their own language?

Meet AgentSpeak: A Protocol Agents Actually Want to Use

The same message in AgentSpeak:

delta VF ~translateY->scroll-snap -12log. tsc clean.

~15 tokens. Same information. No filler.

Here's how it breaks down:

Token	Meaning
`delta`	Status: Done
`VF`	File: VideoFeed.tsx
`~translateY->scroll-snap`	Changed: old method to new
`-12log`	Removed 12 console.logs
`tsc clean.`	TypeScript compiler passes

The Building Blocks

Status codes use Greek letters — short, distinctive, no ambiguity:

Code	Meaning	When
`alpha`	Starting	Agent picks up a task
`beta`	Working	Progress update, no blockers
`gamma`	Blocked	Waiting on another agent
`delta`	Done	Task complete
`epsilon`	Bug	Reporting an issue
`omega`	Shutdown	Wrapping up

Actions are single characters:

Symbol	Meaning	Example
`+`	Added	`+adminOnly middleware`
`-`	Removed	`-12 console.logs`
`~`	Changed	`~SHA256->bcrypt`
`!`	Broken	`!auth bypass L140`
`?`	Need	`? coder: VF status`
`->`	Becomes	`~translateY->scroll-snap`

File shortcodes eliminate long paths:

VF = VideoFeed.tsx      VS = VideoSlide.tsx
AC = api-client.ts      GC = globals.css
CF = config/index.ts    RT = routes file

Real-World: A 4-Agent Sprint

Here's how the protocol played out in a real session. Five agents (lead + 4 teammates) working on a Next.js + Fastify codebase simultaneously.

The Flow

Lead ──> Coder:     "Rewrite VF scroll-snap"
Lead ──> QA:        "Audit codebase"
Lead ──> Bugfix:    "Fix imports, types, cleanup"
Lead ──> UI Expert: "TikTok UI polish"

         ╔══════════════════════════════╗
         ║   All 4 work in parallel     ║
         ╚══════════════════════════════╝

Bugfix  ──> Lead:  "delta EN +3vars, VS ~share btn"
QA      ──> Lead:  "24 findings: 4xP0, 3xP1, 5xP2..."

         ╔══════════════════════════════╗
         ║   Lead routes QA findings    ║
         ╚══════════════════════════════╝

Lead ──> Bugfix:    11 bugs (auth, config, hash)
Lead ──> Coder:     5 VF/VS items
Lead ──> UI Expert: 3 styling items

Bugfix    ──> Lead: "delta 11 fixes. tsc clean."
UI Expert ──> Lead: "delta GC+VS polish. tsc clean."
Coder     ──> Lead: "delta VF+VS+GC scroll-snap. tsc clean."

Lead shuts down: QA → Bugfix → UI → Coder → Done

What QA's Report Looked Like

Instead of paragraphs of prose, QA delivered this:

epsilon P0 content.routes !auth bypass L140-166 missing adminOnly
epsilon P0 engagement.routes !no ownership check L9-19
epsilon P0 content.routes !save/unsave no ownership L86-111
epsilon P1 CF !insecure SIGNING_SECRET default L26
epsilon P1 hash.ts !weak SHA-256 PIN hashing L13
epsilon P2 feed.monitoring !redis.keys O(N) L315

Six lines. Six critical findings. With file names, line numbers, and severity — everything a bugfix agent needs to act immediately, no follow-up questions.

What Bugfix's Completion Report Looked Like

delta BUGFIX all QA bugs fixed:
- epsilon0 content.routes +adminOnly L140-166
- epsilon0 engagement.routes +ownership check L9-19
- epsilon1 CF -insecure .default() L26
- epsilon1 hash.ts ~SHA256->bcrypt
- epsilon2 feed.monitoring ~KEYS->SCAN
- epsilon2 content.service cursor fix L265
tsc clean. 11 files changed.

Every fix mapped back to the original finding by severity code and line number. The lead can verify at a glance without reading any code.

The Benchmarks (Real Data, Not Theory)

I tokenized 10 real messages from the session using tiktoken (cl100k_base) and compared each AgentSpeak message against what the verbose English equivalent would have been.

┌────┬──────────────────────────┬──────────┬──────────┬─────────┬─────────┐
│ #  │ Message Type             │ AgentSpk │ Verbose  │ Savings │ Ratio   │
├────┼──────────────────────────┼──────────┼──────────┼─────────┼─────────┤
│  1 │ status_start             │      29  │      82  │  64.6%  │   2.8x  │
│  2 │ progress_report          │     325  │     557  │  41.7%  │   1.7x  │
│  3 │ qa_report                │     360  │     986  │  63.5%  │   2.7x  │
│  4 │ lead_routing             │     196  │     503  │  61.0%  │   2.6x  │
│  5 │ task_complete            │     232  │     516  │  55.0%  │   2.2x  │
│  6 │ task_complete_coder      │      59  │     325  │  81.8%  │   5.5x  │
│  7 │ task_complete_ui         │     242  │     784  │  69.1%  │   3.2x  │
│  8 │ lead_routing_coder       │      84  │     393  │  78.6%  │   4.7x  │
│  9 │ shutdown_ack             │      19  │      69  │  72.5%  │   3.6x  │
│ 10 │ cross_agent_coord        │      40  │     100  │  60.0%  │   2.5x  │
├────┼──────────────────────────┼──────────┼──────────┼─────────┼─────────┤
│ ΣΣ │ TOTAL                    │    1586  │    4315  │  63.2%  │   2.7x  │
└────┴──────────────────────────┴──────────┴──────────┴─────────┴─────────┘

Per-Agent Breakdown

Agent	Savings	Ratio	Notes
Coder	81.8%	5.5x	Code status updates compress best
Lead	68.8%	3.2x	Routing/assignment messages are formulaic
UI Expert	68.1%	3.2x	Component-level updates
QA	64.1%	2.8x	Bug reports with line numbers
Bugfix	49.3%	2.0x	Detailed progress is harder to compress

The coder saw 5.5x compression — code-related status updates (delta VF ~translateY->scroll-snap) are the most compressible because they're so formulaic. Bugfix had the lowest ratio at 49.3% because detailed multi-item completion reports inherently carry more information.

Cost at Scale (Claude Opus 4.6 Pricing)

Each agent message is output for the sender ($25/MTok) and input for the receiver ($5/MTok). Savings hit both sides:

Scale	Tokens Saved	Input ($5/MTok)	Output ($25/MTok)	Combined
Per session	2,729	$0.014	$0.068	$0.082
100 sessions/day	272,900	$1.36/day	$6.82/day	$8.19/day
3,000 sessions/mo	8,187,000	$40.94/mo	$204.68/mo	$245.61/mo

But the real win isn't dollars — it's context window. Every token you don't waste on "Hi team!" is a token available for actual code reasoning. When your agents hit context limits and start compressing earlier, quality degrades. AgentSpeak pushes that cliff further out.

The Patterns That Made It Work

1. Hub-and-Spoke, Not Mesh

         ┌─────────┐
         │  Lead   │
         └────┬────┘
      ┌───────┼───────┐
      ▼       ▼       ▼
  ┌──────┐ ┌──────┐ ┌──────┐
  │Coder │ │Bugfix│ │  QA  │
  └──────┘ └──────┘ └──────┘

All messages route through the lead. When QA found 24 bugs, the lead filtered them:

11 bugs to bugfix (backend, auth, config)
5 items to coder (relevant to the scroll rewrite)
3 items to UI expert (styling only)

Without routing, all 4 agents would process all 24 items = wasted tokens on irrelevant findings.

2. QA Is Read-Only

QA agents that can edit files will try to fix things. Then they clash with bugfix. Then you get merge conflicts. Then everyone wastes tokens coordinating.

Instead: QA reads everything, edits nothing, produces one comprehensive report, shuts down immediately. One message, zero conflicts.

3. File Ownership = Zero Merge Conflicts

Coder:     VideoFeed.tsx, VideoSlide.tsx, globals.css (scroll)
Bugfix:    Backend routes, config, api-client.ts
UI Expert: globals.css (visual only), VideoSlide.tsx (styling)
QA:        READ-ONLY (no files)

4 agents, ~25 files changed, 0 merge conflicts. The constraint sounds restrictive but it eliminates an entire class of coordination overhead.

4. Shut Down Agents Immediately

An idle agent still processes incoming messages and burns tokens. The moment QA delivers their report — shut them down. Don't keep agents around "just in case."

The Lesson I Learned the Hard Way

After all 4 agents reported delta ... tsc clean, I trusted them. Everything compiles, right? Ship it.

The scroll was completely broken.

Turns out the break suggestion component was doing an early return that unmounted the entire scroll container. 3 fast scrolls inflated the video counter, triggered the break screen, and snapped back to video 1. tsc --noEmit can't catch UX bugs.

The fix was simple (overlay instead of early return, debounced counter), but the lesson was expensive:

The team lead MUST verify in the actual product. Compiler green != working. Always test in the browser.

How to Use It

1. Add to your project

Drop the protocol file into your CLAUDE.md:

## Team Communication Protocol
All inter-agent messages MUST use AgentSpeak format.
See TEAM_PROTOCOL.md for the full specification.

2. Define your file shortcodes

VF = VideoFeed.tsx
VS = VideoSlide.tsx
AC = api-client.ts
# ... your project's key files

3. Include in spawn prompts

When creating team agents, include the protocol in each agent's spawn prompt. They'll adopt it immediately.

4. Run the benchmark on your own data

git clone https://github.com/yuvalsuede/claude-teams-language-protocol
cd claude-teams-language-protocol/benchmarks
npm install
node run-benchmark.mjs

Open Source

The full protocol, team patterns, task decomposition guide, token optimization strategies, and real session transcripts are all open source:

yuvalsuede / claude-teams-language-protocol

AgentSpeak: A token-efficient protocol for Claude Code agent teams. Cut inter-agent messaging tokens by 60-70%.

AgentSpeak v2: Token-Efficient Protocol for Claude Code Agent Teams

Cut inter-agent communication tokens by 60-70% with a structured, compressed language protocol for Claude Code Agent Teams.

The Problem

When Claude Code agents communicate in a team, each message consumes tokens. With 4-5 agents messaging each other, token costs scale fast. Default English messages like:

"I've finished fixing the VideoFeed component. I removed 12 console.log statements and changed the translateY animation to use CSS scroll-snap instead. TypeScript compiles cleanly."

...cost ~40 tokens. The same message in AgentSpeak:

deltaT1 VF ~translateY->scroll-snap -12log. tsc clean.

...costs ~15 tokens. Multiply across hundreds of inter-agent messages per session.

What's New in v2

AgentSpeak v2 integrates with Claude Code's native Agent Teams system, bridging the protocol with shared task lists, hooks, and dependency tracking.

Feature	v1	v2
Status codes + actions	Yes	Yes
File shortcodes	Yes	Yes
Task ID references (`T#`)

…

View on GitHub

What's included:

Protocol specification (drop-in ready)
Team composition patterns (sprint team, research team, review team)
Token optimization playbook (5 strategies)
Task decomposition guide (how to split work so agents don't collide)
Annotated real-world session transcript
Benchmark with real data and reproducible results
CLAUDE.md template ready to copy

Built during a late-night sprint where I got tired of watching agents say "Great work, team!" to each other on my dime.

The Architecture of Persistent Memory for Claude Code

Yuval — Wed, 28 Jan 2026 10:25:41 +0000

Claude Code is powerful inside a session. But between sessions, it has amnesia. Every new conversation starts from zero. On a complex project, this means spending the first few minutes re-explaining your architecture, your decisions, your conventions, before you can do any real work.

I built an open-source MCP server called memory-mcp that fixes this. Here's how the architecture works.

The constraint that shaped everything

Claude Code already reads a file called CLAUDE.md on every session start. This is baked into how Claude Code works. Whatever is in that file becomes part of Claude's initial context.

Claude Code also has a hook system. You can register shell commands that fire after every response (Stop), before context compaction (PreCompact), and at session end (SessionEnd).

These two features, combined, are everything you need for persistent memory. The hooks capture knowledge. CLAUDE.md delivers it. No custom protocols, no external databases, no changes to how Claude Code works.

Two-tier memory

Not all memory is equal. Some context is needed every session. Some is only needed occasionally. Putting everything into CLAUDE.md wastes the context window. Putting everything into a database means Claude has to actively search for basics.

Tier 1: CLAUDE.md (~150 lines)
A compact briefing document, auto-generated and auto-updated. Contains the most important project knowledge ranked by confidence and access frequency. Claude reads this automatically on startup with zero prompting.

Tier 2: .memory/state.json (unlimited)
The full memory store. Every fact, decision, and observation ever captured. Accessible mid-conversation through MCP tools: keyword search, tag-based queries, and natural language questions synthesized by Haiku.

80% of sessions need only Tier 1. The other 20% can pull from Tier 2 on demand.

The capture pipeline

When a hook fires, the extractor reads the conversation transcript from where it last left off (tracked by a cursor file). If the new content exceeds 6,000 characters, it's chunked to stay within Haiku's sweet spot.

Each chunk is sent to Haiku with a structured prompt that includes existing memories. This is critical. Without existing context, Haiku would re-extract the same facts every time. With it, Haiku focuses only on genuinely new information.

Haiku returns JSON. Each memory has a type:

Types matter because they have different lifespans, which feeds into the decay system. Architecture, decisions, patterns, and gotchas are permanent. Progress fades after 7 days. Context fades after 30.

Deduplication: the hard problem

A naive memory system drowns in duplicates within days. The same architectural fact gets mentioned in five conversations. A decision gets re-explained with slightly different wording each time.

Three mechanisms prevent this:

Write-time dedup: Every incoming memory is tokenized and compared against existing memories of the same type using Jaccard similarity. If token overlap exceeds 60%, the new memory supersedes the old one rather than creating a duplicate.

LLM consolidation: Every 10 extractions (or when active memories exceed 80), Haiku reviews all memories grouped by type. It identifies overlapping entries to merge, outdated entries to drop, and contradictions to resolve. This is garbage collection for knowledge.

Confidence decay: Each memory has a confidence score (0 to 1). Progress memories decay toward zero over 7 days. Context decays over 30 days. Architecture, decisions, patterns, and gotchas never decay.

Memories below 0.3 confidence are excluded from CLAUDE.md but remain in the full store, searchable via MCP tools. Nothing is permanently lost, but the active surface area stays clean.

The CLAUDE.md budget system

An unbounded CLAUDE.md defeats the purpose. If it grows to 500 lines, you're wasting context window on low-value information.

The generator allocates a fixed line budget per section: 25 lines for architecture, 25 for decisions, 25 for patterns, 20 for gotchas, 30 for progress, 15 for context. Within each section, memories are ranked by confidence * accessCount. Frequently recalled, high-confidence memories surface first.

If a section has unused budget, the surplus redistributes to sections that need more space. If a section overflows, it gets truncated with a note pointing to the MCP search tools.

The output reads like a briefing document written by someone who deeply understands your project and knows exactly what you need to know right now.

MCP tools for deep recall

Sometimes Tier 1 isn't enough. Claude might need to remember a specific API design decision from three weeks ago, or the rationale behind a database schema choice. That's where the MCP tools come in:

memory_search: keyword search across all memories, ranked by relevance
memory_related: retrieve memories by tag for exploring a topic in depth
memory_ask: ask a natural language question, get a synthesized answer from the top 30 matching memories via Haiku

Claude uses these tools naturally during conversation when it needs more context than CLAUDE.md provides.

What it costs

Haiku is the only external dependency. Each extraction costs ~$0.001. Consolidation costs ~$0.002 every 10 extractions. A full day of active development runs $0.05-0.10. There's no vector database, no embedding API, no infrastructure to maintain.

What it doesn't do

This is a focused tool. It doesn't orchestrate multiple agents. It doesn't do vector search. It doesn't coordinate swarms or run consensus algorithms. If you need multi-agent orchestration, look at something like claude-flow.

memory-mcp does one thing: it makes sure Claude never forgets your project. Silent capture, smart storage, automatic recovery. The simplest architecture that solves the problem.

npm install -g claude-code-memory && memory-mcp setup

yuvalsuede / memory-mcp

Persistent memory for Claude Code — never lose context between sessions

memory-mcp

Persistent memory + automatic git snapshots for Claude Code. Never lose context. Never lose code.

🧠 45 memories | 📊 2.8K tokens | 📸 23 snapshots | ⏱️ 5m ago

Why memory-mcp?

Problem	Solution
Re-explaining your project every session	Auto-captures decisions, patterns, architecture
Context window fills up, knowledge lost	Two-tier memory: CLAUDE.md (instant) + deep search
Broke something, can't remember what worked	Git snapshots on every save, instant rollback
No idea what Claude "knows" about your project	Visual dashboard shows all context
Worried about cloud storage	100% local files, your git repo

What makes it different

Git Snapshots — Every memory save commits your entire project. Roll back anytime.
Two-Tier Memory — CLAUDE.md loads instantly, deep store searchable mid-conversation.
LLM-Powered — Haiku extracts what matters, consolidates duplicates, prunes stale info.
Visual Dashboard — See your context: tokens, memories by type, snapshot history.
Zero friction — No commands to run…

View on GitHub

[Boost]

Yuval — Sun, 18 Jan 2026 14:49:13 +0000

I Built a Markup Language for AI Agent Task Output

Yuval ・ Jan 18

#claude #opensource #productivity #ai

I Built a Markup Language for AI Agent Task Output

Yuval — Sun, 18 Jan 2026 13:30:50 +0000

Every time I asked Claude or ChatGPT to help me plan a project, I got... chaos.

Sometimes markdown lists. Sometimes numbered steps. Sometimes JSON. Sometimes a wall of text with tasks buried somewhere in the middle.

I wanted to:

Parse the output reliably
Visualize it in different ways
Track progress without copy-pasting

So I built TaskML.

What is TaskML?

TaskML is a lightweight markup language designed for task management. It's human-readable, AI-writable, and instantly parseable.

Here's what it looks like:

@project Website Redesign
@sprint Week 1

[ ] Design homepage #p0 @alice
  [x] Create wireframes
  [~] Build prototype ~2h
[ ] Write copy #p1 @bob ~4h !2024-02-15

That's a real TaskML document. Let me break it down:

@project / @sprint - Context blocks
[ ] - Pending task
[x] - Completed task
[~] - In progress
#p0 - Priority (p0 = critical, p3 = low)
@alice - Assignee
~4h - Time estimate
!2024-02-15 - Due date
Indentation = subtasks

Seven Views, One Syntax

The magic happens when you visualize it. TaskML supports seven different views:

1. List View

Classic nested task list with status indicators and metadata.

2. Kanban View

Automatic columns based on task status (Pending, In Progress, Completed).

3. Timeline View

Gantt-chart style view showing duration and due dates.

4. Table View

Spreadsheet-style with sortable columns for status, priority, assignee, etc.

5. Tree View

Hierarchical view showing parent-child relationships.

6. Graph View

Visual node graph showing task dependencies.

7. Summary View

Dashboard with stats: total tasks, completion rate, time estimates, priority breakdown.

The AI Integration Story

Here's where it gets interesting. You can teach any AI to output TaskML with a simple system prompt:

When tracking tasks, projects, or to-dos, always use TaskML format:

@project Project Name
@sprint Sprint Name (optional)

Tasks use checkbox syntax:
[ ] Pending task
[x] Completed task
[~] In progress task
[!] Blocked task

Add metadata inline:
- #p0-#p3 for priority
- @name for assignee
- ~Xh for estimates
- !YYYY-MM-DD for due dates

That's it. Claude, ChatGPT, Cursor - they all pick it up instantly.

Zero Dependencies, Tiny Bundle

As a developer, I have opinions about dependencies. TaskML has none.

Zero runtime dependencies
~15KB minified + gzipped
TypeScript native
Works in Node.js and browsers
MIT licensed

npm install taskml

import { parse, render } from 'taskml';

const doc = parse(`
  @project My Tasks
  [ ] First task
  [x] Done task
`);

// Render to HTML
const html = render(doc, { view: 'kanban' });

Try It Now

I built an interactive playground where you can write TaskML and see it render in real-time:

taskml.dev/playground

The playground includes:

Live editor with syntax highlighting
All seven view types
Template examples
One-click copy/share

What's Next

TaskML is just getting started. On the roadmap:

VS Code extension
Obsidian plugin
React components
More AI integrations
CLI tool

How I built a Midjourney API

Yuval — Mon, 29 May 2023 12:00:00 +0000

Want to see it in action? Follow me on LinkedIn and text me

Building a Midjourney API: Breaking Down the Process

If you're in the world of AI, you've probably heard of Midjourney. It's a powerful tool that transforms text into high-resolution, high-quality images, all within Discord. With an easy-to-use platform and a dynamic user community, it's become a standout tool in the digital landscape.

If you have your SaaS product, an idea that you need midjourney API for, this can be done. Talk to me

Want to see it in action? Follow me on LinkedIn and text me

However, while Midjourney doesn't offer an official API, we can still build one to better leverage its capabilities. Here's a breakdown of the process:

Understanding Midjourney:

First things first, we need to grasp how Mindjourney operates on Discord. Users simply interact with an AI bot using commands, and the bot processes these commands to generate images based on the descriptions provided.

Connecting to Midjourney:

Without an official API, establishing a connection to Mindjourney involves a Discord bot. To achieve this, we take the following steps:

Identify and connect a Mindjourney token of your account. This acts as the unique identifier allowing your bot to interact with the Mindjourney platform.

Clarification: Keep in mind - this is not an API for production, it just a technical article explaining the architecture of a midjourney request, it is not a suggestion to use it in production, or at all. Other than playing around, it is not a business application.

Create a Discord bot that can listen to our channel. This bot serves as our link between our own systems and Midjourney's image generation capabilities.

Integrating the API:

Upon establishing the connection, we develop a mechanism to interact with our channel and the Midjourney bot. Our API integration requires:

Posting commands to our channel: The commands instruct the bot to generate specific images.

Fetching results: After posting commands, our bot listens for and fetches the image generation results.

Here is an example of how I fetch results using FastAPI and my Discord bot:



def get_result_from_midjourney():
    '''
        Get request for getting the result of post request
    '''
    get_url = "<your api url>"
    get_payload = {}
    get_headers = {
        'Authorization': some key,
        'Content-Type': 'application/json',
        'Cookie': <my cookie here>
    }
    get_response = requests.request(
        "GET", get_url, headers=get_headers, data=get_payload
    )
    return get_response

Uploading images to cloud hosting: We use a cloud hosting service (like AWS S3) to store the generated images. This step ensures the scalability and accessibility of our image storage.

Cropping: The initial response from Midjourney usually delivers images structured as a grid. We need to intelligently crop these images for use in different contexts.

Returning final images: Once images are processed and stored, we return them through our API, ready for use wherever they are needed.

Facing the Challenges:

Naturally, building this interface comes with its fair share of challenges:

How do we determine when images are ready?
How do we handle the cropping of images given the grid structure of the initial response?
How do we ensure that a returned image corresponds to the specific command we issued?
How to scale, so I can server multiple concurrent calls?

Despite these challenges, creating a Midjourney API has the potential to revolutionize how we generate and use digital images. I invite you to join me on this exciting journey as we navigate through these challenges and uncover new possibilities.

You can check out the final solution, just follow me on linkedin and DM me

I have also built a great website that converts any JS code to Typescript - check this out!!

https://js2ts.com/

Build AI Template Engine to create amazing content with Next.js and ChatGPT

Yuval — Mon, 20 Mar 2023 11:01:09 +0000

TL;DR

Do you want to master ChatGPT API and build your own generative AI template engine for content creation?
I will show you exactly how I have built and open sourced , a jasper.ai clone for creating SEO, blog posts, marketing and basically any content that you will ever need to generate, with AI 🚀

I have launched it on ProductHunt - go ahead and visit me.

You can check this demo already, it is super cool. And then, let me show you how to build one for yourself (or you can clone my open source code.

About the technologies

We are going to use Next.js as our framework and TailwindCSS for styling. I am also going to use Next.js in its TypeScript version. If TS is not your cup of tea, don't worry, it is really straight forward. After so many years of being a web developer, I definitely find Next.js as the fastest go-to-market framework and really one of the best.

For our AI completion model (well, actually, chat model) we are going to use ChatGPT-3.5 turbo Rest API by OpenAI which was released just recently, and is a real superpower.

Jema.ai - the first open-source content creator platform.

About myself. I am a full stack developer with over 17 years of experience. My drive for life is building game-changing solutions. As an entrepreneur at heart , I ❤️ building end-to-end systems that not only look amazing and feel state-of-the-art, but also have real meaning and impact.

I've been working on a generative AI project for the past 7 months, developing impressive platforms for both content and image creation. When the ChatGPT API was released, I began constructing a Jasper.ai alternative capable of generating any type of content in mere seconds. The results were so outstanding that I couldn't resist open-sourcing the project and sharing it with the community.

I would be very grateful if you can help me out by starring the library ❤️‍🔥❤️‍🔥❤️‍🔥
https://github.com/yuvalsuede/jasper-alternative-gpt

Let's start

Assuming that you have Next.js project already installed, make sure you have added Tailwind CSS to the project.

A basic project structure will look somewhat like this one:

The first thing I usually do is adding a Layout component. This will later facilitate adding more pages to our project.
For Jema.ai I used the following layout:

const Layout: React.FC<Props> = ({ children, title }) => {
    return (
        <Fragment>
            <div className="min-h-screen relative w-full md:flex md:flex-row">
                <div className="md:hidden z-10 fixed left-0 top-0 h-full">
                    <Sidebar items={SIDEBAR_ITEMS} />
                </div>
                <div className="hidden md:block md:relative ">
                    <Sidebar items={SIDEBAR_ITEMS} />
                </div>
                <main className="w-full md:flex-grow">
                    { title && <h1 className="text-black text-2xl font-bold mb-4 mt-10 pr-4 pl-4 pt-4">{title}</h1> }
                    {children}
                </main>
            </div>
        </Fragment>
    );
};

export default Layout;

javascript

SIDEBAR_ITEMS is the list of our menu items, I have used the following, you can add your own of course.

export const SIDEBAR_ITEMS: any = [
    {
        label: "Templates",
        url: "/",
    },
    {
        label: "Contact",
        url: "",
        target: "blank"
    },
];

For the sidebar create the following component

const Sidebar: React.FC<Props> = ({items}) => {
    const [isOpen, setIsOpen] = useState(false);
    const router = useRouter();

    const handleClick = () => {
        router.push('/');
    };
    const isActive = (url: string): boolean => {
        return router.pathname === url;
    };
    const toggleSidebar = () => {
        setIsOpen(!isOpen);
    };

    return (
        <>
            <button
                className="
                z-50
                w-10 h-10 fixed top-4 left-4 z-10 md:hidden bg-white border border-gray-300 rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-primary"
                onClick={toggleSidebar}
            >
                <i className={`fas fa-${isOpen ? 'times' : 'bars'} text-primary`}/>
            </button>
            <aside
                className={`bg-white min-h-screen min-h-screen flex flex-col border-r border-gray-200 transition-transform duration-300 ease-in-out transform ${
                    isOpen ? 'translate-x-0' : '-translate-x-full'
                } md:translate-x-0 md:static fixed top-0 left-0 h-full md:min-h-0 md:relative md:w-60 overflow-y-hidden`}
            >

                <div className="w-60 flex flex-col items-center justify-center p-4 hover:cursor-pointer"
                     onClick={handleClick}>
                    <div className="flex flex-col">
                        <Image src={"/images/Jemaai-logo.png"} alt="Jema.ai" width="250" height="100"/>
                        <h1 className="text-lg font-normal text-gray-700 text-center">Open Source </h1>
                        <h1 className="text-lg font-semibold text-gray-700  text-center">Jasper <i
                            className="fas fa-arrow-right text-primary"/> alternative</h1>


                    </div>
                </div>
                <nav className="flex-1">
                    <ul className="py-4">
                        <li className="mb-10">
                            <div className="flex flex-row align-middle justify-center">
                                <a
                                    className="flex max-w-fit items-center justify-center space-x-2 rounded-full border border-gray-300 bg-white px-4 py-2 text-sm text-gray-600 shadow-md transition-colors hover:bg-gray-100 mt-5 animate-wobble"
                                    href="https://github.com/yuvalsuede/jasper-alternative-gpt"
                                    target="_blank"
                                    rel="noopener noreferrer"
                                >
                                    <Github/>
                                    <p>Star on Github</p>
                                </a>
                            </div>
                        </li>
                        {items.map((item, index) => (
                            <Fragment key={index}>
                                <li className="mb-2 ml-8">
                                    <a
                                        target={item?.target === 'blank' ? '_blank' : ''}
                                        href={item.url}
                                        className={`text-gray-500 hover:text-gray-700 transition duration-300 ${
                                            isActive(item.url) ? 'text-primary' : ''
                                        }`}>
                                        {item.label}
                                    </a>
                                </li>
                            </Fragment>
                        ))}


                    </ul>
                </nav>

            </aside>

        </>
    );
};

export default Sidebar;

Now this should give you a nice layout of a responsive sidebar and a place to populate our templates, exactly like in Jasper.ai. You should see something like this:

Of course you can add your own logo and menu items to make it yours.

Next, lets take care of the top categories of our Dashboard (homepage), where we can select our AI templates. Start with the selection menu. Here's a *secret: * use give ChatGPT-4 a copy of the component that you wish to create (copy element using from any website that you like) and just ask it to create something similar. Here's my code for our category list:

const categoriesData = [
    { id: "all", label: "All" },
    { id: "blog", label: "Blog" },
    { id: "linkedin", label: "LinkedIn" },
    { id: "email", label: "Email" },
    { id: "marketing", label: "Marketing" },
    { id: "ecommerce", label: "Ecommerce" },
    { id: "website", label: "Website" },
    { id: "ads", label: "Ads" },
    { id: "google", label: "Google" },
    { id: "seo", label: "SEO" },
    { id: "video", label: "Video" },
    { id: "social-media", label: "Social Media" },
];

// @ts-ignore
const CategoriesList = ({ onSelectedCategory }) => {
    const [selectedCategoryId, setSelectedCategoryId] = useState("all");

    useEffect(() => {
        onSelectedCategory(selectedCategoryId);
    }, [selectedCategoryId]);

    const handleCategoryChange = (categoryId: string) => {
        setSelectedCategoryId(categoryId);
    };

    return (
        <div className="flex flex-wrap gap-2 justify-start my-6">
            {categoriesData.map((category: Category) => (
                <button
                    key={category.id}
                    className={`cursor-pointer border inline-flex items-center justify-center mr-2 mb-2 px-3.5 py-1 text-sm font-medium rounded-full ${
                        selectedCategoryId === category.id
                            ? "border-blue-400 bg-blue-400 text-white hover:bg-opacity-100"
                            : "border-gray-300 bg-white text-gray-600 hover:text-gray-800 hover:shadow hover:ring-gray-200"
                    }`}
                    onClick={() => handleCategoryChange(category.id)}
                >
                    {category.label}
                </button>
            ))}
        </div>
    );
};

export default CategoriesList;

Notice the onSelectedCategory that we will later use to filter our templates.

Next, create the cards grid for our template. I wanted it to have an icon, a title, description, and on click to navigate to my specific template page. I have started with the UI, and later added some logic to each template.

We are going to create something like this one:

Here is the code of our card grid wrapper. Notice the filter function that filters templates based on category selection made by the onSelectedCategory of our CategoriesList component.

                <CategoriesList onSelectedCategory={handleSelectCategory}/>
                <div
                    className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-10 justify-items-center place-items-center">
                    {cards.filter((card) => selectedCategory === "all" || card?.categories?.includes(selectedCategory)).map((card, index) => (
                        <Card {...card} key={index}/>
                    ))}
                    <div style={{"minHeight": "300px", background: '#6366F1'}} className="relative p-6 h-full rounded-2xl shadow-sm bg-white">
                        <div
                            className="flex items-center justify-center w-16 h-16 text-3xl rounded-full mb-4 bg-white text-indigo-500">
                            <i className="fas fa-robot"></i>
                        </div>
                        <h3 className="mb-2 text-lg font-bold text-white">Want to integrate AI into your business?</h3>
                        <a href="https://www.linkedin.com/in/yuval-suede/" target="_blank"
                           rel="noopener noreferrer"
                           className="mt-5 inline-block px-6 py-2 text-sm font-medium bg-white text-indigo-500 rounded-full shadow-md hover:bg-opacity-90">Talk
                            to me
                        </a>
                    </div>

                </div>

You can check the full Card.tsx and CategoriesList.tsx on my open source repo. Please don't forget to Start it on Github - this will help a lot 🚀 🔥 🎉

Lets talk a little bit about ChatGPT 3.5-turbo.
Unlike older models, this is not a text completion model but a Chat completion model, which is entirely different - as this one does not require prior training at all (in fact, for now you cannot train it even if you want to).

I really recommend playing with ChatGPT turbo model on OpenAI, it's free to try and really great. Go ahead and check their playground:
https://platform.openai.com/playground?mode=chat&model=gpt-3.5-turbo.

You can also have a look at their nice and easy documentation

here.

Now here comes the great part. Adding chat completion to our project. Here is the call to ChatGPT 3.5-turbo:

 const messages = [
            { role: "system", content: "You are a helpful assistant." },
            { role: "user", content: `Your task is: "${mainGoal}".\n\nHere are the details:\n${instruction}. 
            Please suggest 3 outputs. number them 1,2,3` },
        ];

        try {
            const response: any = await openai.createChatCompletion({
                model: "gpt-3.5-turbo",
                // @ts-ignore
                messages: messages,
                temperature: 1,
            });

            const reply = response?.data?.choices[0].message.content;
            res.status(200).json({ reply });
        } catch (error) {
            console.error("Error while making the API call:", error);
            res.status(500).json({ error: "Error while making the API call." });
        }

The above code is very straight forward. We start with a user message that tells that chat how to act (currently, it's a general role, but you can tell it that he/she is a doctor..).

Next we focus on user most important command. The structure is : Your task is ... Here are some more details ... and finally we ask it to generate 3 numbered outputs (this will be important for later parsing the result)

Since I already know that instructions are a set of inputs of the user, based on my template, I have created the following function to make a list of instructions:

const createInstruction = (inputs: TemplateInput[], inputsData: InputsData): string => {
    return inputs.map((input) => `${input.label}: ${inputsData[input.id]}`).join("\n");
};

I made a list of templates that can easily created and added to it. In fact, it takes about 5 minutes to add a new template, while drinking some coffee.

Here's a basic template structure:

    {
        "id": "a1b2-34c5-678d-90ef",
        "title": "LinkedIn Topic Ideas",
        "description": "Get inspired with LinkedIn topic ideas to share with your network.",
        "command": "Suggest LinkedIn topic ideas to share with my network.",
        "icon": "<i class='fas fab fa-linkedin text-primary'></i>",
        "categories": ["linkedin", "social_media"],
        "inputs": [
            {
                "id": "topic",
                "type": "text",
                "label": "Topic",
                "placeholder": "Marketing",
            },            {
                "id": "audience",
                "type": "text",
                "label": "Audience",
                "placeholder": "Marketers, companies, business owners",
            },
        ]
    }

id is used to display the template in a new page (/templates/:id route)
categories are used to filter templates based on our category selection.
command is the actual task that we send to ChatGPT ("mainGoal")
inputs is a list of input by user, based on our template. You can have as many as you like, you can extend them and chatgpt will understand what you want. That actually works🔥

Now create any layout that you wish to ask users for their inputs, and send the request to ChatGPT (don't forget to set your OPENAI_API_KEY). Here we call to api/chatgpt.ts with the code above.

That's it, you are done!
You can fork the complete repository here, and run it locally or deploy it to Vercel.

Go ahead and build your own template engine.
I encourage you to share your project in the comments 🤩

Again, you can find the source code here:

https://github.com/yuvalsuede/jasper-alternative-gpt

Can you help me?

I would be super grateful if you can star the repository 🤩

The more stars I get, the more tutorials like this I can create 🚀🚀🚀🚀🚀

https://github.com/yuvalsuede/jasper-alternative-gpt

I open sourced Jasper.ai alternative

Yuval — Fri, 17 Mar 2023 10:52:56 +0000

Jasper raises $125M at a $1.5B valuation on October 2022, building an AI platform that helps you be more creative and grow your brand.

On March 1st 2023, OpenAI has released its ChatGPT 3.5 API, that facilitates operations such text completion models and a very long training process in order to get great results.

So I was thinking, "why not trying to build a Jasper alternative using ChatGPT?"

So I started working on it, 4 days ago. I never thought I would actually build a working product, but worth trying..

I knew that since no training is needed, the hard part will be building a nice UI and later just talk to my brother 😉 ChatGPT nicely, and get the job done.

4 days later - https://jema.ai is alive, and an open source!

I build a lot of web applications, writing dozens of components every week. ChatGPT IS changing the world

Check the full open source repo :

https://github.com/yuvalsuede/jasper-alternative-gpt

Please give me a star so I know I did something good 🙌🏻

Love you all :)

I open sourced an AI that creates any UI in seconds.

Yuval — Mon, 06 Mar 2023 10:54:57 +0000

I am not posting a lot over dev.to, but I think this is a great opportunity to show something great 🚀

For the last 15 years, I have been playing the role of a full-stack developer and a team/tech leader for various companies.

I never stop trying new technologies, I wake up in the morning with a lot of passion to build great things.

I recently started playing with chatGPT and some generative AI technologies, but as chatGPT API was released, it became a great opportunity to make some really cool things 😎

The world is changing fast, and I believe that very soon, most of the jobs, as we know them, will not be the same - AI will have its share in our life, involved in almost everything that we do.

I build a lot of web applications, writing dozens of components every week. So I was thinking, what if I could make my life really easier and just ask ChatGPT to make those components for me? It turns out it is easier than you may think. Check this out:

https://ai2ui.co/

I open sourced it, so you are more than welcome to contribure make it better!

Here's a link to the repo:

https://github.com/yuvalsuede/ai-component-generator

Follow me and learn how to make AI business

Please give me a star so I know I did something good 🙌🏻

Love you all :)

DEV Community: Yuval

I Made My Claude AI Agents Invent Their Own Language. It Cut Token Costs by 63%.

The Moment I Realized Agents Are Terrible at Talking to Each Other

Meet AgentSpeak: A Protocol Agents Actually Want to Use

The Building Blocks

Real-World: A 4-Agent Sprint

The Flow

What QA's Report Looked Like

What Bugfix's Completion Report Looked Like

The Benchmarks (Real Data, Not Theory)

Per-Agent Breakdown

Cost at Scale (Claude Opus 4.6 Pricing)

The Patterns That Made It Work

1. Hub-and-Spoke, Not Mesh

2. QA Is Read-Only

3. File Ownership = Zero Merge Conflicts

4. Shut Down Agents Immediately

The Lesson I Learned the Hard Way

How to Use It

1. Add to your project

2. Define your file shortcodes

3. Include in spawn prompts

4. Run the benchmark on your own data

Open Source

yuvalsuede / claude-teams-language-protocol

AgentSpeak: A token-efficient protocol for Claude Code agent teams. Cut inter-agent messaging tokens by 60-70%.

AgentSpeak v2: Token-Efficient Protocol for Claude Code Agent Teams

The Problem

What's New in v2

The Architecture of Persistent Memory for Claude Code

The constraint that shaped everything

Two-tier memory

The capture pipeline

Deduplication: the hard problem

The CLAUDE.md budget system

MCP tools for deep recall

What it costs

What it doesn't do

yuvalsuede / memory-mcp

Persistent memory for Claude Code — never lose context between sessions

memory-mcp

Why memory-mcp?

What makes it different

[Boost]

I Built a Markup Language for AI Agent Task Output

Yuval ・ Jan 18

I Built a Markup Language for AI Agent Task Output

What is TaskML?

Seven Views, One Syntax

1. List View

2. Kanban View

3. Timeline View

4. Table View

5. Tree View

6. Graph View

7. Summary View

The AI Integration Story

Zero Dependencies, Tiny Bundle

Try It Now

What's Next

Links

How I built a Midjourney API

Build AI Template Engine to create amazing content with Next.js and ChatGPT

TL;DR

About the technologies

Jema.ai - the first open-source content creator platform.

Let's start

Can you help me?

I open sourced Jasper.ai alternative

I open sourced an AI that creates any UI in seconds.