AI-Native Contract Maker with WebMCP

A bilingual contract maker where humans and AI agents safely draft, edit, validate, review changes, and undo contract updates through WebMCP.

Comment

Inspiration

I am not confident in English, so I am using translation tools to help write this submission.

I am a self-employed business owner running a food truck, and I also enjoy programming as a hobby.

I already had a smartphone-friendly contract maker on my own website. When I found this WebMCP Challenge, I decided to experiment with extending that existing application with WebMCP.

I wanted to see whether an AI agent could work with a real web application in a more structured way, while still keeping important actions under human control.

What it does

AI-Native Contract Maker with WebMCP is a browser-based contract drafting application where humans and AI agents can collaboratively create and edit contracts through structured WebMCP tools.

The AI agent can:

  • Inspect the current contract state
  • Create a contract from natural-language instructions
  • Update only selected fields
  • Switch between Japanese, English, and bilingual Japanese-English output
  • Edit individual clauses
  • Validate missing fields, dates, and bilingual consistency
  • Review AI change history
  • Undo the latest AI edit

For example, a user can ask the AI to change only Party B's address. The WebMCP tool updates only that field and records the before-and-after values.

The user can then undo the latest AI change and restore the previous state.

PDF export is intentionally kept as a human-confirmed action.

How we built it

The application is built with HTML, CSS, JavaScript, WebMCP, and Netlify.

WebMCP tools are registered in the application using structured tool definitions. These tools provide operations for contract inspection, targeted field updates, language switching, clause editing, validation, change history, undo, and activity monitoring.

I also added a WebMCP Tool Activity panel so users can see when a real WebMCP tool has been executed, including the latest tool call and execution status.

Contract data is processed in the browser and is not intentionally stored in a server-side database.

The original browser-based Contract Maker existed before the WebMCP Challenge. During the challenge period, I extended it with WebMCP support and AI-agent collaboration features. The public GitHub repository preserves the original pre-WebMCP version as its first commit so the challenge-period development can be clearly distinguished.

Challenges we ran into

One of the biggest challenges was determining whether the AI was actually using WebMCP or simply interacting with the normal browser interface.

To solve this, I added the WebMCP Tool Activity panel directly to the application. It makes real WebMCP tool calls visible and distinguishable from ordinary browser interaction.

Another challenge was making partial edits reliable. An instruction such as "change only Party B's address" should not modify unrelated contract fields.

I also wanted AI actions to remain reversible and understandable, so I added before-and-after change history and undo support.

Accomplishments that we're proud of

I am especially proud that the application demonstrates several human-AI collaboration patterns in one working web application:

  • Real WebMCP tool execution
  • Natural-language contract creation
  • Targeted field editing
  • Japanese-English bilingual contracts
  • Structured validation
  • Before-and-after change history
  • Undo support
  • WebMCP activity monitoring
  • Human confirmation before PDF generation

The final PDF cannot be automatically generated by the AI. The user remains in control of the final action.

What we learned

Before this challenge, I had no practical experience building with WebMCP.

Through this project, I learned how a website can expose structured capabilities directly to an AI agent instead of requiring the agent to rely only on visual browser interaction.

I also learned how important transparency, reversibility, targeted editing, and human confirmation are when an AI agent can modify real application state.

What's next for AI-Native Contract Maker with WebMCP

I would like to continue improving:

  • Agent-assisted contract validation
  • Multilingual contract support
  • More granular human approval controls
  • Additional contract templates
  • Safer and more transparent human-AI collaboration

The broader goal is to explore how existing web applications can become interfaces designed for both humans and AI agents without sacrificing human control.

This application assists with contract drafting and does not provide legal advice. Users should review all terms before using a generated contract.

Built With

Share this project:

Updates

Submission history