Inspiration
The inspiration for ClarityCheck came from observing a common workplace problem: miscommunication through vague or incomplete instructions. Whether it's a manager assigning tasks, a colleague sharing project requirements, or documentation being written, critical information often gets lost in translation. Missing steps, ambiguous language, unclear deadlines, and assumed knowledge lead to wasted time, repeated questions, and costly mistakes. We realized that with Chrome's new Built-in AI APIs, we could create a tool that instantly identifies these clarity issues and helps people communicate more effectively. The goal was to build something practical that solves a real problem millions of people face daily - poor instruction quality that impacts productivity and team coordination.
What it does
ClarityCheck is an AI-powered instruction quality analyzer that helps users identify and fix communication problems in real-time. Users paste instructions, emails, task descriptions, or any written communication into the app, and ClarityCheck analyzes the text using multiple AI models. It provides a clarity score from 0-100, identifies specific issues like missing steps, vague language, ambiguous references, unclear deadlines, assumed knowledge, and missing context. The app then generates an improved version of the instructions with enhanced clarity and specificity, and extracts actionable tasks into an interactive checklist with priority indicators. All processing happens locally on the user's device, ensuring privacy for sensitive workplace communications. The app features a hybrid mode that uses real Chrome Built-in AI APIs when available, or falls back to intelligent pattern-matching for demonstration purposes, making it accessible for testing and development.
How we built it
We built ClarityCheck using React 18 with TypeScript for type-safe development and component-based architecture. The UI is styled with Tailwind CSS for a modern, responsive design with a clean gradient background and professional appearance. We integrated four Chrome Built-in AI APIs: the Prompt API analyzes instructions and identifies clarity issues using structured prompts, the Rewriter API generates improved versions with better clarity, the Summarizer API extracts action items from the text, and the Writer API fills in missing information. We created custom React hooks for managing AI capabilities detection and analysis workflow, ensuring smooth state management. The application uses Vite as the build tool for fast development and optimized production builds. To handle the gradual rollout of Chrome's AI features, we implemented a hybrid architecture with a mock AI service that provides realistic responses when the real APIs aren't available, allowing the app to work immediately for testing and demonstration while automatically switching to real AI when available.
Challenges we ran into
The biggest challenge was the gradual rollout of Chrome's Built-in AI APIs. During development, we discovered that even with all flags enabled in Chrome Canary, the AI APIs weren't available on all systems due to Google's phased deployment. This meant the window.ai object was undefined, causing the app to fail completely. We solved this by implementing a hybrid architecture that detects API availability and gracefully falls back to a mock AI service with intelligent pattern matching. Another challenge was designing prompts that consistently returned well-structured JSON responses from the Prompt API, as the AI sometimes returned varying formats. We addressed this with robust parsing logic and error handling. Managing multiple asynchronous AI API calls efficiently required careful state management and loading indicators to provide good user experience. We also had to ensure the mock service generated realistic and useful feedback that demonstrated the app's value, even without real AI, which required understanding common instruction clarity issues and implementing rule-based analysis. TypeScript type definitions for the experimental AI APIs required custom declarations since official types don't exist yet.
Accomplishments that we're proud of
We're proud of creating a genuinely useful application that solves a real workplace problem rather than just a technical demo. The hybrid architecture we built is robust and production-ready, automatically detecting AI availability and providing a seamless experience regardless of whether Chrome's AI APIs are accessible. The user interface is polished and professional, with thoughtful design choices like color-coded severity indicators, interactive checklists with progress tracking, and clear visual feedback during AI processing. We successfully integrated four different Chrome Built-in AI APIs working together in parallel to provide comprehensive analysis, which demonstrates the power of combining multiple AI models. The mock AI service we created generates intelligent, realistic feedback based on pattern matching and rule-based analysis, proving the concept works even for users who don't have AI access yet. We're particularly proud of the privacy-first approach where all processing happens locally on the user's device, making it safe for sensitive workplace communications. The application is fully functional, deployable, and ready for real-world use, not just a prototype.
What we learned
We learned extensively about Chrome's Built-in AI APIs and how to work with experimental web platform features. Understanding how to structure prompts for the Prompt API to get consistent, parseable responses was crucial. We discovered the importance of graceful degradation and fallback strategies when working with features that have limited availability, which led us to implement the hybrid architecture. Building with TypeScript without official type definitions taught us how to create custom type declarations for experimental APIs. We gained experience in managing complex asynchronous workflows with multiple AI models running in parallel, and how to provide clear loading states and error handling for better user experience. We learned about common patterns in unclear instructions through analyzing what makes communication break down, which informed both our AI prompts and our mock service logic. Working with Vite and modern React patterns like custom hooks improved our development workflow. Most importantly, we learned that building practical, user-focused applications requires balancing technical capability with accessibility, ensuring the app works for as many users as possible even when cutting-edge features aren't universally available yet.
What's next for ClarityCheck
The next major step is building a Chrome Extension version that allows users to analyze instructions anywhere on the web - in Gmail, Slack, Google Docs, Notion, or any other platform. This would enable real-time clarity checking as people write, making it seamlessly integrated into existing workflows. We plan to add history and saved analyses so users can track improvements over time and revisit previous suggestions. Custom issue types and configurable rules would let teams define their own communication standards and style guides. Integration with popular workplace tools like Slack, Gmail, and Google Docs through official APIs would enable automatic analysis of messages and suggestions. Multi-language support using the Translator API would make ClarityCheck valuable for global teams. Export functionality to PDF, Markdown, and other formats would help with documentation and sharing. We want to add team features like shared templates, communication standards, and analytics dashboards showing clarity trends across an organization. A comparison mode showing before-and-after improvements side-by-side would help demonstrate value. Machine learning from user feedback could improve the accuracy of issue detection and suggestions over time. Finally, as Chrome's AI APIs become more widely available, we'll transition fully from the hybrid mode to pure AI-powered analysis for all users.
Log in or sign up for Devpost to join the conversation.