Task-Liaison: AI Command Center

• 

  Task-liaison

Inspiration

Drawing from my background as a certified Google Cloud Professional Cloud Architect, I've seen firsthand how chaotic infrastructure incident management can be. When a GKE node pool fails or a Cloud SQL database spikes, the resolution process is usually a messy combination of frantic Slack messages, manual Jira routing, and repetitive UI clicks. I wanted to see if the new WebMCP standard could transform an LLM from a passive conversational chatbot into an active, operational partner that orchestrates incident workflows directly on the canvas.

What it does

Task-Liaison is an AI-orchestrated command center for infrastructure escalations. Instead of clicking through menus, engineers talk to the board. The application uses a three-column Kanban layout:

• The Command Center: Unassigned, critical incidents.
• The Priority Reward Exchange: An incentivized bounty market where the AI can dynamically price and route tasks.
• Active Engineering Workloads: Real-time on-call assignments.

By exposing strict JSON-schema React state mutations to the LLM's runtime environment, the AI can map cascading blast radiuses, re-route workloads between engineers to prevent burnout, and stage mock Infrastructure-as-Code (Terraform/Bash) patches. Crucially, the system enforces Human-in-the-Loop execution: the AI stages the complex configurations, but human engineers retain physical click-approval authority to apply the patches.

How we built it

Task-Liaison is a frontend-only React application built on the Next.js framework and styled with Tailwind CSS. The core innovation lies in leveraging the document.modelContext API. I registered custom JavaScript tools (post_bounty_to_market, propose_ticket_swap, analyze_blast_radius, stage_remediation_script) with rigid input schemas. When the user types a natural language command, the LLM extracts the parameters, maps them to the schema, and triggers instantaneous React state mutations without any backend database.

Challenges we ran into

Maintaining the state synchronization between a non-deterministic AI and a deterministic frontend UI was the biggest hurdle. During development, local hot-reloading would frequently wipe the WebMCP tool registrations from the AI's memory, causing the LLM to fall back into "chatbot mode" where it would hallucinate actions instead of firing the API tools. I had to implement strict lifecycle management using React useRef and useEffect hooks to ensure the JSON contracts remained tethered to the agent's context window.

Accomplishments that we're proud of

I am exceptionally proud of the closed-loop execution flow. When a user tells the AI to "stage a mock Terraform script for INC-102," the AI perfectly formats the code block, injects it into the specific React component, and generates an actionable "Approve & Execute" button. Successfully blending AI-driven state mutations with human-driven React onClick events proves that AI can be trusted in enterprise operational environments if constrained by the right UI boundaries.

What's next for Task-Liaison

The next step is backend integration. While this MVP handles state in the browser to prove the WebMCP concept, the natural evolution is tying the execute blocks to authenticated webhooks—allowing the AI to actually update live Jira tickets, trigger PagerDuty alerts, or execute validated Terraform plans directly against a GCP environment.

Built With

• ai-agent
• llm
• next.js
• react
• tailwind-css
• typescript
• vercel
• webmcp