How to vibe codeConnected Papers
Find and explore academic papers in a visual graph
connectedpapers.com ↗Research & Academic Tools
The verdict: can you vibe code Connected Papers?
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.
Estimated effort: 2-3 weekends of focused building
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
Founded
2020
Raised
—
Team
Small indie team
Cheapest paid tier
$0 / forever
What Connected Papers 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 & GroupCustom
Funding
Unknown / bootstrapped
Pay vs build, cumulative
Break-even at month 8 — after that, every month is money kept.
The hard parts of vibe coding Connected Papers
- 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 vibecode Connected Papers
Prerequisites
Node.jsfree
Required runtime environment for the Next.js full-stack framework and package manager.
Semantic Scholar API Keyfree
Free developer API key to fetch academic paper metadata, references, and citation lists without hitting strict rate limits.
GitHubfree
Source code repository and deployment bridge for Vercel.
AI coding tools
Recommended 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 |
Build guide
01Project 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.02Semantic 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.03Bibliographic 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.04Interactive 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.05Paper 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.06Polish, 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 for Connected Papers
What will you build it with?
Starting total with Claude Code$0 one-time
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 Connected Papers
$3 - $6 / mo
Your time to build
12 - 18 hours
AI tool credits
$20 (one month of Claude Pro / Cursor)
Break-even
Never (built for personal learning and research utility)
Vibe code Connected Papers: FAQ
- Can you vibe code Connected Papers yourself?
- Solid side project — 72/100 vibecodeable. Build a personal research graph clone in a few weekends; the main hurdle is mapping bibliographic data into a smooth force-directed graph UI.
- How long does it take to vibe code Connected Papers?
- 2-3 weekends of focused building — roughly 12 - 18 hours of hands-on time with an AI coding agent.
- How do you build your own Connected Papers?
- Scoped to personal use: Next.js with Tailwind CSS and D3.js for force-directed graph visualization on the front, Next.js API routes handling data aggregation and similarity computation behind it, Turso (SQLite at the edge) for caching paper graphs and recent searches for data. Follow the 6-step build guide on this page — each step has a paste-ready prompt for an AI coding agent.
- How do you code your own Connected Papers without being an expert?
- Use an AI coding tool (Claude Code or Cursor) and work in small steps: scaffold, data model, core screens, then deploy. Realistic effort: 2-3 weekends of focused building. The prompts on this page are written so the AI does the heavy lifting.
- How much does it cost to vibe code Connected Papers instead of paying?
- About ~$32 one-time to start and $0/mo to run, versus $3 - $6 / mo for Connected Papers. Break-even: Never (built for personal learning and research utility).
- What stack should you use to vibe code Connected Papers?
- Next.js with Tailwind CSS and D3.js for force-directed graph visualization; Next.js API routes handling data aggregation and similarity computation; Turso (SQLite at the edge) for caching paper graphs and recent searches; plus Semantic Scholar API for academic corpus, Lucide React for UI iconography.