CRISPR Guide RNA Design Tool

What you’re building

CRISPR-Cas9 experiments live or die by guide RNA quality. You need to find every NGG PAM site in your target region, score the candidate guides, and pick the best ones — ideally without paying for a commercial tool or waiting for a web server queue.

In this lesson you will build an interactive CRISPR guide RNA design tool as a React + Vite application. Paste a target gene sequence, and the tool finds all NGG PAM sites on both strands, scores each 20-nt guide by GC content, homopolymer penalties, and position weight, then displays everything in a sortable table with a sequence viewer that highlights selected guides in context.

This is a step up from Lesson 1. Instead of a single HTML file, you are building a proper React application with components, state management, and a development server. The LLM handles all of that scaffolding — you just describe what you want.

The showcase

When finished, your app will have:

• Input panel: a textarea for pasting a DNA sequence (raw or FASTA) and a dropdown to select PAM type (NGG default, with NAG and NNGRRT options).
• Results table: every candidate guide RNA listed with columns for Position, Strand, Guide Sequence (20-nt), PAM, GC%, Homopolymer Score, Composite Score, and a Select checkbox.
• Sorting and filtering: click any column header to sort. Filter by minimum GC%, maximum homopolymer run, or minimum composite score.
• Sequence viewer: the full input sequence displayed in a monospace font with color-coded highlighting — selected guides in green, PAM sites in yellow, overlapping guides in orange.
• Export: download selected guides as a CSV file for ordering oligos.

By default, analysis runs locally in-browser. No sequence upload is required.

The prompt

Navigate to an empty folder, open your AI CLI tool (such as Claude Code, Gemini CLI, or your preferred tool), and paste this prompt:

Create a React + Vite application for CRISPR guide RNA design. Use TypeScript and
Tailwind CSS. The app should be called crispr-guide-designer.

CORE FUNCTIONALITY:

1. INPUT
   - Large textarea accepting raw DNA sequence or FASTA format
   - Auto-strip FASTA headers, whitespace, numbers, non-ATGC characters
   - Display cleaned sequence length
   - PAM selector dropdown: SpCas9 NGG (default), SpCas9 NAG, SaCas9 NNGRRT
   - "Analyze" button and a "Load Example" button (use ~800bp of human AAVS1
     safe harbor locus as the example)

2. PAM FINDING AND GUIDE SCORING
   - Scan both strands for the selected PAM motif
   - For each PAM found, extract the 20-nt guide sequence upstream of the PAM
   - Score each guide on three criteria:
     a) GC content (ideal 40-70%, penalty outside this range)
     b) Homopolymer runs (penalize runs of 4+ identical bases)
     c) Terminal GC (bonus for G or C in last 4 bases of guide, which aids
        Cas9 binding)
   - Composite score: weighted combination, scaled 0-100
   - Discard guides with GC < 20% or GC > 80%

3. RESULTS TABLE (main component)
   - Columns: #, Position (1-based), Strand (+/-), Guide (20nt), PAM (variable length),
     GC%, Homopolymer (longest run), Terminal GC (count of GC in last 4 nt),
     Score (composite), Select (checkbox)
   - All columns sortable by clicking the header (toggle asc/desc)
   - Filter controls above the table:
     - Min GC% slider (20-80)
     - Max homopolymer run dropdown (3, 4, 5, any)
     - Min composite score slider (0-100)
   - Color-code rows: green for score >= 70, yellow for 50-69, red for < 50
   - Show total guides found and how many pass current filters

4. SEQUENCE VIEWER (below results)
   - Display the full input sequence in a monospace font, 80 characters per line,
     with position numbers every line
   - Highlight PAM sites in yellow background
   - When guides are selected (checkbox), highlight the 20-nt guide region in
     green with the PAM in a brighter yellow
   - If two selected guides overlap, show the overlap region in orange
   - Clicking a row in the results table scrolls the sequence viewer to that
     position

5. EXPORT
   - "Download CSV" button exports selected guides with all columns
   - "Copy Oligos" button copies selected guide sequences to clipboard in a
     format ready for ordering (adds 5'-CACCG prefix and 3' for BbsI cloning
     into pX459, plus the complementary oligo with 5'-AAAC prefix)

6. DESIGN
   - Dark theme matching: bg-slate-950, cards bg-slate-900, text-slate-200,
     accent sky-400
   - Clean layout: input on top, results table middle, sequence viewer bottom
   - Responsive but optimized for desktop (this is a lab workstation tool)

Generate the complete application with all components. Use Vite with React and
TypeScript. Include a README with setup instructions (npm install && npm run dev).

What you get

The LLM will generate a project structure like this:

crispr-guide-designer/
├── index.html
├── package.json
├── tsconfig.json
├── vite.config.ts
├── tailwind.config.js
├── postcss.config.js
├── src/
│   ├── main.tsx
│   ├── App.tsx
│   ├── index.css
│   ├── types.ts
│   ├── utils/
│   │   ├── pamFinder.ts
│   │   ├── guideScorer.ts
│   │   ├── fastaParser.ts
│   │   └── codonUtils.ts
│   └── components/
│       ├── SequenceInput.tsx
│       ├── ResultsTable.tsx
│       ├── SequenceViewer.tsx
│       ├── FilterControls.tsx
│       └── ExportButtons.tsx

To run it:

cd crispr-guide-designer
npm install
npm run dev

Open http://localhost:5173 in your browser. Click Load Example to see the AAVS1 locus analyzed.

Expected behavior with the example sequence

• The AAVS1 safe harbor locus (~800 bp) should yield approximately 30-50 NGG PAM sites across both strands.
• Top-scoring guides will have GC content between 45-65%, no homopolymer runs of 4+, and strong terminal GC.
• The sequence viewer should show a dense pattern of yellow PAM highlights throughout the sequence.

Common issues and fixes

Worked example: Designing guides for a knockout experiment

Here is a scenario you might encounter in a real project. Your PI asks you to design CRISPR guides to knock out the BRCA1 gene in a human cell line.

Step 1. Go to NCBI Gene (gene ID: 672) and find the coding sequence for BRCA1. You do not need the entire 81 kb genomic region — focus on exon 2, which contains the start codon. Download ~500 bp around the ATG start site in FASTA format.

Step 2. Paste the sequence into your tool and click Analyze. You should see 15-25 NGG PAM sites in this region.

Step 3. Filter for guides with composite score >= 70. Sort by score descending. The top 3-5 guides are your primary candidates.

Step 4. Select 2-3 top guides and look at the sequence viewer. Ideally, your guides should:

• Target early in the coding sequence (near the ATG) for a clean knockout.
• Not overlap with splice sites or regulatory elements.
• Target different positions and have distinct off-target profiles, so you have independent backup options.

Step 5. Click “Copy Oligos” to get the BbsI-compatible oligo sequences ready for ordering.

Worked example: Checking for PAM sites in a GC-rich region

Some organisms (e.g., Mycobacterium tuberculosis at ~66% GC or Streptomyces coelicolor at ~72% GC) have very high GC content. In these cases:

• Almost every guide will have high GC%, which paradoxically makes the GC filter less useful.
• There will be more NGG PAM sites per kilobase (because GG dinucleotides are more frequent).
• Homopolymer runs of G are more common, so the homopolymer penalty becomes the primary differentiator.

Try pasting a GC-rich sequence and observe how the scoring distribution shifts. Ask the AI to adjust:

My organism has ~70% GC content so all guides have high GC%. Adjust the scoring:
change the ideal GC range to 50-75% instead of 40-70%, and increase the
homopolymer penalty weight to 0.4. This better reflects guide design priorities
for GC-rich genomes.

Understanding the scoring

The composite score is a simplified version of what tools like CRISPOR and Benchling use internally. Here is the breakdown:

GC content (40% weight): Guides with 40-70% GC bind stably without excessive secondary structure. Below 40%, binding is weak. Above 70%, the guide tends to form hairpins.

Homopolymer penalty (30% weight): Runs of 4+ identical bases (especially poly-T, which acts as a Pol III terminator) reduce guide efficacy. TTTT in a guide can prematurely terminate transcription from a U6 promoter.

Terminal GC (30% weight): G or C bases in positions 17-20 (the PAM-proximal end) improve Cas9 binding and cleavage. The seed region near the PAM is the most critical for target recognition.

Customize it

Add support for different Cas proteins

Add PAM options for Cas12a/Cpf1 (TTTV PAM, 5' of the guide instead of 3'),
CjCas9 (NNNNRYAC), and xCas9 (NG). The guide extraction logic needs to flip
for Cas12a since the PAM is upstream. Update the PAM selector dropdown and the
finder logic accordingly.

Add off-target stub with mismatch counting

Add a basic off-target analysis panel. When a guide is selected, let the user
paste a second sequence (e.g., a known pseudogene or paralog) and check for
matches allowing up to 3 mismatches. Highlight potential off-target sites in
the pasted sequence. This is not a genome-wide search but is useful for checking
known problematic loci.

Add oligo design for HDR templates

Add an HDR template designer. After selecting a guide, let the user specify a
desired edit (point mutation, small insertion, or tag insertion). Generate the
HDR template with 40-80 nt homology arms flanking the cut site (3 nt upstream
of the PAM). Show the template sequence with color-coded homology arms, the
edit, and a silent PAM mutation to prevent re-cutting.

Batch mode for multiple targets

Add a batch mode tab where the user can paste multiple FASTA sequences (each a
different target gene). Run the analysis on all sequences and display a summary
table showing the best guide for each target, with an "Expand" button to see
all guides for that target. Add a "Download All" button that exports a plate
map CSV for oligo ordering.

The build pattern

Notice what just happened:

1. You described a bioinformatics tool in plain English.
2. The LLM generated a complete React application with TypeScript, multiple components, and a scoring algorithm.
3. You ran two commands (npm install and npm run dev) and had a working tool.
4. You can extend it with follow-up prompts, each adding a feature.

This is the Showcase + Guided Build pattern. You saw what was possible, you got the exact prompt to reproduce it, and now you have a customizable foundation. Every tool in this module follows the same pattern.

Key takeaways

• CRISPR guide design is a filtering problem: you start with all possible PAM sites and narrow down using GC%, homopolymer content, and terminal GC scoring. The AI builds the filtering and scoring machinery; you supply the biological criteria.
• React + Vite is the right tool for interactive state: when your app needs sorting, filtering, selection, and synchronized highlighting, a component framework like React keeps the code manageable. You can ship without deep React expertise, but understanding component and state basics will help you debug and extend reliably.
• Guide strand orientation is the most common bug: the relationship between the PAM position on the + strand and the guide sequence on the - strand confuses both humans and LLMs. If your guides look wrong, check strand orientation first.
• This tool is for screening, not final validation: use it to quickly identify the top 3-5 candidates, then validate with CRISPOR or Cas-OFFinder for off-target analysis before ordering oligos.
• Keeping sequences local matters: unlike web-based tools, nothing leaves your machine. This matters for unpublished targets and proprietary sequences.

Portfolio suggestion

Save the entire crispr-guide-designer/ project folder. To make it portfolio-ready:

1. Add a screenshot of the tool analyzing a real (or realistic) target to the README.
2. Document which PAM types are supported and how the scoring works.
3. If you added a customization (Cas12a support, off-target checking), describe it in the README.

This is a tool you can demo in a lab meeting or include in a grant application’s “broader impacts” section. If you deploy it (even just on a local server), other lab members can use it immediately. Consider creating a short write-up: “I built a CRISPR guide design tool in 25 minutes using AI — here is how it works and what it can do.”

Add a "Generate UCSC BED Track" button. When clicked, export the selected guides as
a BED file with columns: chromosome (ask the user to enter it), start position,
end position, guide name (e.g., "guide_1_plus_score72"), score (composite score),
strand. Also generate a track line header with name="CRISPR Guides" and
color settings for the score ranges. The user can upload this BED file to the
UCSC Genome Browser or IGV to see guides in the context of gene annotations,
conservation tracks, and epigenetic marks.

Try it yourself

1. Build the base tool using the prompt above.
2. Load the example sequence and verify that guides are being found on both strands.
3. Sort by composite score and examine the top 5 guides. Do the GC% and homopolymer values make sense?
4. Select 3 guides and check the sequence viewer — are they highlighted correctly?
5. Click “Copy Oligos” and verify the BbsI-compatible format.
6. Pick one customization from the list above and add it with a follow-up prompt.

What’s next

In Lesson 3, you will move from browser tools to command-line pipelines: a Python CLI tool that processes FASTQ files, runs quality checks, and generates HTML reports. This is the kind of tool that lives on your lab server and runs automatically when new sequencing data arrives.