An interactive slideshow for the AI Native Developer Workshop, built with React and TypeScript. Covers a full curriculum from AI fundamentals to hands-on tool demos.
| Section | Topics |
|---|---|
| Introduction | Workshop overview, the AI-native developer mindset |
| Evolution | How software development is changing with AI |
| LLM Basics | Transformers, context windows, GPU acceleration |
| 4D Fluency | Framework for effective AI collaboration |
| Models | Model landscape and selection guidance |
| Ollama | Running models locally |
| Prompting | Prompt engineering techniques |
| Copilot | GitHub Copilot features and usage |
| Privacy | Data handling and enterprise privacy controls |
| Security | OWASP Top 10, secure AI-assisted coding |
| Instructions | Custom instructions and system prompts |
| Context | Context window management strategies |
| Spec Kit | Spec-driven development with AI |
| Reuse & Skills | Prompt libraries, reuse patterns |
| MCP | Model Context Protocol |
| Team Sharing | Copilot for organizational knowledge sharing |
| Copilot CLI | Terminal-based AI assistance |
| Multi-Agent | Agentic workflows and orchestration |
| Copilot SDK | Building custom Copilot extensions |
| What the Pros Use | Tools and practices from experienced AI developers |
| Closing | Summary and next steps |
- React 18 + TypeScript — UI and type safety
- Vite — Dev server and build tool
- Tailwind CSS — Utility-first styling
- Lucide React — Icons
- Node.js 18+
git clone https://github.com/JanDeDobbeleer/workshop_ai_native.git
cd workshop_ai_native
npm install
npm run devOpen http://localhost:5173 in your browser. The app is password-protected; the default local dev password is workshop.
npm run build # outputs to dist/
npm run preview # preview the production buildThe slideshow uses a lightweight password gate (SHA-256 hashed, client-side only — not a security mechanism, just casual access control).
Set the password by providing a SHA-256 hash via environment variable:
VITE_WORKSHOP_PASSWORD_HASH=<your-hash> npm run buildTo generate a hash in the browser console:
crypto.subtle.digest('SHA-256', new TextEncoder().encode('your-password'))
.then(buf => Array.from(new Uint8Array(buf)).map(b => b.toString(16).padStart(2, '0')).join(''))
.then(console.log)| Action | Control |
|---|---|
| Next slide | → arrow key or Next button |
| Previous slide | ← arrow key or Previous button |
| Jump to section | Hamburger menu or dot indicators |
| Toggle nav side | Panel toggle button |