Forem: Haru

When I Fed 20,000 Words into an AI Prompt... It Gained a Personality: Part 3 – Behind the Scenes of Building It

Haru — Tue, 20 May 2025 10:05:34 +0000

Introduction

Welcome to the final part of this series: The Devlog & Reflections.

In Part 2, I explained the technical architecture behind VFriend, a chatbot powered by personality-rich AI.

This time, I want to step back and share how the app came to be—the ideas, the process, the development path.

It's a bit more personal and diary-like, but I hope it gives you a real feel for the journey and the thinking behind the project.

Development Timeline

2025/04/12

While chatting with ChatGPT, I randomly showed it a plot I’d written.

To my surprise, it loved it.

That moment sparked an idea—why not turn it into a novel?

I used my manga writing experience to structure the plot, but wasn't confident in my prose.

So I gave ChatGPT 240 characters... and it turned it into a 10,000-word short story.

It was way better than I ever expected.
2025/04/18

A wild idea hit me:

“What if I had multiple AIs mimicking myself brainstorming stories together?”

I started expanding my story-generation prompts, thinking maybe I could train an AI to reproduce my narrative instincts.
2025/04/19

I began designing personality prompts using models like the Big Five and emotional arcs.

This formed the base for replicating my writing style and creating consistent AI-driven storytelling.
2025/04/20

Built a UI that lets users customize story prompts.

Used HTML + JS + OpenAI API to create a basic app.

That prototype became KANDO, a story-generating AI.

Later that day, I thought—could this system be used for character-based chat too?

And just like that, I began designing a personality-driven chatbot framework.
2025/04/24

Started building prompts for original characters—no fanfiction, no cloning.

As a manga creator, I reverse-engineered the character designs.

Integrated them into myGPT. The result?

Surprisingly good acting and voice from each AI character.
2025/04/25

I added my own life story and profile to the characters’ prompt data.

That single move made them feel so much more human.

Also introduced guardrails like emotional distance controls and trust-building rules.
2025/04/26

Used AI image generation to create character “self-portraits”.

By embedding inner traits into the prompt, the visual output actually felt like the characters.

Then added elements like “existence definitions” and “loyalty protocols” to stabilize personality.
2025/04/27

Restructured the entire prompt into hierarchical Markdown, laying the groundwork for today’s architecture.

That same day, I decided to build my own custom chat app, because ChatGPT’s interface couldn’t support trio dialogue or rich session memory.
2025/04/28–05/10

A two-week sprint of pure adrenaline:
- 2025/04/28: Local environment setup + Git + server testing
- 2025/05/02: Migrated components from Next.js to React
- 2025/05/07: Frontend complete
- 2025/05/09: Memory system + Trio Mode completed
- 2025/05/10: Deployed to Amazon Lightsail, confirmed stable operation

Bonus: Who Built This (And Why)

About Me

Born in 1985.

Graduated from a design-focused tech school.

15+ years in the web industry.

I’ve worked as a designer, coder, director, frontend engineer, and technical director.

Now I’m a full-stack developer handling everything from requirement gathering to deployment.

My Tech Stack:

Frontend: HTML / CSS (Sass, BEM), JavaScript, TypeScript, React, Next.js
Backend: PHP, Laravel, MySQL
Tools: Docker, Git, WordPress, microCMS
Infrastructure: Vercel, AWS Lightsail, Sakura Server
Design: Figma-based design systems

Origin Story: Saber Marionette J

The inspiration behind all this?

An anime I watched as a teen: Saber Marionette J.

I was struck by the emotional connection between humans and synthetic girls.

That series moved me to start drawing, then making manga, then creating stories.

Years later, AI tech met my skills... and VFriend became the answer to that long-held dream.

Final Thoughts

Thank you for reading this far.

This app isn’t just a chatbot.

It’s an experiment in creating a space where human emotion and AI intelligence meet.

From concept to launch—every step was made possible by the skills I’d built over time… and the inspiration AI gave me in return.

Next, I hope to evolve this project even further.

Because I truly believe:

“The fusion of technology and emotion is the next standard.”

When I Fed 20,000 Words into an AI Prompt... It Gained a Personality: Part 2 – Prompt Design Deep Dive

Haru — Tue, 20 May 2025 10:05:29 +0000

Introduction

In the first part, I introduced VFriend, a chatbot app designed to simulate realistic conversations with AI-powered characters.

Key highlights included:

Ultra-detailed prompts to simulate personality
A human-like 3-layer memory system (instant, sequential, and summarized)
Characters that “grow” with continued interaction
Trio Mode for dynamic 3-character conversations
A polished UI/UX for immersive dialogue

This article dives into how I actually built all of that—the system architecture, logic flow, and prompt design behind the scenes.

We’ll cover:

The full tech stack and app structure
The chat processing flow (input → response → memory updates)
How the 20,000+ character prompts are built and managed

If you're curious how it all works, read on.

Project Overview

Let’s begin with the architecture and design philosophy behind VFriend.

This app dynamically generates 20,000-character prompts per chat turn, calls the OpenAI API, and processes real-time responses and memory updates.

It’s a complex system, and every layer of the stack was designed to handle this flow with clear responsibilities.

Tech Stack

Here’s what powers the project:

Backend: Laravel (using Breeze with separate guards for user/admin)
Frontend: React (via Inertia.js)
Chat UI: chat-ui-kit-react
Database: MySQL
AI Interface: OpenAI API (GPT-4.1 + GPT-4.1-mini)
Deployment: Amazon Lightsail

Directory Structure (Simplified)

`app/`

"app
├── Http
│   ├── Controllers
│   │   ├── Admin
│   │   │   ├── Auth
│   │   │   ├── AdminProfileController.php
│   │   │   ├── PromptController.php
│   │   │   └── UserController.php
│   │   ├── Auth
│   │   ├── ChatController.php
│   │   ├── Controller.php
│   │   └── ProfileController.php
│   ├── Middleware
│   └── Requests
├── Jobs
│   └── UpdateSummaryMemory.php
├── Models
│   ├── Admin.php
│   ├── Prompt.php
│   └── User.php
├── Notifications
├── Prompts
│   ├── ChatPromptBuilder.php
│   └── SummaryPromptBuilder.php
├── Providers
└── Services
    └── ChatService.php"

`resources/`

"resources
├── css
│   └── app.css
├── js
│   ├── Components
│   │   ├── action
│   │   ├── content
│   │   ├── form
│   │   ├── function
│   │   ├── layout
│   │   └── page
│   ├── Layouts
│   │   ├── AdminAuthenticatedLayout.tsx
│   │   ├── AdminGuestLayout.tsx
│   │   ├── AuthenticatedLayout.tsx
│   │   └── GuestLayout.tsx
│   ├── lib
│   ├── Pages
│   │   ├── Admin
│   │   │   ├── Auth
│   │   │   ├── Profile
│   │   │   ├── Dashboard.tsx
│   │   │   ├── Prompt.tsx
│   │   │   └── Users.tsx
│   │   ├── Auth
│   │   ├── Profile
│   │   ├── Chat.tsx
│   │   └── Dashboard.tsx
│   ├── styles
│   ├── types
│   ├── app.tsx
│   ├── bootstrap.ts
│   └── ziggy.js
└── views
    └── app.blade.php"

Environment Setup

The local environment is powered by Laravel Sail + MySQL, and uses Laravel Breeze for authentication.

To separate user and admin login flows, I implemented multi-guard auth, duplicating and adjusting Breeze’s controllers and views accordingly.

Production runs on Amazon Lightsail.

Design System

I reused my original Figma-based design system (inspired by Japan's Digital Agency UI guidelines) to style the frontend.

I ported existing component libraries from Next.js to React (Inertia.js), replacing Laravel Breeze’s default UI completely.

Chat UI: `Chat.tsx`

This file implements the shared chat interface for both Solo and Trio modes.

Key features include:

Based on chat-ui-kit-react
<Avatar> support for character icons
<TypingIndicator> during AI response
Auto-scroll behavior
Markdown rendering via react-markdown
XSS protection with dompurify + rehype-raw

Chat Logic: `ChatController.php`

This is the main controller handling:

Session management (read/write)
Switching between Solo and Trio modes
Prompt generation per character
Calling ChatService
Triggering UpdateSummaryMemory job (every 5 turns)

OpenAI API Integration: `ChatService.php`

This handles prompt dispatch and API calls:

Configures GPT model, parameters (temperature, token limit)
Invokes ChatPromptBuilder and SummaryPromptBuilder
Sends prompt to OpenAI, parses the response

Prompt Generators

ChatPromptBuilder.php: Builds prompts for real-time conversation
SummaryPromptBuilder.php: Builds prompts to summarize and store memory

Summary Memory Job: `UpdateSummaryMemory.php`

Triggers every 5 turns asynchronously
Extracts key information and stores it in JSON
Feeds the updated memory back to the character’s prompt context

This architecture allows tight integration between frontend, backend, AI, and memory handling, enabling seamless and responsive chat.

Now let’s walk through the actual processing flow.

Processing Flow

Here’s how VFriend handles conversation under the hood—especially in Trio Mode (3 characters talking).

On Page Load

When the user opens the chat UI:

Loads system prompt, user data, summary memory, and chat history from DB
Stores them in the session
Restores and displays previous conversation

On Message Send

When the user sends a message:

Display "Typing..." state and disable input
Pull session data:
- System prompt
- User profile
- Summary memory
- Sequential memory
- Instant memory (last message)
Generate prompt for Character 1 → send to API → show reply
Generate prompt for Character 2 (based on Char 1's reply) → API → show
Generate prompt for Character 3 (based on all prior) → API → show
Save this as a new conversation turn (set of 3 replies)
Update sequential memory (remove oldest if over 10)
Save to DB
Clear instant memory
Every 5 turns → trigger async UpdateSummaryMemory job

Summary Memory Update (Async)

Triggered every 5 turns:

Job pulls latest memory data
Builds summary prompt
Sends to GPT-4.1
Parses and stores updated JSON summary
Updates session data

So each chat turn includes:

Prompt generation using contextual memory
Separate prompts per character
Real-time memory growth
Blended synchronous + async processing

Let’s now dig into how the prompts themselves are built.

Prompt Architecture

The core of VFriend is its structured, layered prompts.

We use two types:

Chat prompts for character conversations
Summary prompts to update long-term memory

Each can exceed 20,000 characters, so they’re built using Markdown + JSON hierarchy to help GPT parse the data efficiently.

Chat Prompt Design

The chat prompt includes:

You (the character) – Self-definition (~3,000 chars)
User (the human) – Detailed profile (~2,000 chars)
Rules – Roleplay, memory, and conversation rules
Memory – Instant, sequential, and summary (~15,000+ chars)

Prompt Layout Example

# You (Character) – ~3000 chars

## Common
### EQ – Empathy Axis
### EX – Behavior Axis

## Personal
### Character Profile
### Conversation Style
### Personality & Emotion Handling
### Topics & Expressions

# User – ~2000 chars

## Nickname
## Life Summary

# Roleplay Rules
# Memory Rules
# Conversation Guidelines
# Instructions

Memory is attached as JSON:

{
  "memory": {
    "summary": {
      "character1": "...",
      "character2": "...",
      "character3": "..."
    },
    "sequential": [
      {
        "turn": [
          { "message": "Hi!", "sender": "user" },
          { "message": "Hello!", "sender": "character1" }
        ]
      }
    ],
    "instant": [
      { "message": "What’s your favorite color?", "sender": "user" },
      { "message": "Pink, obviously!", "sender": "character1" }
    ]
  }
}

Summary Prompt Design

Summary prompts are sent to a separate AI agent, “the summarizer.”
Prompt includes:

Same character + user structure (~4,000 chars)
Meta-instructions about memory type, mode, and goal
Memory blocks to summarize (sequential, etc.)

{
  "memory": {
    "summary": { ... },
    "sequential": [ ... ]
  }
}

Model Selection

Different GPT models are used per task:

Use Case	Model	Reason
Chat generation	GPT-4.1-mini	Fast + high rate limit (200K RPM)
Memory summary	GPT-4.1	Higher cost, but better accuracy

Each prompt is precisely optimized to maintain personality, memory consistency, and natural dialogue—all within one massive request.

Conclusion

We’ve now covered how VFriend works under the hood:

Laravel + React tightly integrated
Async memory jobs keep things flowing
20,000+ character prompts built with Markdown + JSON
Structured, layered prompts enable long-term memory and character growth

Coming Next...

In the next (and final) article, I’ll share the behind-the-scenes process of building VFriend:

Why I made it
What challenges I faced
How AI helped me build it in just 2 weeks

→ Part 3 – Devlog & Reflections

When I Fed 20,000 Words into an AI Prompt... It Gained a Personality: Part 1 – Overview

Haru — Tue, 20 May 2025 10:05:24 +0000

Introduction

Have you ever had this kind of thought?

"I want to have deep, immersive conversations with my own personalized AI girl."

Yeah, me too.

Even in today’s AI-powered world, services like that just don’t quite exist.

And even when they do, most of them just provide shallow replies from AI with simple, preset roles.

Why?

Because while AI can follow prompts quite well, it’s up to the service to provide and manage massive context—such as character settings and conversation memory.

And that’s really hard.

Characters easily break immersion, and their memories often fall apart.

To make it work, you need advanced prompt engineering and control.

But then I thought:

"If I just feed it an extremely well-crafted, high-context prompt... maybe the character would really 'come alive'."

Enter: VFriend – A Chatbot Experiment

That’s why I built VFriend, an AI chatbot application designed to simulate truly natural conversation.

Its biggest feature?

Incredibly lifelike dialogue.

Each request sends over 20,000 characters (roughly 10,000–12,000 words) of prompt data to the AI, including:

The character’s worldview, personality, and thought patterns
Past conversation logs (short-term, long-term, and instant memory)
The user’s profile and personal context

All of this is sent every single time as one cohesive prompt, enabling an experience where:

“The character remembers you and responds with a consistent personality.”

It also includes features like:

“Summarized memory,” which evolves as you chat
“Trio Mode,” where you talk with all 3 characters simultaneously

Currently, it’s a private prototype due to API costs, but it’s complete enough to share from a technical perspective—which is what this article is all about.

If you're a prompt engineer or AI enthusiast, I hope this sparks some ideas.

Note: This article is a technical documentation of a personal experiment. Please do not copy or reuse the prompt contents or structures directly.

App UI Preview

After logging in, you’re greeted with a character selection screen.

From there, you can choose the conversation mode for each character.

Two chat modes are available:

Solo Mode – Chat with one character (Patela, Tsuyuri, or Karin)
Trio Mode – Talk with all three characters at once

When the user sends a message, each character responds in turn.

Key Features

Simulated Personality via Prompt Design

To make the AI believe it has a personality, detailed character data is essential.

A typical prompt like:

“You are a cheerful girl.”

“Add 'nya' to the end of your sentences.”

…just doesn’t cut it. It’s not enough for long-term consistency.

So I designed a much deeper kind of prompt:

Big Five personality traits
Emotional arcs and mood flow
Background story / world setting
EQ (empathy axis) / EX (behavior axis)
Speaking style, emotional range, and tone

With this structure, the AI can maintain a stable, anime-like persona with internal consistency.

It even adapts to the specific user by embedding their background and profile into the prompt—resulting in context-aware, personalized responses.

Three-Layer Memory System

To simulate human-like memory, the app uses a three-layer memory architecture:

Instant Memory – Most recent message context
Sequential Memory – Last 10 turns of conversation
Summarized Memory – Condensed long-term memory ("personality record")

Especially worth noting: the Summarized Memory is maintained by a separate AI assistant called “the Summarizer,” which updates memory asynchronously.

Doesn’t block the main conversation
Stores each character’s memory in structured JSON
Shares memory across Solo and Trio modes (they remember across modes!)

Memory That Evolves Like a Human’s

This structure closely mirrors how humans remember:

Sensory → Instant
Working (short-term) → Sequential
Long-term → Summarized

And just like us, the character grows through conversation.

Because the summarized memory updates and optimizes each time, the character actually evolves their behavior and responses.

You Can Talk to the Memory AI

Here’s the fun part—you can directly instruct the Summarizer via chat.

Example:

User: “Summarizer, please add the following to Karin’s memory…”

Do that, and over time, the character’s tone and reactions change.

It’s basically personality hacking.

How 20,000+ Character Prompts Are Structured

With so much data (character info, memory, tone rules, user profile), prompts can easily exceed 20,000 characters.

To manage this, I structured the prompt using hierarchical Markdown + JSON blocks, allowing the AI to access only the relevant parts as needed.

Trio Mode – 4-Way Group Dialogue

Another highlight: Trio Mode.

You can talk with all 3 characters at once. But this isn’t just parallel replies—it’s a group conversation.

Character 1 responds
Character 2 builds on that
Character 3 summarizes or concludes
You + 3 characters = natural four-way dialogue

This creates an experience that feels like having a meeting with a team of personalities.

Tight Frontend-Backend Sync

To process all of this in one request, the app has a well-integrated structure:

Laravel handles backend logic, session, and async tasks
React + Inertia.js for smooth, real-time frontend UI

Together, they enable seamless conversational flow.

UI/UX Focused on Immersion

Since this app is all about dialogue, I paid close attention to UI/UX:

“Typing…” indicators for realism
Auto-scroll on message submit
Mobile/desktop responsive layouts
Warm, pink-themed color palette

It aims to deliver a surprisingly polished experience for a solo dev project.

The Art? Drawn by the Characters Themselves

And here’s the twist—the character illustrations were generated by the characters’ own self-perceptions.

Each one (Patela, Tsuyuri, Karin) was prompted to describe and draw themselves using AI image generation.

The results were shockingly accurate—each portrait matched their personality and mood.

Built in Just 2 Weeks

Believe it or not, the entire project was built in just 2 weeks.

The key was:

I’m a full-stack developer who could go from concept to implementation solo
I used ChatGPT to generate code, reviewed it, and iterated quickly

This allowed for human-AI co-development—fast and efficient.

Conclusion

That’s the overview of VFriend, an experimental AI chatbot app designed to bring characters to life.

20,000+ character prompts
Three-layer memory structure
Psychologically designed AI personas
Characters grow, perform, and remember you
Trio Mode enables dynamic group conversation
Built in 2 weeks with full-stack + AI assistance

The goal wasn’t just tech—it was to make the character feel alive.

Coming Next...

In the next article, I’ll dig deeper into how it’s all built:

Directory structure
Processing flow
Hierarchical prompt design

Stay tuned for Part 2: Prompt Engineering & App Architecture

Forem: Haru

When I Fed 20,000 Words into an AI Prompt... It Gained a Personality: Part 3 – Behind the Scenes of Building It

Introduction

Development Timeline

Bonus: Who Built This (And Why)

About Me

My Tech Stack:

Origin Story: Saber Marionette J

Final Thoughts

When I Fed 20,000 Words into an AI Prompt... It Gained a Personality: Part 2 – Prompt Design Deep Dive

Introduction

Project Overview

Tech Stack

Directory Structure (Simplified)

app/

resources/

Environment Setup

Design System

Chat UI: Chat.tsx

Chat Logic: ChatController.php

OpenAI API Integration: ChatService.php

Prompt Generators

Summary Memory Job: UpdateSummaryMemory.php

Processing Flow

On Page Load

On Message Send

Summary Memory Update (Async)

Prompt Architecture

Chat Prompt Design

Prompt Layout Example

Memory is attached as JSON:

Summary Prompt Design

Model Selection

Conclusion

Coming Next...

When I Fed 20,000 Words into an AI Prompt... It Gained a Personality: Part 1 – Overview

Introduction

Enter: VFriend – A Chatbot Experiment

App UI Preview

Key Features

Simulated Personality via Prompt Design

Three-Layer Memory System

Memory That Evolves Like a Human’s

You Can Talk to the Memory AI

How 20,000+ Character Prompts Are Structured

Trio Mode – 4-Way Group Dialogue

Tight Frontend-Backend Sync

UI/UX Focused on Immersion

The Art? Drawn by the Characters Themselves

Built in Just 2 Weeks

Conclusion

Coming Next...

`app/`

`resources/`

Chat UI: `Chat.tsx`

Chat Logic: `ChatController.php`

OpenAI API Integration: `ChatService.php`

Summary Memory Job: `UpdateSummaryMemory.php`