FluencyLab

Inspiration

FluencyLab started from a simple problem: knowing what you want to say and being able to communicate it clearly under pressure are two different things.

This comes up in interviews, meetings, presentations, and everyday workplace conversations. Someone may understand their work well but still struggle to organize their thoughts quickly, explain an idea concisely, or respond confidently when put on the spot.

I wanted to explore what a focused practice environment for those moments could look like. So, I designed FluencyLab as a communication training simulator where users can practice responding to realistic prompts, receive structured feedback, and try again.

For this prototype, I focused on interview and workplace communication practice.

What I Built

FluencyLab is a web-based communication training simulator for practicing clearer writing and speaking-style responses under time pressure.

The prototype uses a structured prompt bank with different practice scenarios. A user can receive a prompt, write a response, and get feedback across areas such as:

• Clarity
• Structure
• Vocabulary
• Confidence

FluencyLab also provides an improved sample response so the user can compare it with their first attempt and then try the exercise again.

The core practice loop is:

Choose a drill → Respond → Get feedback → Retry

I exposed this workflow through WebMCP tools so an AI agent can work with FluencyLab without having to guess how the app works or what actions are available.

For example, a user can tell an agent:

"I have an interview tomorrow. Help me practice explaining my experience clearly and concisely."

From that goal, the agent can use FluencyLab's WebMCP tools to choose a relevant practice prompt, let the user respond, analyze the response, and help them try again.

How I Built It

FluencyLab is currently a lightweight web prototype built with HTML, CSS, and JavaScript.

The application uses client-side routing for the different sections and practice flows, and a structured prompt bank provides the scenarios used during practice.

For the WebMCP integration, I exposed parts of the FluencyLab practice flow as tools an agent can use. The tools allow the agent to generate a practice prompt, analyze a user's response, and retry the same exercise.

One of the things I had to think carefully about was what should actually become a WebMCP tool. I wanted each tool to map to something useful that already happens within FluencyLab.

The app can still be used normally through its interface, but WebMCP gives an agent a structured way to understand what FluencyLab can do and guide the user through the same practice experience.

Challenges

One of the biggest challenges was deciding what should become a WebMCP tool.

It would have been easy to expose many small UI actions, but I didn't think that would necessarily make the agent experience useful. Instead, I had to think about the user's actual goal. What is the user trying to accomplish, and what does the agent need from FluencyLab to help them do it?

Another challenge was deciding how much to build for the prototype. FluencyLab does not yet have a large dynamically generated library of scenarios, so I used a structured prompt bank and made it possible for the agent to choose the right practice flow based on what the user wants to work on.

This gave me a practical way to demonstrate the WebMCP experience without building functionality that wasn't necessary for the prototype.

What I Learned

Building FluencyLab with WebMCP made me think differently about how a website can work with an AI agent.

When building for the web, I normally think about what a person sees and interacts with: pages, buttons, forms, navigation, and the steps they take to complete something. With WebMCP, I also had to think about how an agent knows what the application can do.

Instead of having the agent look at the page and try to figure out which buttons to click, FluencyLab can expose specific actions as tools. The agent knows those actions are available and can use the ones that make sense for what the user is trying to accomplish.

I also learned that deciding how those tools should work is as much a product-design question as it is a technical one. What you call a tool, what it does, what information it needs, and what it returns all affect how well an agent can use it.

What's Next

There is still a lot I would like to explore with FluencyLab.

I would like to expand the prompt library with more interview scenarios, meetings, presentations, difficult workplace conversations, and writing exercises. I would also like to add actual voice-based practice so users can respond verbally instead of typing a response to simulate speaking.

Longer term, I would like FluencyLab to recognize areas a user repeatedly struggles with and use that to suggest what they should practice next or gradually introduce more challenging scenarios.

I would also like to explore what more of the FluencyLab experience could be exposed through WebMCP as the product grows, while keeping the main idea simple: helping people practice expressing what they already know more clearly and confidently.

Built With

• codex
• css
• github
• html
• javascript
• pwa
• supabase
• vercel
• webmcp