Teresct

Inspiration

AI is great explainer, but it struggles to explain with the diagrams. Humans , we have evolved by learning faster by seeing rather than plain text, so Teresct connects AI explanations with visual learning through clean, structured diagrams.

What it does

Teresct lets make AI agents to use WebMCP to create and edit Excalidraw diagrams. It generates connected concepts, circular nodes, labeled arrows, semantic colors, and organized layouts that make complex ideas easier to understand.

How we built it

We built Teresct with Next.js, React, TypeScript, the official Excalidraw library, WebMCP, Zod validation, deterministic graph layouts, and Convex persistence.

Challenges we ran into

The biggest challenges were converting connecting the nodes to correct diagram and looks great and neat

Accomplishments that we're proud of

We created a WebMCP-first diagram workspace where AI agents can directly build and revise visual explanations.

What we learned

Using WebMCP

What's next for Teresct

Next, I want to add AI-generated animations that reveal each step of a diagram in sequence, highlight active connectors

I want try to any animations lib's and connect to webMCP make it neat explaining animations on the web

Built With

• nextjs
• openai
• react
• webmcp