Prompt Lab

• 

  Create, organise, and manage reusable prompts in one workspace.

• 

  Browse a structured prompt library with categories, ratings, and reusable templates.

• 

  Build specialised AI agents and manage their prompts directly inside Prompt Lab.

• 

  Discover community prompts and reusable workflows created for different use cases.

• 

  Create and test prompts with structured inputs, variables, and AI-assisted generation.

Inspiration

Prompt engineering is becoming an important part of how people work with AI, but good prompts are often scattered across documents, chats, notes, and different AI tools.

We wanted to build a place where prompts could be treated as reusable assets rather than disposable messages.

That led to Prompt Lab — an agent-ready prompt library where humans can create, organise, improve, and reuse prompts, while AI agents can interact with the same library through WebMCP.

What it does

Prompt Lab helps users:

• Create and organise reusable prompts
• Group prompts into categories
• Build specialised AI agents
• Generate prompts through agent conversations
• Select and save useful prompts directly from the chat
• Search, update, and manage an existing prompt library

With WebMCP, Prompt Lab also exposes structured actions to AI agents.

Instead of an agent visually interpreting the interface and guessing which buttons to click, it can discover supported actions such as creating, searching, retrieving, or updating prompts and execute them directly through the website.

This creates a shared workspace where both humans and agents can work with the same underlying prompt library.

Why WebMCP

Prompt Lab is a strong fit for WebMCP because the product contains many structured actions that are useful to both people and AI agents.

Traditionally, an AI interacting with a website may need to rely on screenshots, DOM interpretation, or browser automation.

WebMCP allows us to expose the capabilities of Prompt Lab explicitly.

For example, an agent can understand that the application supports actions such as:

• search_prompts
• get_prompt
• create_prompt
• update_prompt
• delete_prompt
• create_agent
• get_agent_prompts

This makes agent interactions more reliable, understandable, and efficient.

It also creates a better user experience because a user can describe what they want naturally while the agent performs structured operations within Prompt Lab.

How we built it

Prompt Lab was built as a modern web application using React, TypeScript, Vite, and supporting backend/data services.

We designed the product around two main experiences:

1. A human-facing prompt management interface
2. An agent-facing capability layer powered by WebMCP

For the WebMCP implementation, we registered application capabilities using document.modelContext.registerTool(...).

Each tool includes a clear description, input schema, validation, execution logic, and structured output.

Where possible, the WebMCP tools reuse the same underlying application logic as the normal user interface rather than creating a completely separate system.

This means both humans and agents operate on the same prompt data and workflows.

We also designed the agent chat so generated prompts can become interactive content directly inside the AI response. Users can select the prompts they want and save them into their library without switching to a separate workflow.

Challenges we faced

One of the biggest challenges was understanding how WebMCP should fit into an existing product architecture.

It was tempting to treat WebMCP as a separate integration layer with duplicated application logic, but we learned that a better approach is to expose existing product capabilities through shared services.

We also faced challenges around:

• Detecting whether WebMCP was available in the current browser environment
• Preventing duplicate tool registration during development
• Keeping the application functional in browsers without WebMCP support
• Designing tool schemas that were simple for agents to understand
• Making agent-generated prompts interactive without duplicating the same content elsewhere in the UI
• Maintaining a consistent experience between human-driven and agent-driven actions

Another challenge was designing the demo itself. We wanted to demonstrate WebMCP as more than browser automation, so we focused on showing an agent interacting with Prompt Lab through clearly defined application capabilities.

What we learned

The project changed how we think about websites designed for AI agents.

A website no longer has to expose functionality only through buttons, forms, and visual interfaces.

With WebMCP, applications can expose their capabilities directly to agents while still maintaining a normal interface for humans.

We learned that the strongest implementation is not about adding as many tools as possible. It is about exposing a small set of useful, well-defined actions that map directly to real product capabilities.

We also learned that designing for humans and agents together creates new product possibilities. Instead of replacing the human interface, the agent becomes another way of interacting with the same application.

What's next

We would like to continue developing Prompt Lab into a broader collaborative prompt workspace.

Future improvements could include:

• Prompt version history
• Shared team libraries
• Agent-created prompt collections
• Prompt performance and evaluation data
• More advanced search and filtering
• Additional WebMCP capabilities
• Cross-agent prompt sharing
• Collaborative workflows where humans review and approve agent-generated changes

Our broader goal is to explore what software looks like when websites are designed from the beginning for both humans and AI agents.

Built With

• chatgpt
• openai
• supabase
• typescript
• vite