Loan Tracker MCP

A loan-tracker built with no input fields. There's a microphone button and a transcript. You ask in plain English. The page asks the MCP server, the MCP server hits the database, the answer comes back as text and (optionally) speech.

I built it because “agentic website” was the phrase everyone was throwing around and nobody could tell me what it concretely meant. So I built one.

A web app surface is normally a typed contract: every action is a form field, a button, a route. The user has to learn the contract before they can use the app.

An agenticsurface inverts that. The contract lives behind the screen — exposed as an MCP server with structured tool definitions. The user speaks in their own words; an LLM-mediated router picks the right tool, fills the parameters, and the page reacts to the result. The screen is still useful (it visualizes state) but it's no longer the protocol.

The practical consequence: every UI affordance — search, filter, add, edit, summarize — becomes a tool definition the agent can pick from. Adding a new capability is adding a new tool, not adding a new screen.

• Next.js + Vercel for the page itself.
• MCP server exposing the loan-data CRUD operations as structured tools.
• Web Speech API for live transcription on the client.
• OpenAI / Claude for the natural-language → tool-call mapping.
• The whole thing is < 1000 lines.

Most “AI features” bolted onto existing apps are a sidebar with a chat widget. That's a sidekick, not an agent. An agentic app makes the agent the primary interface — and the screen becomes a state visualizer instead of a control panel. This is a small demo proving the shape is real.