Actionflow

AI

Comment

ActionFlow — Hackathon Submission

Inspiration

Most AI web applications today stop at giving answers. We wanted to build something that could actually help users accomplish tasks on the web.

Our biggest inspiration was the idea that WebMCP should be a first-class part of the product, rather than something added at the end just to say that the project uses MCP.

We imagined a system where a user can describe a goal in natural language, and an AI agent can discover the capabilities available through WebMCP, plan the necessary steps, execute them, and keep the user in control of important actions.

That led us to ActionFlow: an AI-powered web agent designed around the principle of:

Tell it what you want accomplished, not which buttons to click.

What it does

ActionFlow converts natural-language goals into actionable workflows.

A user can give ActionFlow a request such as:

“Find the best Java development internships for me, compare the opportunities, and prepare the applications for the top matches.”

ActionFlow then:

  1. Understands the user's objective.
  2. Breaks the objective into smaller tasks.
  3. Discovers and selects appropriate WebMCP capabilities.
  4. Collects and analyzes information.
  5. Compares and ranks results.
  6. Builds an execution plan.
  7. Requests user approval before consequential actions.
  8. Executes approved actions through WebMCP.
  9. Verifies the result.
  10. Records the complete workflow in an activity log.

The application also provides a WebMCP Tool Explorer, allowing users and judges to see exactly which capabilities the agent is using.

How we built it

ActionFlow is built as a full-stack application with an AI-agent layer at its center.

Frontend

We built the interface using:

  • React
  • TypeScript
  • Vite
  • Tailwind CSS

The frontend provides the command center, agent execution view, approval interface, WebMCP tool explorer, and activity history.

Backend

The backend is designed around:

  • Java
  • Spring Boot
  • REST APIs
  • PostgreSQL
  • Real-time agent execution updates

The backend manages users, tasks, workflows, tool execution, approvals, and activity logs.

AI Agent

The agent follows a structured workflow:

Understand → Plan → Discover → Execute → Observe → Reason → Verify

Rather than hard-coding a sequence of UI interactions, the agent can select the appropriate capabilities based on the user's objective.

WebMCP

WebMCP is the key part of ActionFlow.

We expose meaningful capabilities such as:

  • search_web
  • extract_information
  • compare_results
  • analyze_requirements
  • create_plan
  • request_approval
  • execute_action
  • verify_result

This makes WebMCP part of the application's core architecture, rather than a superficial integration.

Safety

ActionFlow also uses an approval layer.

The agent can research and prepare actions autonomously, but potentially consequential actions require explicit user approval.

Challenges we ran into

One of our biggest challenges was deciding where WebMCP actually provides value.

It would have been easy to build a conventional web application and expose a few functions as MCP tools. However, that would not demonstrate the real potential of the technology.

We therefore had to rethink the architecture around capabilities rather than pages and buttons.

Other challenges included:

  • Designing useful high-level WebMCP tools.
  • Coordinating multiple tool calls within one workflow.
  • Maintaining state across multi-step tasks.
  • Handling failures and unexpected tool results.
  • Designing approval points without making the experience frustrating.
  • Making the agent's actions understandable to the user.
  • Keeping the architecture flexible enough to add new capabilities later.

The hardest conceptual challenge was balancing autonomy with control: the agent should be capable of accomplishing meaningful tasks while the user remains in charge of consequential decisions.

Accomplishments that we're proud of

We're especially proud that WebMCP isn't simply an additional feature in ActionFlow.

It is part of the fundamental interaction model.

We created a workflow where:

Natural language → AI planning → WebMCP capabilities → real actions → verification

We are also proud of the transparency of the system.

Instead of hiding what the AI is doing, ActionFlow exposes the workflow through its activity log and tool explorer.

Users can see:

Understanding request
        ↓
Planning workflow
        ↓
Discovering WebMCP capabilities
        ↓
Executing tools
        ↓
Analyzing results
        ↓
Requesting approval
        ↓
Executing approved action
        ↓
Verifying result

This makes the system easier to understand, debug, and trust.

What we learned

We learned that building an agentic application is very different from building a traditional web application.

A traditional application generally follows:

User → UI → API → Database

ActionFlow follows a much more dynamic model:

User → Goal → Agent → Capabilities → Results → Reasoning → Action

We also learned that tool design matters as much as model intelligence.

Giving an agent poorly designed tools can make an otherwise capable agent ineffective. High-level, well-defined capabilities allow the agent to reason about what it can accomplish rather than simply reproduce a predefined workflow.

Most importantly, we learned that WebMCP becomes significantly more interesting when it is treated as an interface between an intelligent agent and real web capabilities, rather than merely another API format.

What's next for ActionFlow

ActionFlow is designed to grow into a general-purpose web task orchestration platform.

Our next steps include:

More WebMCP capabilities

Add specialized tools for:

  • Research
  • Shopping
  • Travel
  • Education
  • Developer workflows
  • Job and internship discovery
  • Productivity

Multi-agent workflows

Different specialized agents could collaborate:

Research Agent
       ↓
Analysis Agent
       ↓
Planning Agent
       ↓
Execution Agent
       ↓
Verification Agent

Personalization

ActionFlow could learn user preferences, constraints, and recurring workflows while keeping the user in control of their data.

Better verification

Future versions will automatically verify whether an action actually achieved its intended outcome instead of assuming successful execution.

Workflow marketplace

Eventually, users could discover and share reusable ActionFlow workflows for common tasks.

The bigger vision

Our long-term goal is simple:

Turn the web from something users manually navigate into something AI agents can safely and meaningfully operate on their behalf.

ActionFlow is our first step toward that vision.

Built With

  • api
Share this project:

Updates

Submission history