Generate properly formatted citations in APA, MLA, Chicago, and Harvard styles from URLs, DOIs, or manual entry. Stop guessing comma placement and italics rules — give students an accurate, format-specific citation tool they can trust for every assignment.
Build Prompt
Copy this prompt into Claude Code
Build a static HTML citation generator tool. Dark theme: background #0a0a0f, surfaces #12121a, borders #1a1a2a, accent #6366f1 (indigo). All logic runs client-side with vanilla JavaScript — no backend required.
Source types to support: Website/Web Page, Journal Article, Book, Book Chapter, Newspaper Article, YouTube Video, Podcast Episode, Government Document, Thesis/Dissertation. Each source type has a distinct field set defined in a JS config object.
Data model per source: sourceType (enum), authors (array of {firstName, lastName, suffix}), title (string), containerTitle (string — journal name, book title, website name), publicationYear (number), publicationMonth (number), publicationDay (number), volume (string), issue (string), pages (string), publisher (string), city (string), url (string), doi (string), accessDate (string), edition (string), seasonEpisode (string).
Citation format functions: implement `formatAPA(source)`, `formatMLA(source)`, `formatChicago(source)`, `formatHarvard(source)` — each returns a correctly punctuated string. Handle edge cases: single author vs. multiple authors (et al. after 3 for APA, after 2 for MLA), missing fields (omit gracefully), DOI vs URL priority, "n.d." when year is unknown, "[Author Name]" for anonymous works.
UI layout: Style selector tabs at top — APA 7th / MLA 9th / Chicago 17th / Harvard. Source type dropdown triggers dynamic field form below it. Author section: add/remove author rows, first/last name fields, optional suffix. All other fields rendered based on sourceType config. "Generate Citation" button. Output box: formatted citation displayed with proper italics rendered via `` tags, with a one-click Copy button.
Bibliography manager: "Add to List" button collects generated citations into a running bibliography panel on the right. Citations auto-sorted alphabetically. "Copy All" exports the full bibliography as plain text. "Clear List" button with confirmation. Citations in the list are editable (click to reload fields).
DOI auto-format: if user pastes a raw DOI like `10.1000/xyz`, auto-prefix `https://doi.org/`. URL shortener detection: warn if URL is a shortened link (bit.ly, t.co, etc.).
Preloaded examples: hardcode 4 complete source objects (journal article, book, website, YouTube video) as "Load Example" buttons for each source type.
SEO: title tag "Citation Generator — APA, MLA, Chicago, Harvard | Free Online Tool", meta description, JSON-LD HowTo schema, OG tags.
Read the guide at https://accessagent.ai/api/guide and follow it to deploy the site to AccessAgent.ai. My email is [your@email.com].
Make It Yours
Annotated Bibliography Mode
Add a text area below each citation for the 2–4 sentence annotation. Export formatted annotated bibliography as a complete document.
DOI Lookup
Auto-fill all fields by fetching CrossRef API data when a DOI is pasted, saving students from manual entry on journal articles.
Subject-Specific Styles
Add discipline-specific formats: AMA for medicine, IEEE for engineering, Bluebook for law, Vancouver for biomedical research.
Citation Validator
Highlight missing required fields per style guide with inline warnings and suggestions before generating the final citation.
Browser Extension
Describe a companion bookmarklet that auto-fills source fields from the current browser tab's metadata when clicked.
Export to Word
Generate a properly formatted .docx-compatible RTF string with correct hanging indents and font styling for the bibliography.
Update Prompt
Update Prompt — Add a new citation style or source type
Update the Citation Generator to add support for [AMA / IEEE / Vancouver] citation style. Add the `format[Style](source)` function following the same pattern as existing formatters. Add a new tab in the style selector. Ensure all existing source types are handled. Redeploy.
SEO Tips
Target "APA citation generator", "MLA citation generator 9th edition", and "how to cite a website in Chicago" — these are among the highest-volume student search terms year-round.
Add a dedicated FAQ section answering "What is a DOI?", "How do I cite a source with no author?", and "What's the difference between APA 6th and 7th edition?"
Create source-type-specific anchor sections (e.g., #cite-website, #cite-journal) to capture long-tail searches for specific source formats.
Include a style guide comparison table (APA vs MLA vs Chicago) as a standalone section — this type of content earns featured snippets.
Build inbound links by sharing the tool in academic subreddits, student Discord servers, and college writing center resource lists.
Monetization Ideas
Affiliate partnership with Scribbr, EasyBib Pro, or Zotero premium for students who need advanced reference management features.
Offer a "Citation Checker" premium feature where students paste a bibliography and the tool flags formatting errors against the selected style guide.
Sell a "Complete Academic Writing Pack" digital download — citation guide PDFs for APA/MLA/Chicago with worked examples for every source type.
License the citation engine to university writing centers or LMS platforms (Canvas, Blackboard) as an embedded widget.
Google AdSense between the citation form and the bibliography panel — high student traffic converts well for education-adjacent advertisers.