CineOps — AI Film Production Agent

create project
add scene
shots
Budget Planning
agent workflow

Film production involves many connected tasks: planning scenes, creating shot lists, estimating budgets, and organizing shooting schedules. These tasks are often handled across different tools, making it difficult for filmmakers to keep everything connected.

I wanted to build CineOps, a production workspace where humans and AI agents can work together. The idea was to let a filmmaker enter real production information while an AI agent can use structured tools to help with repetitive planning tasks.

What I Built

CineOps is an AI-assisted film production planning application that brings the core production workflow into one place.

A filmmaker can:

Create a film project with its title, genre, duration, and budget. Add scenes with location and time-of-day information. Generate a structured five-shot camera plan. Estimate a production budget. Optimize the proposed budget. Review and approve budget changes. Create a multi-day shooting schedule. Monitor actions through an agent activity panel.

The important part is that these capabilities are exposed as WebMCP tools, allowing compatible AI agents to interact with the application through structured tool calls.

Why WebMCP?

WebMCP makes the application more than a traditional web interface.

Instead of an AI agent only giving suggestions as text, CineOps exposes actual application capabilities such as:

create_project add_scene generate_shot_list estimate_budget optimize_budget create_schedule

This allows people and agents to work together on the same production workflow.

For example, a filmmaker can provide the production information, while an agent can help generate a shot list, estimate costs, and organize the shooting schedule. The filmmaker can then review the results and remain in control of important decisions such as budget optimization.

How I Built It

CineOps was built as a modern React and TypeScript web application using Vite.

The main technologies used are:

React TypeScript Vite WebMCP / Model Context API Lucide React Vercel for deployment GitHub for open-source project hosting

The WebMCP integration registers structured tools using document.modelContext.registerTool(). Each tool has a name, description, input schema, and execution function.

The application state is updated when tools execute, allowing agent actions to be reflected directly in the user interface.

What I Learned

Building CineOps taught me how to think about AI applications beyond chat interfaces.

I learned how to:

Design structured tools for AI agents. Define tool input schemas. Connect agent actions with React application state. Build human-in-the-loop workflows. Handle TypeScript interfaces and browser APIs. Debug integration and build errors. Deploy a React application to Vercel. Design an application around the idea of agent + human collaboration.

One of the biggest lessons was that an AI agent becomes much more useful when it can interact with real application capabilities instead of only generating text.

Challenges

One of the biggest challenges was integrating WebMCP with a TypeScript React application because the modelContext API is not part of the standard TypeScript DOM definitions used by the project.

I had to create appropriate TypeScript interfaces and handle the availability of document.modelContext safely.

Another challenge was making sure the tools were registered only when they were not already available, while also preventing duplicate registration.

I also had to debug build errors, TypeScript errors, and deployment issues before getting the application running successfully on Vercel.

What Makes CineOps Different

CineOps focuses on a practical human-in-the-loop workflow.

The goal isn't to replace the filmmaker. Instead:

Human provides context → Agent performs structured tasks → Human reviews → Human approves important decisions.

This creates a workflow where AI can reduce repetitive production-planning work while the filmmaker maintains control.

Future Improvements

Future versions of CineOps could include:

AI-generated production breakdowns. More advanced scheduling based on locations and cast availability. Real-time collaboration between production team members. More detailed budget categories. AI-assisted script-to-shot-list generation. Integration with real production management systems. More sophisticated WebMCP tools for production workflows.

CineOps demonstrates how WebMCP can turn an ordinary web application into an agent-ready workspace where humans and AI can work together on real tasks.