CRISP-AI

• 

• 

• 

• 

• 

  asw

Inspiration

Millions of children are born with genetic diseases that could theoretically be fixed at the DNA level. We wanted to visualize what that actually looks like — making CRISPR technology tangible and understandable for doctors, patients, and investors.

What it does

CRISP-AI simulates a real CRISPR-Cas9 gene editing workflow on a live 3D DNA strand. It detects a Cytosine-to-Thymine mutation in the JAG1 gene (Alagille Syndrome), deploys an AI-powered Cas9 agent to repair it, and commits the verified edit to the Algorand blockchain — all visualized in real time.

How we built it

Built with React, TypeScript, and Three.js for the 3D DNA viewport. Zustand manages global state across the genomic pipeline. The Cas9 repair sequence is an async AI agent flow. Blockchain commits are recorded on Algorand Testnet. Styled with Tailwind CSS.

Challenges we ran into

Synchronizing the 3D animation state with the async AI repair pipeline was complex. Getting the DNA helix to visually respond to the repair progress in real time required careful use of Three.js frame loops and Zustand state.

Accomplishments that we're proud of

A fully working end-to-end gene editing simulation — from mutation detection to blockchain-verified repair — with a real-time 3D visualization that makes the science immediately understandable.

What we learned

How CRISPR-Cas9 actually works at a molecular level, and how to bridge complex biotech concepts with interactive 3D interfaces that non-experts can understand.

What's next for CRISP-AI

Real patient genomic data integration, multi-gene editing support, and deployment as a tool for medical education and pre-surgical CRISPR planning.

Built With

• algorand-blockchain
• react
• react-three-fiber
• tailwind-css
• three.js
• typescript
• zustand