AG-Slide

• 

  Integrated Tools

• 

  Generated a Slide using Prompt

• 

  Landing Page

• 

  Code of Integrated Tool such as Set Deck Theme

• 

  Presenting the Slides Feature

Inspiration

Presentation tools are designed primarily for humans, while AI agents often interact with applications indirectly through prompts, APIs, or simulated UI actions. We wanted to explore a different model: what if an AI agent could become a first-class user of a web application?

That idea led to AG-Slide, a presentation editor built around WebMCP. The goal is not simply to generate slides with AI but to let a human and an AI agent collaboratively work on the same live presentation.

What it does

AG-Slide provides a real-time presentation canvas where users can create, edit, and organize slides while an agent can directly operate the application through structured tools.

The application exposes four core tools:

• ``— create a new presentation slide
• ``— modify slide content
• ``— change the presentation theme
• ``— add data-driven metric cards

Instead of an agent trying to understand buttons, DOM elements, or screen coordinates, it can use structured capabilities exposed by the application.

For example, a user can ask:

"Create a slide about market opportunity with three metrics."

The agent translates that intent into structured tool calls, executes them, and the presentation updates immediately on the same canvas.

Human + Agent Collaboration

The most important part of AG-Slide is the shared application state.

Humans can edit slides manually while the agent can modify the same presentation through tools. Every agent action is visible in the Agent Inspector, including the tool name, arguments, execution status, and result.

This makes the interaction transparent instead of treating AI as a black box.

How we built it

Ag-Slide is built with Next.js, React, TypeScript, Tailwind CSS, Zustand, and Lucide React.

The core architecture follows:

User / Agent → Tool Call → Validation → Tool Executor → Zustand → Live Canvas

We also built an agent simulator with a deterministic fallback so the core experience works without requiring an external AI API. This allowed us to focus on demonstrating the WebMCP interaction model reliably.

Challenges

The biggest challenge was designing the boundary between the agent and the application state. We wanted agent actions to be real application operations rather than simulated UI interactions.

We also had to make tool execution observable and reliable while keeping the interface simple enough for a human to understand what the agent was doing in real time.

What we learned

Building Ag-Slide changed our perspective on agentic applications. The interesting question is not only "How can AI generate content?" but also "How can applications expose meaningful capabilities that agents can use?" WebMCP provides a compelling direction for this: instead of building AI around a UI, applications can make their functionality directly understandable and usable by agents.

AG-Slide is our exploration of what that future could look like for creative software.

Built With

• ai
• context
• css
• html
• javascript
• lucide
• model
• next.js
• protocol
• react
• tailwind
• typescript
• webmcp
• zustand