Project Info
Inspiration
In subjects like math or physics, working through practice problems is often crucial for learning concepts effectively. This works sometimes without external help but eventually students will get stuck or be left wondering if they're on the right track. A tutor could help, but tutors are expensive and aren't always available. ChatGPT exists, but all it can do is give students the answers, there is no learning process involved by just being given a solution. Socratical brings the following to the table: 1. A pedagogy conducive to all learning Socratical makes the Socratic method scalable. Most students may never get a tutor that's this patient or accessible. Now they can work through any problem visually, on a canvas that feels natural, while an AI guides their thinking rather than just checking their answers. Unlike human tutors, Socratical isn't limited to math. Any problem that can be worked out on a whiteboard is fair game with Socratical: calculus, physics, biology, discrete math, Leetcode, System Design, the same method still applies. 2. Why vs What The turn-based dialogue the interface provides creates a richer experience than ChatGPT. The tutor can ask direct questions in the chat window and also directly manipulate the canvas to simulate an actual live tutoring session. The tutor doesn't stop at the answer however, it constantly probes for the user's input on edge cases and real-life applications. The user will understand why the problem solving process works rather than just knowing that it works. 3. Performance anxiety A student can work at their own pace, make mistakes privately, and get helpful guided questions instead of being told that they're wrong. That's psychologically different from a student raising their hand in class. How I built it I started by extending an open-source lightweight interactive canvas library called tldraw. The goal of the implementation was to enable the AI to see and interact with the canvas to provide the best learning experience for the user using the canvas' APIs. I used Claude Sonnet 4 as the multi-modal model along with Vercel's AI SDK to implement features such as streaming and tool calls seamlessly. I hosted it on Vercel making use of Vercel functions and Fluid Compute to make API calls feel instant. Challenges I ran into Working with a canvas library and its APIs was a first for me. I had to design helper functions to create screenshots and calculate annotation positions on the canvas. I also had issues with synchronization and timing LLM responses with rendering. Thankfully the Vercel AI SDK abstracted away some elements such as streaming but I had to implement my own custom hooks and components to render annotations. Accomplishments that I'm proud of This is the first hackathon I've ever done solo and so, this is a project that I completely own and am proud of in so many ways. To me this is a totally new interaction model that no chat bot like ChatGPT can easily replicate. Technically speaking, I'm proud of the decisions I made regarding the tech stack and architecture. This project was complex but scoped down enough to fit inside a weekend-long hackathon and I'm glad I made the right calls so that the project didn't become an insurmountable task. What I learned Even though I'd say I have a decent amount of experience in web dev, interfacing with a non-standard interaction model (that being a drawable canvas) was a new experience for sure. I had to consider rendering strategies, complex state management, and finally understanding what useRef was good for.
What's next
Right now, Socratical exists on a session by session basis, meaning conversations and previous work aren't stored anywhere. Data persistence was intentionally left out for the sake of time, but is an important feature to implement in the future. As frontier models improve, their 'vision' may get better but I imagine messy handwriting or complex diagrams may overwhelm Socratical as of now. I hope to come up with ways to inject more context (perhaps making use of tldraw's APIs) into Socratical so that it could understand more complex problems. I also want to use Vercel's AI SDK to its fullest by implementing agentic workflows that could help the AI make better decisions such as using Desmos to plot graphs or an external calculator to validate answers.
Socratical
Philosophize your toughest subjects.
🏆 Winner of the Vercel Track at Cruzhacks 2026
try it out here.
This is a Next.js project bootstrapped with create-next-app.
Getting Started
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
Open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.
Learn More
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
Deploy on Vercel
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.
Analysis
View
Metric
- 74
- 19
Figures cover GitHub contributors during the hackathon window. A co-authored commit counts in full for each author, so per-member totals add up to more than the whole-team figures.
Technology
- CSSIn code
- Next.jsIn code
- ReactIn code
- Tailwind CSSIn code
- TypeScriptIn code
- Vercel AI SDKIn code
- VercelClaimed
6 of 7 appear in the indexed code. 1 claimed on Devpost could not be matched to code, which may simply mean the tool leaves no trace in the repository.
AI coding agents
- Claude CodeCommits
Detected from committed agent config files and commit authorship. Absence of a signal is not proof an agent was unused.
Codebase size
Source size
503 KB
Source files
101
Counts recognized source files only; vendored directories, binaries and lockfiles are excluded, so this is smaller than the repository on disk.
Repository
vinngo/socratical
116 files · 1.1 MB · @ dd72f32
Structure
Interface
62 files · 53%Screens, components and styles rendered to the user.
+1 moreAPI & routing
2 files · 2%Request entry points: routes, handlers and controllers.
Application logic
9 files · 8%Domain rules, services and shared utilities.
Supporting
Layers are inferred from where files sit in the tree, not from reading the code. A project that names its directories unconventionally will read oddly here — open the file browser to check anything the diagram implies.
Languages
- TypeScript53%
- Markdown46%
- CSS1%
Share of indexed source by file size. Binary and vendored files are excluded.
Dependencies
package.json
npm · 42- @ai-sdk/react
- @radix-ui/react-collapsible
- @radix-ui/react-dialog
- @radix-ui/react-dropdown-menu
- @radix-ui/react-hover-card
- @radix-ui/react-progress
- @radix-ui/react-scroll-area
- @radix-ui/react-select
- @radix-ui/react-separator
- @radix-ui/react-slot
- @radix-ui/react-tooltip
- @radix-ui/react-use-controllable-state
- @xyflow/react
- ai
- class-variance-authority
- clsx
- cmdk
- embla-carousel-react
- +24 more
Declared in the repository’s manifests at the indexed commit. A declared package is not proof it is used, and runtime dependencies are listed first.
This project’s features have not been analysed yet.
Export this project's context (description, README, evidence, key source files) to chat with an AI agent elsewhere.