# How to Vibe Code Your Own Connected Papers (and Stop Paying for It) > Find and explore academic papers in a visual graph - Site: https://connectedpapers.com - Category: Research & Academic Tools - Platforms: Web app - Verdict: **Solid side project** (72/100 vibecodeable) - Estimated effort: 2-3 weekends of focused building ## Verdict Build a personal research graph clone in a few weekends; the main hurdle is mapping bibliographic data into a smooth force-directed graph UI. Building a personal-use clone of Connected Papers is an engaging and entirely feasible side project for a developer using AI coding agents. You do not need to host hundreds of millions of papers yourself; instead, you query the Semantic Scholar API on demand to pull a seed paper's references and citations. The core algorithmic challenge involves computing co-citation and bibliographic coupling scores across those nodes to build an adjacency matrix. Once computed, a force-directed graph library like D3.js handles the interactive visual layout in the browser. You will spend most of your debugging time dealing with sparse metadata from academic APIs, normalizing missing abstracts or publication dates, and tweaking force simulation parameters so the graph clusters make intuitive sense. Because this is for personal use, you skip billing infrastructure and multi-tenant scaling entirely. ### What you can't replicate - Their exact production caching layer and pre-computed similarity matrices for millions of obscure papers - Institutional group billing and enterprise procurement pipelines ## What it does A visual discovery and literature review tool that maps out related academic literature based on a similarity metric derived from co-citation and bibliographic coupling. ### Core features - Seed paper input via DOI, title, or keywords - Academic metadata and citation network retrieval via external APIs - Co-citation and bibliographic coupling similarity algorithm execution - Force-directed graph layout engine for interactive node visualization - Interactive node cards displaying abstract, authors, and citation counts - Path highlighting and multi-origin graph exploration ## The business ### Pricing - Free: $0 / forever - Academic / Personal Paid Plan: $3 to $6 / mo - Business & Group: Custom Founded 2020. Team size: Small indie team. ## The hard parts - Implementing efficient matrix multiplication or clustering for co-citation similarity across thousands of neighborhood papers - Optimizing browser rendering of force-directed graphs with hundreds of interconnected nodes without UI stutter - Handling rate limits and data mapping discrepancies from external academic indices like Semantic Scholar API - Managing responsive node selection states and smooth zoom/pan transformations on canvas or SVG elements ## How to vibe code Connected Papers ### Prerequisites - Node.js (free): Required runtime environment for the Next.js full-stack framework and package manager. - Semantic Scholar API Key (free): Free developer API key to fetch academic paper metadata, references, and citation lists without hitting strict rate limits. - GitHub (free): Source code repository and deployment bridge for Vercel. ### Recommended AI tools - Claude Code: Agentic coding tool that can scaffold the full-stack app, write the graph similarity algorithms, and iterate through UI components directly from your terminal. - Cursor: Ideal AI-native editor for refining the interactive D3.js force-directed graph component and visual node inspection panels. ### Stack - Frontend: Next.js with Tailwind CSS and D3.js for force-directed graph visualization - Backend: Next.js API routes handling data aggregation and similarity computation - Database: Turso (SQLite at the edge) for caching paper graphs and recent searches - Auth: better-auth configured for single-user personal access - Payments: None (personal use clone) - Other: Semantic Scholar API for academic corpus, Lucide React for UI iconography ### Hosting - Vercel (Zero-config hosting for the Next.js frontend and serverless API routes): $0/mo - Turso (Lightweight SQLite database for caching paper metadata and graph structures to avoid repeat API calls): $0/mo ### Build guide 1. **Project Scaffolding & Database Schema** — Initialize a Next.js project with Tailwind CSS and set up Turso SQLite bindings to store cached paper graphs, search history, and user bookmarks. ``` Initialize a new Next.js TypeScript project with Tailwind CSS and App Router. Set up Turso (libSQL) database client connections using environment variables for URL and auth token. Create a database schema for storing cached papers (`id`, `title`, `abstract`, `year`, `citation_count`, `authors`, `references_json`, `citations_json`) and a table for saved graphs. Provide clear instructions in CLAUDE.md on how to run migrations and start the local development server. ``` 2. **Semantic Scholar API Client & Data Ingestion** — Implement a robust API wrapper for Semantic Scholar to search for papers by title or DOI and fetch their inbound citations and outbound references. ``` Create a TypeScript service module that integrates with the Semantic Scholar API. Implement functions to search for papers matching a query string or DOI, and to fetch detailed paper records including title, abstract, authors, year, citationCount, reference count, and lists of references and citations. Include error handling for rate limits, automatic request retries, and fallback parsing when fields are missing or null. Store fetched papers in the Turso cache table to minimize redundant API calls. ``` 3. **Bibliographic Coupling & Similarity Algorithm** — Write the core similarity algorithm that calculates co-citation and bibliographic coupling scores between a seed paper and its neighborhood. ``` Implement the core similarity engine in a backend utility file. Given a seed paper and its depth-1 neighborhood (references and citations), calculate a similarity score for every pair of papers based on bibliographic coupling (shared references) and co-citation (papers cited by the same works). Normalize the scores between 0 and 1, construct an adjacency matrix, and filter nodes that fall below a relevance threshold. Ensure the calculation runs efficiently in memory without blocking event loops. ``` 4. **Interactive Force-Directed Graph UI** — Build an interactive graph visualization component using D3.js or React Force Graph that renders nodes scaled by citation count and positioned by similarity. ``` Build a React component using D3.js (or react-force-graph-2d) that renders an interactive force-directed graph of academic papers. Nodes should be sized by citation count, colored by cluster or publication year, and positioned based on the similarity adjacency matrix computed in the previous step. Add smooth pan and zoom controls, hover tooltips displaying paper title and authors, and click handlers to inspect paper metadata in a side panel. Ensure the simulation stops gracefully and handles window resizing cleanly. ``` 5. **Paper Detail Sidebar & Search Experience** — Create a clean search landing page and a slide-over sidebar showing abstracts, DOI links, and a button to re-seed the graph on a selected node. ``` Create a landing search page with an input box for paper titles, DOIs, or keywords, displaying autocomplete suggestions from recent history. Build a slide-over sidebar component that opens when a node is clicked in the graph, showing the paper title, authors, publication year, abstract, direct link to PDF/DOI, and a prominent 'Build Graph From Here' action button that triggers a new graph generation centered on that selected paper. ``` 6. **Polish, Caching Optimization & Deployment** — Optimize graph load times with aggressive caching, clean up UI loading states, and deploy the application to Vercel. ``` Review the full application for UX polish, adding skeleton loaders during Semantic Scholar API fetches and smooth transitions when switching graph centers. Verify that all paper data and adjacency calculations are properly cached in Turso. Prepare configuration for deployment to Vercel, ensuring all environment variables are documented and the build succeeds without TypeScript or lint errors. ``` ### Cost vs paying **Starting costs (one-time):** - AI Coding Assistant subscription (Claude Pro / Cursor): $20.00 - Domain name (optional): $12.00 - Total: ~$32 one-time **Ongoing costs (monthly):** - Vercel Hobby Hosting: $0 - Turso SQLite Database: $0 - Semantic Scholar API: $0 - Total: $0/mo - Paying for the SaaS instead: $3 - $6 / mo - Build time: 12 - 18 hours - AI tool credits: $20 (one month of Claude Pro / Cursor) - Break-even: Never (built for personal learning and research utility) ## Sources - [Connected Papers — About & How It Works](https://www.connectedpapers.com/) - [Medium: Announcing Connected Papers](https://medium.com/connectedpapers/announcing-connected-papers-a-visual-tool-for-researchers-to-find-and-explore-academic-papers-89146a54c7d4)