Persona — The Embodied WebMCP AI Agent

Persona gives AI agents a body—letting them understand your intent, act through WebMCP, and respond naturally with voice, gaze, expressions, and gestures. Making every interaction feel human.

Comment

Inspiration

We are at a strange point in the evolution of AI.

AI can reason, write code, analyze information, use tools, and increasingly perform tasks on our behalf. But when it comes time to actually interact with it, we are still mostly staring at a text box.

Type a prompt. Wait. Read a long response. Type again.

It works, but it can feel surprisingly disconnected.

I kept thinking about a simple question:

If AI is becoming capable of doing things like a person, why are we still interacting with it like a search box?

Humans don't communicate through words alone.

We use our voice. We look at each other. We react. We gesture. We pay attention. We pause. We interrupt. We change our expression when something is important.

Those small signals make communication easier to understand.

So we wanted to explore a different kind of AI interface.

What if an AI agent had a body?

That question became Persona.

The goal wasn't to create a character that simply talks to you or to make AI pretend to be human.

The goal was to explore whether an AI agent could have a presence — a way to communicate its intent through voice, attention, expressions, gestures, and visible actions while still doing useful work.

WebMCP made this idea especially interesting.

Instead of an AI agent trying to figure out which button to click or how a webpage happens to be structured, the webpage can explicitly expose capabilities that the agent can discover and use.

That gave us an opportunity to build something where the agent doesn't just talk about what it wants to do.

It can actually interact with the webpage through structured tools.

And if an agent can control actions on the web, why shouldn't it also be able to control how it communicates with the person standing on the other side of the interaction?

That became the idea behind Persona:

Give the agent a body. Give that body meaningful capabilities. Then let WebMCP connect the agent to them.

What it does

Persona is an embodied WebMCP AI agent interface.

It gives an AI agent a digital body that can listen, speak, look, react, gesture, and perform structured tasks.

Instead of treating the avatar as a visual layer placed on top of a chatbot, Persona makes the avatar part of the agent interaction itself.

A user can communicate naturally through voice, while an AI agent can discover and call WebMCP tools exposed by Persona.

The agent can:

  • Understand the user's spoken intent
  • Create tasks and missions
  • Read the current task state
  • Update tasks when requirements change
  • Complete tasks
  • Present results
  • Speak to the user
  • Change its expression
  • Direct its attention and gaze
  • Perform gestures

The WebMCP tools exposed by Persona include:

get_user_transcript
create_task
get_tasks
update_task
complete_task
show_result
speak
set_expression
set_attention
perform_gesture

This allows the agent to interact with two sides of the application:

What it is doing and how it is communicating while doing it.

For example, a user can say:

"Prepare me for a data science technical interview tomorrow."

The agent can turn that request into a structured mission instead of simply returning a large block of advice.

The user can then change their mind:

"Actually, focus much more on machine learning."

The agent can update the mission and continue from the current state.

At the same time, Persona can communicate through speech, attention, expressions, and gestures.

This creates an interaction loop where:

Human intent → Agent reasoning → WebMCP action → Application state → Embodied response

The interview-preparation scenario is our concrete demonstration of this idea.

But Persona itself isn't meant to be just an interview coach.

The larger idea is an embodied interface for web agents.

The avatar is not there just to look good.

The agent can actually control it through WebMCP.

That is what turns Persona from an animated chatbot into an exploration of what an agent-native web interface could look and feel like.

How we built it

Persona is a browser-based application built with:

  • React
  • TypeScript
  • Vite
  • Three.js
  • VRM
  • @pixiv/three-vrm
  • WebMCP
  • Web Speech API
  • Web Audio API

The project combines an agent-facing tool layer with an embodiment runtime.

WebMCP tool layer

The core of the WebMCP integration is the application's ability to expose structured capabilities through document.modelContext.

Instead of exposing arbitrary UI elements, Persona exposes tools that represent meaningful actions an agent can perform.

For example:

document.modelContext.registerTool(...)

The tools cover two main areas.

Agent actions

create_task
get_tasks
update_task
complete_task
show_result

These allow the agent to work with structured application state.

Embodiment actions

get_user_transcript
speak
set_expression
set_attention
perform_gesture

These allow the agent to communicate through Persona's digital body.

This separation was important to us.

The AI agent doesn't need to know how the avatar is implemented internally.

It doesn't need to manipulate Three.js objects, animation clips, or VRM parameters.

It can simply use a meaningful capability such as:

speak(...)
set_expression(...)
set_attention(...)
perform_gesture(...)

Persona handles the underlying implementation.

The embodiment runtime

The visual body is a VRM character rendered through Three.js.

Around that character, we built systems for:

  • Voice input
  • Voice output
  • Speech-driven mouth movement
  • Facial expressions
  • Eye gaze and attention
  • Gestures
  • Behavioral state
  • Micro-reactions
  • Interruption handling
  • Session continuity

One of the most important design decisions was separating agent intent from embodiment.

The agent decides what it wants to accomplish or communicate.

WebMCP provides the structured interface through which it can do that.

Persona's runtime determines how that intent appears to the human.

For example, the same agent decision can involve both an actual task action and an embodied response.

The agent may update a task while also speaking to the user and directing its attention toward them.

This means the avatar isn't just an animation layer.

It becomes another interface through which the agent communicates.

Why WebMCP matters here

Without WebMCP, an agent could generate instructions describing what should happen.

With WebMCP, Persona can expose the actual capabilities of the webpage in a form the agent can discover and call.

That distinction is important.

We aren't trying to make the AI look like it is operating the application.

We're giving the agent structured ways to actually interact with it.

Challenges we ran into

The difficult part wasn't putting a 3D character on a webpage.

The difficult part was making the character feel like part of the interaction rather than a decoration sitting beside a chatbot.

Voice interaction introduced several problems.

We had to handle microphone state, speech synthesis, turn-taking, interruptions, and make sure Persona didn't accidentally respond to its own generated speech.

Then we encountered a more subtle problem:

When should an AI agent actually move?

If an avatar constantly moves, looks around randomly, changes expressions without context, or performs gestures at the wrong moment, the result becomes distracting very quickly.

So we worked on behavioral state, attention, micro-reactions, speech-driven animation, and controlled gesture selection.

We also had to make sure WebMCP actions interacted with the current application state, rather than relying on stale state from the interface.

That became especially important once the agent could create, update, and complete tasks.

Another challenge was deciding how much embodiment is actually useful.

It is tempting to add more animations because they look impressive.

But we learned that more movement doesn't necessarily mean better communication.

Sometimes a small change in gaze or expression communicates more than a large gesture.

The challenge gradually changed from:

"How do we animate a character?"

to:

"How should an agent's behavior communicate its intent?"

That shift influenced a lot of Persona's implementation.

Accomplishments that we're proud of

The biggest accomplishment is that Persona went beyond:

"An AI avatar that talks."

We built a working interaction where an AI agent can use WebMCP to interact with both the work and the body of the application.

The agent can manage structured tasks while also controlling how Persona communicates with the human.

We're especially proud of the smaller pieces that make the interaction feel more alive:

  • Speech-driven mouth movement
  • Contextual facial expressions
  • Attention and gaze behavior
  • Agent-controlled gestures
  • Micro-reactions
  • Voice interaction
  • Interruption handling
  • Persistent task state
  • Structured WebMCP actions
  • Agent-controlled result presentation

None of these features alone is Persona.

Together, they create something we found much more interesting:

An AI agent that doesn't just produce an answer — it has a way to behave while working with you.

We're also proud that WebMCP isn't simply an integration hidden somewhere in the code.

It is part of the interaction model.

The agent uses WebMCP to access the application's capabilities, and those capabilities include both useful work and embodied communication.

That made WebMCP feel less like another API layer and more like a foundation for experimenting with a different kind of web experience.

Most importantly, Persona gave us a chance to explore an idea we genuinely wanted to see working:

What happens when an AI agent is no longer just a voice in a chat window, but has a presence inside the interface it is using?

What we learned

Building Persona changed the way we think about AI interfaces.

We started with a fairly simple assumption:

Better AI should mean better answers.

But as we built the project, we realized that the interface becomes increasingly important as agents become more capable.

A highly capable agent can reason, use tools, and complete tasks — but if every interaction is still reduced to a stream of text, some of that capability remains difficult for humans to understand.

Embodiment doesn't make an AI smarter.

But it can give the agent another communication channel.

A spoken response can be accompanied by attention.

A result can be presented rather than buried inside a paragraph.

A change in task direction can be reflected immediately in the interface.

An agent action can have a visible consequence.

We also learned something important while working with WebMCP.

At first, it is natural to think about WebMCP in terms of individual tools:

"What tools should we expose?"

But the more interesting question became:

"What becomes possible when the webpage itself is designed as a shared environment for humans and agents?"

That changed how we approached the project.

We stopped thinking only about how an agent could use a webpage.

We started thinking about how a webpage could be designed for both humans and agents from the beginning.

That's the direction that excites us most.

What's next for Persona — The Embodied WebMCP AI Agent

The interview-preparation experience is only our starting point.

We want Persona to become a more general embodiment layer for web agents.

The same foundation could eventually support:

  • Learning companions
  • Presentation and communication practice
  • AI coaching
  • Simulations and role-play
  • Customer-facing agents
  • Collaborative work assistants
  • Interactive education
  • Accessibility-focused interfaces

We also want to explore deeper coordination between an agent's reasoning, tools, memory, and physical behavior.

For example, an agent shouldn't simply perform an action and then announce it.

Its behavior could help communicate why it is doing something, what changed, and what needs the user's attention.

But we also want to be careful about embodiment.

The goal isn't to make AI theatrical or constantly animated.

The goal is to make interaction more understandable, expressive, and human-friendly.

As agents become capable of doing more work on behalf of people, we believe the interface between humans and those agents will matter just as much as the underlying intelligence.

Today, most AI interfaces ask humans to adapt to machines.

We want to explore the other direction:

What if machines could adapt to the way humans naturally communicate?

WebMCP gives agents a structured way to interact with the web.

Persona explores what that web could feel like when the agent has a presence inside it.

And that's the experiment we're taking forward:

Don't just give an AI agent a brain. Give it a way to be present.

Built With

Share this project:

Updates

Submission history