# Project export: skog This document was generated by HackStack to give an AI agent context about a hackathon project. Sections are labeled with their provenance; content marked as truncated was cut to keep this document small. ## Project metadata - Hackathon: Cal Hacks 11.0 - Tagline: Leveraging empathic voice AI for panic attack support - Devpost: https://devpost.com/software/skog - GitHub: https://github.com/jasukej/calhacks - Demo: http://calhacks-jasukej-kezs-projects.vercel.app/ - Team: 3 GitHub contributor(s) — Kezia (27 commits), Owen Cooke (3 commits), Allan Tan (3 commits) ## Devpost submission (written by the team) ### Overview Video Demo: Watch here ### Inspiration 💡 Panic attacks and chronic anxiety affect millions of people every year, often catching them in moments when help is out of reach. Skog is designed to fill that gap, providing on-demand support to those who need it most. Whether it’s guiding users through calming exercises, contacting an emergency contact, or helping them uncover patterns in their anxiety triggers, Skog empowers individuals with immediate relief and long-term tools for managing their mental health. Skog isn’t just an app—it’s a lifeline for moments when you feel most alone. ### What it does 🧠 Skog offers real-time, AI-driven support during panic attacks and anxiety episodes. It combines voice-assisted grounding techniques, emotional analysis, and automated emergency contact alerts to give users the tools they need to regain control. Key features include: Breathe: A soothing, voice-guided breathing exercise enhanced with visual cues, using Cartesia API for calming narration. 3 Senses: A grounding exercise where users are guided to focus on their environment—what they see, hear, and feel—facilitated by real-time feedback from a voice assistant powered by VAPI. Talk with Skog: An empathetic AI agent provides emotional support, with responses adapted through real-time analysis of the user’s emotional state via Hume EVI. Anxiety Trigger Detection: Skog identifies recurring anxiety triggers, offering users personalized coping strategies and insights for long-term management. Community Forum: A supportive space where users can share their stories, connect, and learn from each other’s experiences. ### How we built it 🛠️ Frontend: Next.js and React for creating a smooth and intuitive user interface. TailwindCSS and Shadcn for sleek, adaptable styling. Framer Motion to ensure an engaging, visually-pleasing experience. Backend: Firebase for secure data management and user authentication. Twilio for sending SMS notifications to emergency contacts during critical moments. Cartesia API for real-time voice narration that guides users through calming exercises. VAPI for interactive, real-time feedback during grounding exercises. Hume EVI to detect user emotions and personalize responses based on their current emotional state. OpenAI and Google Search API to analyze anxiety triggers and recommend reliable coping strategies. ### Challenges we ran into 🤔 Building a seamless user experience without a dedicated designer or Figma mockups. Integrating real-time WebSockets for communication was more complex than anticipated, leading to delays. Spent too much time dilly-dallying in SF (but who doesn't?) ### Accomplishments we're proud of 💪 Successfully delivering a fully functional app that offers real-time support during panic attacks. Seamlessly integrating multiple APIs to create a cohesive, responsive user experience. ### What we learned 🌟 Project Scoping: We gained valuable insights into defining achievable goals within short timeframes. API Integration: We mastered connecting WebSockets and handling complex emotion-detection APIs. Debugging in Next.js: Thanks to our mentor, we can now say goodbye to endless NextJS console logs. ### What's next for Skog 🚀 Refined Narration: We plan to enhance the app's voice interaction to make it more personalized and compassionate. Professional Contact Integration: Skog complements therapy but isn’t a replacement. Our next step is integrating trusted professional contacts for more structured long-term care. Long-Term Tracking: We’ll expand Skog’s ability to track anxiety patterns over time, offering deeper insights for better mental health management. ## README (from the GitHub repository) # **skog** Automating panic attack first aid and trigger diagnosis with empathetic voice AI. ## 🚀 Demo [Watch the demo](https://www.loom.com/share/c11ca1d0aef6483d9194c843a62fa4a2?sid=7c2e6dae-385d-4c59-b965-578395c6f3f6) ## 📸 Project Screenshots project-screenshot project-screenshot project-screenshot ## 🧐 Features skog provides both **immediate support** for users experiencing panic attacks and a **comprehensive tool** to help mental health professionals diagnose and track anxiety triggers over time. Key features include: - **Voice-Assisted Grounding Exercises**: Skog automates scientifically-backed de-escalation techniques such as breathing exercises and the 3-3-3 method, guiding users step-by-step through calming practices designed to alleviate panic attack symptoms quickly. - **Panic Attack Trigger Detection**: Using advanced speech processing, Skog analyzes a user's verbal cues to identify potential anxiety triggers. Based on this real-time analysis, it offers personalized coping mechanisms tailored to the user’s specific situation, helping to reduce the frequency and intensity of future episodes. - **Emergency Contact Alerts**: In critical moments, Skog automatically alerts a designated emergency contact via SMS when it detects signs of a severe panic attack, ensuring that users are not alone during high-stress situations. - **Community Forum**: Skog provides a supportive online space where users can share their experiences, connect with others who face similar challenges, and validate their feelings. This sense of community helps users feel heard, reducing isolation and stigma associated with anxiety. ## 🛠️ Installation Steps 1. Clone the repository and install dependencies: ```bash npm install ``` 2. Set up your API keys: ```bash echo /.env ``` 3. Run the app in a development environment: ```bash npm run dev ``` ## 💻 Built With Technologies used in the project: - **Next.js** - **VAPI** - **Cartesia** - **OpenAI API** - **Twilio** - **Firebase** ## Detected evidence (automated analysis) Indexed codebase: 43 recognized source files, 86 KB. - CSS (language) — detected in the code - Firebase (technology) — detected in the code - Next.js (technology) — detected in the code - OpenAI (technology) — detected in the code - React (technology) — detected in the code - Tailwind CSS (technology) — detected in the code - TypeScript (language) — detected in the code ## Codebase structure (from repository index) ### Files (51 of 51) ``` .eslintrc.json .gitignore .vscode/launch.json app/api/run-triggers-pipeline/route.ts app/api/send-sms/route.ts app/api/validate-input/route.ts app/auth/page.tsx app/breathe/page.tsx app/contact/page.tsx app/forum/page.tsx app/globals.css app/layout.tsx app/menu/page.tsx app/page.tsx app/senses/page.tsx app/share/page.tsx app/summary/page.tsx app/talk/page.tsx components.json components/chat/Chat.tsx components/chat/Controls.tsx components/chat/Expressions.tsx components/chat/Messages.tsx components/chat/MicFFT.tsx components/chat/StartCall.tsx components/HomeButton.tsx components/Input.tsx components/MenuButton.tsx components/Post.tsx components/Progress.tsx components/ui/button.tsx components/ui/checkbox.tsx components/ui/input.tsx components/ui/switch.tsx components/ui/toggle.tsx hooks/sendSMStoContact.ts hooks/storeMessages.ts lib/constants/expressionColors.ts lib/constants/sensesAssistant.ts lib/firebase.ts lib/hume.ts lib/twilio.ts lib/utils.ts lib/utils/gemini.ts lib/vapi.sdk.ts next.config.mjs package.json postcss.config.mjs README.md tailwind.config.ts tsconfig.json ``` ### Dependencies - package.json: @cartesia/cartesia-js@^1.1.0, @google-cloud/storage@^7.13.0, @humeai/voice@^0.1.10, @humeai/voice-react@^0.1.16, @opentelemetry/api@^1.9.0, @phosphor-icons/react@^2.1.7, @radix-ui/react-checkbox@^1.1.2, @radix-ui/react-icons@^1.3.0, @radix-ui/react-slot@^1.1.0, @radix-ui/react-switch@^1.1.1, @radix-ui/react-toggle@^1.1.0, @types/node@^20, @types/react@^18, @types/react-dom@^18, @types/react-virtualized@^9.21.30, @vapi-ai/web@^2.1.4, axios@^1.7.7, class-variance-authority@^0.7.0, clsx@^2.1.1, compromise@^14.14.2, eslint@^8, eslint-config-next@14.2.15, firebase@^10.14.1, firebase-admin@^12.6.0, fluent-ffmpeg@^2.1.3, framer-motion@^11.11.9, hume@^0.9.1, lucide-react@^0.453.0, ml-kmeans@^6.0.0, next@14.2.15, openai@^4.68.1, phosphor-react@^1.4.1, postcss@^8, react@^18, react-dom@^18, react-hook-form@^7.53.1, react-loading-indicators@^1.0.0, react-spinners@^0.14.1, react-toastify@^10.0.6, react-virtualized@^9.22.5, remeda@^2.15.2, tailwind-merge@^2.5.4, tailwindcss@^3.4.1, tailwindcss-animate@^1.0.7, twilio@^5.3.4, typescript@^5 ### Recent commits (newest first) - Update README.md - Update README.md - Update README.md - Update README.md - final commit - fix vapi - idk - final styling + summarize flow - minor tts config - Merge pull request #10 from jasukej/allan-prompt-fix - transcription is not a field - Merge pull request #9 from jasukej/allan-prompt-fix - removed logs - prompt - Merge pull request #8 from jasukej/kez - mini change - fixed merge conflicts - fix: switch added - contact alert toggle - animations and styling ## Key source files (fetched from GitHub, selected and truncated for size) ### package.json ``` { "name": "calhacks", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@cartesia/cartesia-js": "^1.1.0", "@google-cloud/storage": "^7.13.0", "@humeai/voice": "^0.1.10", "@humeai/voice-react": "^0.1.16", "@opentelemetry/api": "^1.9.0", "@phosphor-icons/react": "^2.1.7", "@radix-ui/react-checkbox": "^1.1.2", "@radix-ui/react-icons": "^1.3.0", "@radix-ui/react-slot": "^1.1.0", "@radix-ui/react-switch": "^1.1.1", "@radix-ui/react-toggle": "^1.1.0", "@vapi-ai/web": "^2.1.4", "axios": "^1.7.7", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", "compromise": "^14.14.2", "firebase": "^10.14.1", "firebase-admin": "^12.6.0", "fluent-ffmpeg": "^2.1.3", "framer-motion": "^11.11.9", "hume": "^0.9.1", "lucide-react": "^0.453.0", "ml-kmeans": "^6.0.0", "next": "14.2.15", "openai": "^4.68.1", "phosphor-react": "^1.4.1", "react": "^18", "react-dom": "^18", "react-hook-form": "^7.53.1", "react-loading-indicators": "^1.0.0", "react-spinners": "^0.14.1", "react-toastify": "^10.0.6", "react-virtualized": "^9.22.5", "remeda": "^2.15.2", "tailwind-merge": "^2.5.4", "tailwindcss-animate": "^1.0.7", "twilio": "^5.3.4" }, "devDependencies": { "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "@types/react-virtualized": "^9.21.30", "eslint": "^8", "eslint-config-next": "14.2.15", "postcss": "^8", "tailwindcss": "^3.4.1", "typescript": "^5" } } ``` ### app/layout.tsx ```typescript import type { Metadata } from "next"; import localFont from "next/font/local"; import "./globals.css"; import Link from "next/link"; import Image from "next/image"; import { Suspense } from "react"; const geistSans = localFont({ src: "./fonts/GeistVF.woff", variable: "--font-geist-sans", weight: "100 900", }); const geistMono = localFont({ src: "./fonts/GeistMonoVF.woff", variable: "--font-geist-mono", weight: "100 900", }); export const metadata: Metadata = { title: "Create Next App", description: "Generated by create next app", }; export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return (
{/* Skoggy Link */}
Skoggy Logo Home
{/* Contact Link */}
Contact Contact
Loading...}> {children} ); } ``` ### app/page.tsx ```typescript "use client"; import { Button } from "@/components/ui/button"; import Image from "next/image"; import { useRouter } from "next/navigation"; import { ArrowRight } from "lucide-react"; import { useState } from "react"; import { sendSMStoContact } from "@/hooks/sendSMStoContact"; export default function Home() { const router = useRouter(); const handleButtonClick = async () => { router.push("/breathe"); sendSMStoContact(); }; return (
tap to start
); } ``` ### app/talk/page.tsx ```typescript import MenuButton from '@/components/MenuButton'; import { getHumeAccessToken } from '@/lib/hume' import dynamic from "next/dynamic"; const Chat = dynamic(() => import("@/components/chat/Chat"), { ssr: false, }); async function TalkPage() { const accessToken = await getHumeAccessToken(); if (!accessToken) { return
Error: Unable to fetch Hume access token
; } return (
) } export default TalkPage ``` ### app/forum/page.tsx ```typescript "use client"; import { useState, useEffect } from 'react'; import { collection, getDocs } from 'firebase/firestore'; import { db } from '@/lib/firebase'; import { Button } from "@/components/ui/button"; import { useRouter } from 'next/navigation'; import { PlusCircle } from 'lucide-react'; import Post from '@/components/Post'; interface Post { id: string; content: string; createdAt: Date; } export default function ForumPage() { const [posts, setPosts] = useState([]); const router = useRouter(); useEffect(() => { const fetchPosts = async () => { const postsCollection = collection(db, 'posts'); const postSnapshot = await getDocs(postsCollection); const postList = postSnapshot.docs.map(doc => ({ id: doc.id, ...doc.data(), createdAt: doc.data().createdAt })) as Post[]; setPosts(postList.sort((a, b) => (new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()))); }; fetchPosts(); }, []); return (

Community Forum

{posts.map((post, index) => ( ))}
); } ``` ### app/share/page.tsx ```typescript "use client"; import React, { useState } from 'react'; import { useRouter } from 'next/navigation'; import { Button } from "@/components/ui/button"; import { ArrowRight, House } from 'lucide-react'; import { getAuth } from 'firebase/auth'; import { db } from '@/lib/firebase'; import { addDoc, collection, getFirestore } from 'firebase/firestore'; import HomeButton from '@/components/HomeButton'; function SharePage() { const [post, setPost] = useState(''); const router = useRouter(); const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); try { // Assuming you have Firebase initialized and auth set up const auth = getAuth(); const user = auth.currentUser; if (!user) { console.error('User not authenticated'); return; } const db = getFirestore(); const postsCollection = collection(db, 'posts'); await addDoc(postsCollection, { content: post, userId: user.uid, createdAt: Date.now() }); console.log('Post saved successfully'); setPost(''); } catch (error) { console.error('Error saving post:', error); } }; return (

How are you feeling today?