<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Maisam Abbas</title>
    <description>The latest articles on DEV Community by Maisam Abbas (@maisamabbas0323).</description>
    <link>https://dev.to/maisamabbas0323</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3990488%2F32c4e51a-2d3e-446c-b605-500f681ab7be.png</url>
      <title>DEV Community: Maisam Abbas</title>
      <link>https://dev.to/maisamabbas0323</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/maisamabbas0323"/>
    <language>en</language>
    <item>
      <title>Ghost Reel: Turning Ideas into Documentaries — A Mobile Documentary Studio</title>
      <dc:creator>Maisam Abbas</dc:creator>
      <pubDate>Fri, 30 Oct 2026 09:03:09 +0000</pubDate>
      <link>https://dev.to/maisamabbas0323/ghost-reel-turning-ideas-into-documentaries-a-mobile-documentary-studio-44l</link>
      <guid>https://dev.to/maisamabbas0323/ghost-reel-turning-ideas-into-documentaries-a-mobile-documentary-studio-44l</guid>
      <description>&lt;p&gt;&lt;em&gt;This is a submission for the &lt;a href="https://dev.to/challenges/hacktoberfest-week4-2026-10-26"&gt;Hacktoberfest Open-Source AI Challenge Week 4: Ghost in the Machine&lt;/a&gt;.&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  What I Built
&lt;/h2&gt;

&lt;p&gt;I built &lt;strong&gt;Ghost Reel&lt;/strong&gt;, a mobile documentary production workspace designed to help creators transform ideas and research into structured documentary projects.&lt;/p&gt;

&lt;p&gt;The inspiration behind Ghost Reel came from a simple observation: creating a documentary involves many different steps. You need to research a subject, organise information, identify important facts, develop a compelling story, write a script, prepare narration, plan scenes, and eventually bring everything together into a finished video.&lt;/p&gt;

&lt;p&gt;These activities are often spread across multiple applications and services. Moving between them can make the creative process unnecessarily complicated.&lt;/p&gt;

&lt;p&gt;I wanted to bring the early stages of this entire process into one place.&lt;/p&gt;

&lt;p&gt;Ghost Reel is designed to make documentary production feel like a connected workflow. Instead of starting with an empty video editor, creators can begin with a topic, develop their research, generate and refine a script, prepare narration, and organise the documentary scene by scene.&lt;/p&gt;

&lt;p&gt;It is not intended to be just another AI chat interface. It is a dedicated workspace for documentary projects.&lt;/p&gt;




&lt;h2&gt;
  
  
  Getting started
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Prerequisites
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Node.js&lt;/strong&gt; 18 or later&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;npm&lt;/strong&gt; 10+ (ships with Node 18) — the project uses &lt;code&gt;package-lock.json&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Expo Go&lt;/strong&gt; app on your iOS or Android device (&lt;a href="https://apps.apple.com/app/expo-go/id982107779" rel="noopener noreferrer"&gt;App Store&lt;/a&gt; · &lt;a href="https://play.google.com/store/apps/details?id=host.exp.exponent" rel="noopener noreferrer"&gt;Google Play&lt;/a&gt;)&lt;/li&gt;
&lt;/ul&gt;

&lt;blockquote&gt;
&lt;p&gt;You do &lt;strong&gt;not&lt;/strong&gt; need Xcode or Android Studio to run Ghost Reel. Expo Go handles everything.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h3&gt;
  
  
  1 — Clone the repository
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;git clone https://github.com/maisamabbas0323/ghostreel.git
&lt;span class="nb"&gt;cd &lt;/span&gt;ghostreel
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  2 — Install dependencies
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npx expo &lt;span class="nb"&gt;install&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;blockquote&gt;
&lt;p&gt;Always use &lt;code&gt;npx expo install&lt;/code&gt; (not &lt;code&gt;npm install&lt;/code&gt; directly) — it resolves package versions that are compatible with the installed Expo SDK.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h3&gt;
  
  
  3 — Start the development server
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npx expo start
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Expo will print a QR code in the terminal.&lt;/p&gt;

&lt;h3&gt;
  
  
  4 — Open on your device
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;Open &lt;strong&gt;Expo Go&lt;/strong&gt; on your phone.&lt;/li&gt;
&lt;li&gt;Scan the QR code with your camera (iOS) or the Expo Go in-app scanner (Android).&lt;/li&gt;
&lt;li&gt;Ghost Reel will bundle and open on your device.&lt;/li&gt;
&lt;/ol&gt;

&lt;blockquote&gt;
&lt;p&gt;Make sure your phone and computer are on the &lt;strong&gt;same Wi-Fi network&lt;/strong&gt;. If the QR scan fails, press &lt;code&gt;w&lt;/code&gt; in the terminal to open the web version, or &lt;code&gt;a&lt;/code&gt;/&lt;code&gt;i&lt;/code&gt; to open an Android/iOS simulator if you have one installed.&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h3&gt;
  
  
  The workflow
&lt;/h3&gt;

&lt;p&gt;A documentary project in Ghost Reel follows a structured process:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Create a documentary project.&lt;/li&gt;
&lt;li&gt;Choose a topic and provide an optional research URL.&lt;/li&gt;
&lt;li&gt;Gather information and research the subject.&lt;/li&gt;
&lt;li&gt;Generate a structured documentary script.&lt;/li&gt;
&lt;li&gt;Edit, revise, and approve the script.&lt;/li&gt;
&lt;li&gt;Generate narration for individual scenes.&lt;/li&gt;
&lt;li&gt;Organise the scenes using the storyboard.&lt;/li&gt;
&lt;li&gt;Configure captions and export preferences.&lt;/li&gt;
&lt;li&gt;Continue toward the final video-production stage.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Each stage has a specific purpose, helping creators keep their research, writing, and production planning organised.&lt;/p&gt;

&lt;h3&gt;
  
  
  1. Project Management
&lt;/h3&gt;

&lt;p&gt;Ghost Reel provides a project-based workspace.&lt;/p&gt;

&lt;p&gt;Creators can create new documentary projects, organise their work, revisit existing projects, and archive projects they no longer need.&lt;/p&gt;

&lt;p&gt;Rather than treating every interaction as a separate conversation, Ghost Reel keeps the work connected to a documentary project.&lt;/p&gt;

&lt;p&gt;This makes it easier to return to an earlier idea and continue developing it without starting over.&lt;/p&gt;

&lt;h3&gt;
  
  
  2. Research and Information Gathering
&lt;/h3&gt;

&lt;p&gt;Good documentaries need more than interesting writing. They need research.&lt;/p&gt;

&lt;p&gt;Ghost Reel includes a research workflow that can fetch and parse web pages, gather information, and extract factual claims from source material.&lt;/p&gt;

&lt;p&gt;The purpose is to establish a research foundation before writing the documentary.&lt;/p&gt;

&lt;p&gt;This helps separate the information gathered during research from the storytelling decisions made during script development.&lt;/p&gt;

&lt;p&gt;The research stage is particularly important because documentary writing should not simply invent events or present unsupported statements as facts.&lt;/p&gt;

&lt;h3&gt;
  
  
  3. AI-Assisted Script Generation
&lt;/h3&gt;

&lt;p&gt;Once the research is ready, Ghost Reel can generate a structured documentary script using Google AI Studio.&lt;/p&gt;

&lt;p&gt;The script is organised into multiple scenes rather than delivered as one long block of text.&lt;/p&gt;

&lt;p&gt;This structure helps creators think about the documentary visually and narratively.&lt;/p&gt;

&lt;p&gt;A documentary needs a beginning that establishes the subject, a middle that develops the story, and an ending that gives the audience something meaningful to take away.&lt;/p&gt;

&lt;p&gt;The goal is to use AI to assist with this process while keeping the creator involved in reviewing and shaping the final story.&lt;/p&gt;

&lt;h3&gt;
  
  
  4. Script Editing and Revision
&lt;/h3&gt;

&lt;p&gt;Generated content should not automatically become the final documentary.&lt;/p&gt;

&lt;p&gt;Ghost Reel includes a script-editing workflow where creators can revise the generated material, make changes, approve scenes, and track revision history.&lt;/p&gt;

&lt;p&gt;This is an important part of the application because the creator should remain responsible for the documentary's direction.&lt;/p&gt;

&lt;p&gt;AI can help organise ideas and produce a first draft, but the final decisions about accuracy, tone, structure, and storytelling belong to the person making the documentary.&lt;/p&gt;

&lt;h3&gt;
  
  
  5. Narration with ElevenLabs
&lt;/h3&gt;

&lt;p&gt;A documentary is not only about what appears on screen. Narration plays an important role in how the audience understands the story.&lt;/p&gt;

&lt;p&gt;Ghost Reel integrates ElevenLabs for scene-based narration generation.&lt;/p&gt;

&lt;p&gt;Creators can generate narration audio for individual scenes and prepare those audio files as part of the documentary project.&lt;/p&gt;

&lt;p&gt;Instead of treating narration as one large audio file, the workflow connects narration to the individual scenes.&lt;/p&gt;

&lt;p&gt;This creates a more organised foundation for future editing and video production.&lt;/p&gt;

&lt;h3&gt;
  
  
  6. Storyboard and Scene Organisation
&lt;/h3&gt;

&lt;p&gt;The storyboard provides a scene-by-scene view of the documentary.&lt;/p&gt;

&lt;p&gt;Each scene can be considered in terms of its narrative purpose, visual concept, and transition to the next part of the story.&lt;/p&gt;

&lt;p&gt;This helps creators move from written storytelling toward visual planning.&lt;/p&gt;

&lt;p&gt;The storyboard is especially useful because a documentary script and a finished documentary are not the same thing. A script explains what should be communicated, while a storyboard helps plan how that information could be presented visually.&lt;/p&gt;

&lt;h3&gt;
  
  
  7. Captions and Presentation Settings
&lt;/h3&gt;

&lt;p&gt;Ghost Reel also includes caption configuration.&lt;/p&gt;

&lt;p&gt;Creators can configure caption typography, positioning, and language.&lt;/p&gt;

&lt;p&gt;These settings help establish a consistent presentation style across the documentary.&lt;/p&gt;

&lt;p&gt;Captions are an important part of video accessibility and can also help viewers follow narration when watching without sound.&lt;/p&gt;

&lt;h3&gt;
  
  
  8. Export Preferences
&lt;/h3&gt;

&lt;p&gt;The application includes export settings for preferences such as aspect ratio, resolution, and audio mix.&lt;/p&gt;

&lt;p&gt;These settings establish the intended output requirements for the future video-production stage.&lt;/p&gt;

&lt;p&gt;The complete rendering pipeline is still part of the roadmap, but the export configuration provides a foundation for it.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Technology Behind Ghost Reel
&lt;/h2&gt;

&lt;p&gt;Ghost Reel is built using a modern mobile development stack.&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Technology&lt;/th&gt;
&lt;th&gt;How it is used&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Expo SDK 58&lt;/td&gt;
&lt;td&gt;Mobile application foundation&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;React Native 0.88&lt;/td&gt;
&lt;td&gt;Cross-platform application interface&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;TypeScript&lt;/td&gt;
&lt;td&gt;Application logic and type safety&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Expo Router&lt;/td&gt;
&lt;td&gt;Navigation and routing&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;SQLite&lt;/td&gt;
&lt;td&gt;Local project and application data&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Expo SecureStore&lt;/td&gt;
&lt;td&gt;Secure storage for provider credentials&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;React Hook Form&lt;/td&gt;
&lt;td&gt;Form state and input management&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Zod&lt;/td&gt;
&lt;td&gt;Data validation&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Google AI Studio&lt;/td&gt;
&lt;td&gt;AI-assisted documentary script generation&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Gemma&lt;/td&gt;
&lt;td&gt;Open-weight model technology targeted for the AI workflow&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;ElevenLabs&lt;/td&gt;
&lt;td&gt;Documentary narration generation&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;The application uses a local-first approach for project management.&lt;/p&gt;

&lt;p&gt;SQLite provides on-device persistence, while Expo SecureStore is used for API credentials.&lt;/p&gt;

&lt;p&gt;For supported provider workflows, requests are made directly to the relevant services rather than being routed through a custom intermediary backend.&lt;/p&gt;

&lt;p&gt;This architecture was chosen to keep the application focused and avoid introducing infrastructure that the current workflow does not need.&lt;/p&gt;

&lt;p&gt;It also means that Ghost Reel depends on the availability and requirements of its connected providers. Direct API integration does not mean the application works entirely offline.&lt;/p&gt;

&lt;h2&gt;
  
  
  Architecture and Development Decisions
&lt;/h2&gt;

&lt;p&gt;One of the important decisions in building Ghost Reel was to treat documentary projects as persistent application data.&lt;/p&gt;

&lt;p&gt;A documentary project contains more than a title. It has research, scripts, revisions, scenes, narration, captions, and production preferences.&lt;/p&gt;

&lt;p&gt;Keeping these elements organised locally gives the application a foundation for more advanced editing and production features.&lt;/p&gt;

&lt;p&gt;Another important decision was to separate provider integrations from the main application experience.&lt;/p&gt;

&lt;p&gt;The application should provide a consistent workspace even when different services are responsible for different tasks.&lt;/p&gt;

&lt;p&gt;Google AI Studio supports the script-generation workflow, while ElevenLabs provides narration capabilities.&lt;/p&gt;

&lt;p&gt;The application also uses secure device storage for API credentials rather than placing them directly into ordinary project records.&lt;/p&gt;

&lt;p&gt;The broader architectural goal is to make Ghost Reel extensible without making the application unnecessarily complicated.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why Does Open Innovation Matter?
&lt;/h2&gt;

&lt;p&gt;Open innovation matters because the future of technology should not be limited to a small number of companies, platforms, or closed ecosystems.&lt;/p&gt;

&lt;p&gt;Developers should be able to experiment with different models, tools, libraries, and services. They should have the freedom to combine technologies and create products that solve real problems.&lt;/p&gt;

&lt;p&gt;Open-source software makes this possible by allowing people to learn from existing work, contribute improvements, and build on shared foundations.&lt;/p&gt;

&lt;p&gt;Open-weight AI models also create new opportunities. They allow developers to explore how models can be used, adapted, and integrated into different applications.&lt;/p&gt;

&lt;p&gt;For Ghost Reel, this is particularly relevant.&lt;/p&gt;

&lt;p&gt;Documentary production is a creative process, and creators should not be forced into one fixed AI provider or one particular workflow.&lt;/p&gt;

&lt;p&gt;I want Ghost Reel to remain flexible enough to support different technologies as the project develops.&lt;/p&gt;

&lt;p&gt;There is also an important distinction between open innovation and simply using an API. A service being accessible through an API does not automatically make it open source, and using an open-weight model does not make every component of an application open.&lt;/p&gt;

&lt;p&gt;The goal is to use open technologies where they make sense while maintaining a clear understanding of the responsibilities and limitations of every integrated service.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Spirit of It: Ghost in the Machine
&lt;/h2&gt;

&lt;p&gt;The theme &lt;strong&gt;Ghost in the Machine&lt;/strong&gt; gave me an opportunity to think about something beyond the technical side of the project.&lt;/p&gt;

&lt;p&gt;A documentary is a way of preserving stories.&lt;/p&gt;

&lt;p&gt;It can preserve an event, a discovery, a personal experience, a historical moment, or an idea that might otherwise disappear.&lt;/p&gt;

&lt;p&gt;Sometimes the most important stories are not the loudest ones. They are the stories that need someone to research them, organise the information, and give them a voice.&lt;/p&gt;

&lt;p&gt;That idea connects naturally with Ghost Reel.&lt;/p&gt;

&lt;p&gt;The application uses technology to help creators develop stories, but the purpose is not to replace the storyteller.&lt;/p&gt;

&lt;p&gt;The technology works behind the scenes. The human creator decides what matters, what should be investigated, what should be included, and how the final story should be told.&lt;/p&gt;

&lt;p&gt;In that sense, Ghost Reel is about using modern tools to help preserve and communicate stories.&lt;/p&gt;

&lt;p&gt;It is a documentary workspace for turning information into something people can understand, experience, and remember.&lt;/p&gt;

&lt;h2&gt;
  
  
  Prize Categories
&lt;/h2&gt;

&lt;p&gt;I would like to submit Ghost Reel for consideration in the following categories.&lt;/p&gt;

&lt;h3&gt;
  
  
  1. Best Overall Project
&lt;/h3&gt;

&lt;p&gt;Ghost Reel is designed as a complete documentary-production workflow rather than a single-purpose AI feature.&lt;/p&gt;

&lt;p&gt;Its combination of project management, research, script generation, editing, narration, storyboarding, captions, and export configuration gives it a broader product direction.&lt;/p&gt;

&lt;p&gt;The aim is to demonstrate how different technologies can work together inside one useful application.&lt;/p&gt;

&lt;h3&gt;
  
  
  2. Best Use of Gemma
&lt;/h3&gt;

&lt;p&gt;Gemma is relevant to Ghost Reel's AI-assisted storytelling direction.&lt;/p&gt;

&lt;p&gt;The goal is to use an open-weight model to help creators develop structured documentary scripts and organise storytelling ideas.&lt;/p&gt;

&lt;p&gt;This category recognises the potential of open-weight AI in a practical creative application rather than treating the model as an isolated demonstration.&lt;/p&gt;

&lt;h3&gt;
  
  
  3. Best Use of ElevenLabs
&lt;/h3&gt;

&lt;p&gt;ElevenLabs supports the narration side of Ghost Reel.&lt;/p&gt;

&lt;p&gt;The application connects narration generation to individual documentary scenes, allowing creators to prepare audio as part of a larger production workflow.&lt;/p&gt;

&lt;p&gt;This makes voice generation a meaningful part of the documentary process rather than a separate text-to-speech experiment.&lt;/p&gt;

&lt;h3&gt;
  
  
  4. Best Use of Browserbase
&lt;/h3&gt;

&lt;p&gt;Browserbase is relevant to the research direction of Ghost Reel.&lt;/p&gt;

&lt;p&gt;Research is one of the most important stages of documentary production. Browser-based capabilities can help make research workflows more useful when information is available through web pages that require more advanced browser interaction.&lt;/p&gt;

&lt;p&gt;The intended direction is to improve how creators gather and work with information from online sources.&lt;/p&gt;

&lt;h3&gt;
  
  
  5. Best Use of Ultramarine (Paper Instruments)
&lt;/h3&gt;

&lt;p&gt;Paper Instruments is another technology I would like to highlight in the project.&lt;/p&gt;

&lt;p&gt;The goal is to explore how its capabilities can contribute to the documentary workflow and support the wider production experience.&lt;/p&gt;

&lt;p&gt;The important idea is to use partner technology as part of a practical product workflow, not simply mention a technology because it is available.&lt;/p&gt;

&lt;h2&gt;
  
  
  What's Next?
&lt;/h2&gt;

&lt;p&gt;Ghost Reel is an evolving project. The current version focuses on organising the documentary workflow and preparing the materials needed for production.&lt;/p&gt;

&lt;p&gt;There are several major areas I want to develop next.&lt;/p&gt;

&lt;h3&gt;
  
  
  Video Rendering and MP4 Export
&lt;/h3&gt;

&lt;p&gt;The next major step is to turn the prepared documentary materials into an actual video.&lt;/p&gt;

&lt;p&gt;This includes combining narration, visuals, captions, scene timing, and transitions into a finished MP4 file.&lt;/p&gt;

&lt;h3&gt;
  
  
  Visual Asset Acquisition
&lt;/h3&gt;

&lt;p&gt;A documentary needs visuals that support its story.&lt;/p&gt;

&lt;p&gt;The next stage is to improve how visual assets are discovered, organised, and associated with individual scenes.&lt;/p&gt;

&lt;h3&gt;
  
  
  Timeline Editor
&lt;/h3&gt;

&lt;p&gt;A scene-based timeline editor would give creators more control over the final documentary.&lt;/p&gt;

&lt;p&gt;It could bring narration, visuals, captions, and transitions into one editing environment.&lt;/p&gt;

&lt;h3&gt;
  
  
  More Advanced Research
&lt;/h3&gt;

&lt;p&gt;Research can become more powerful through additional integrations and improved source handling.&lt;/p&gt;

&lt;p&gt;The aim is to make it easier to work with different types of web sources while keeping the research process organised.&lt;/p&gt;

&lt;h3&gt;
  
  
  Backup and Portability
&lt;/h3&gt;

&lt;p&gt;Device backup and project portability are also part of the future direction.&lt;/p&gt;

&lt;p&gt;Creators should be able to protect their work and continue developing projects across devices.&lt;/p&gt;

&lt;h2&gt;
  
  
  Final Thoughts
&lt;/h2&gt;

&lt;p&gt;Building Ghost Reel has been an opportunity to bring together mobile development, AI-assisted writing, research, and audio generation into one creative product.&lt;/p&gt;

&lt;p&gt;The project is not finished in every possible sense. Video rendering, visual asset acquisition, and the timeline editor are still future development goals.&lt;/p&gt;

&lt;p&gt;But the foundation is there: a mobile workspace where a creator can start with an idea, organise research, develop a documentary script, prepare narration, and plan scenes.&lt;/p&gt;

&lt;p&gt;My goal is to keep improving Ghost Reel until it becomes a complete documentary-production studio that creators can carry with them.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Project:&lt;/strong&gt; Ghost Reel&lt;br&gt;&lt;br&gt;
&lt;strong&gt;GitHub Repository:&lt;/strong&gt; &lt;a href="https://github.com/maisamabbas0323/ghostreel.git" rel="noopener noreferrer"&gt;https://github.com/maisamabbas0323/ghostreel.git&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Built with:&lt;/strong&gt; Expo, React Native, TypeScript, SQLite, Google AI Studio, and ElevenLabs.&lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>hf26challenge</category>
      <category>ai</category>
      <category>programming</category>
    </item>
    <item>
      <title>$1,000,000 for Open Source. The people behind the code deserve more recognition.</title>
      <dc:creator>Maisam Abbas</dc:creator>
      <pubDate>Sun, 25 Oct 2026 09:10:03 +0000</pubDate>
      <link>https://dev.to/maisamabbas0323/1000000-for-open-source-the-people-behind-the-code-deserve-more-recognition-3fp4</link>
      <guid>https://dev.to/maisamabbas0323/1000000-for-open-source-the-people-behind-the-code-deserve-more-recognition-3fp4</guid>
      <description>&lt;p&gt;Think about the tools you use every day as a developer.&lt;/p&gt;

&lt;p&gt;JavaScript libraries. Frameworks. Databases. Testing tools. Build systems.&lt;/p&gt;

&lt;p&gt;Many of them exist because developers spend countless hours building, fixing, securing, and maintaining open-source software.&lt;/p&gt;

&lt;p&gt;But here’s the question:&lt;/p&gt;

&lt;p&gt;If companies build billion-dollar products using open-source software, who supports the people maintaining it?&lt;/p&gt;

&lt;p&gt;On October 21, 2026, Sentry announced that it had increased its annual open-source funding to $1 million.&lt;/p&gt;

&lt;p&gt;The funding supports maintainers, critical dependencies, and open-source foundations. It includes $495,000 distributed through thanks.dev and $100,000 allocated through ecosyste.ms Funds. &lt;cite&gt;&lt;/cite&gt;&lt;/p&gt;

&lt;p&gt;This matters because open source is not simply code that everyone can download.&lt;/p&gt;

&lt;p&gt;It is people giving their time to build tools that the entire world depends on.&lt;/p&gt;

&lt;p&gt;Maintainers deserve sustainable funding, recognition, and support—not just another issue report or pull request.&lt;/p&gt;

&lt;p&gt;My takeaway?&lt;/p&gt;

&lt;p&gt;If your company depends on open source, giving back should be part of the business model.&lt;/p&gt;

&lt;p&gt;And if you are a developer, consider sponsoring the projects you rely on, contributing code, improving documentation, or helping maintainers with issue triage.&lt;/p&gt;

&lt;p&gt;Small contributions can make a real difference.&lt;/p&gt;

&lt;p&gt;Read Sentry’s announcement:&lt;br&gt;
&lt;a href="https://sentry-blog.sentry.dev/another-year-another-1-000-000-to-open-source-maintainers/" rel="noopener noreferrer"&gt;https://sentry-blog.sentry.dev/another-year-another-1-000-000-to-open-source-maintainers/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;What do you think: Should companies be expected to financially support the open-source projects they depend on?&lt;/p&gt;

</description>
      <category>ai</category>
      <category>webdev</category>
      <category>programming</category>
      <category>opensource</category>
    </item>
    <item>
      <title>Flowloom: Connect It Once. Let It Run. — Building a More Human Way to Automate Work</title>
      <dc:creator>Maisam Abbas</dc:creator>
      <pubDate>Fri, 23 Oct 2026 07:34:50 +0000</pubDate>
      <link>https://dev.to/maisamabbas0323/flowloom-connect-it-once-let-it-run-building-a-more-human-way-to-automate-work-3ale</link>
      <guid>https://dev.to/maisamabbas0323/flowloom-connect-it-once-let-it-run-building-a-more-human-way-to-automate-work-3ale</guid>
      <description>&lt;h2&gt;
  
  
  Flowloom:
&lt;/h2&gt;

&lt;p&gt;&lt;em&gt;This is my submission for the &lt;a href="https://dev.to/challenges/hacktoberfest-week3-2026-10-19"&gt;Hacktoberfest Open-Source AI Challenge — Week 3: Slow and Steady&lt;/a&gt;.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What if the smartest thing we could do with technology was make it possible to do less repetitive work?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Think about a normal day as a developer.&lt;/p&gt;

&lt;p&gt;You open a browser, visit a website, collect information, clean up some text, ask an AI model to process it, check the result, move information into another tool, and repeat the same process the following day.&lt;/p&gt;

&lt;p&gt;None of those individual steps may be particularly difficult. But together, they consume time, attention, and energy that could have been spent building something meaningful.&lt;/p&gt;

&lt;p&gt;I started building &lt;strong&gt;Flowloom&lt;/strong&gt; around a simple question:&lt;/p&gt;

&lt;p&gt;&lt;em&gt;What if we could connect those steps once, run them as a workflow, and stop repeating the same manual process every time?&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Flowloom is my Electron.js desktop application for visual workflow automation. It brings together workflow design, execution, browser automation, open-model AI, voice feedback, and document-oriented integrations in one environment.&lt;/p&gt;

&lt;p&gt;The idea is simple: &lt;strong&gt;less repetitive work, more control over how that work gets done.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;And for this week's theme, &lt;em&gt;Slow and Steady&lt;/em&gt;, that is exactly the problem I wanted to explore.&lt;/p&gt;

&lt;h2&gt;
  
  
  What I Built
&lt;/h2&gt;

&lt;p&gt;Flowloom is a visual workflow automation desktop application designed to turn repetitive sequences of actions into reusable workflows.&lt;/p&gt;

&lt;p&gt;Instead of treating every task as a separate script or manually coordinating different services, Flowloom gives users a visual environment where workflow steps can be connected, executed, and inspected.&lt;/p&gt;

&lt;p&gt;A workflow can be thought of as a sequence of small responsibilities:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;A trigger starts the process.&lt;/li&gt;
&lt;li&gt;A data or text node prepares information.&lt;/li&gt;
&lt;li&gt;A browser action interacts with a website.&lt;/li&gt;
&lt;li&gt;A condition determines which path to follow.&lt;/li&gt;
&lt;li&gt;A delay or wait node controls timing.&lt;/li&gt;
&lt;li&gt;An AI-powered step processes information when needed.&lt;/li&gt;
&lt;li&gt;Logs and execution history help explain what happened.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The goal is to make automation easier to understand without sacrificing the technical capabilities that make it useful.&lt;/p&gt;

&lt;h3&gt;
  
  
  The problem is not always the task. It is repeating the task.
&lt;/h3&gt;

&lt;p&gt;Imagine having to collect information from a web page every morning.&lt;/p&gt;

&lt;p&gt;First, you open the browser. Then you navigate to the page, locate the relevant information, copy it, clean up the text, and move it somewhere useful. If the information needs further analysis, you might send it to an AI model. If the process involves a decision, you need to evaluate the result before moving forward.&lt;/p&gt;

&lt;p&gt;Now imagine doing that for several pages, every day.&lt;/p&gt;

&lt;p&gt;You are not necessarily solving a new problem each time. You are repeating a process you already understand.&lt;/p&gt;

&lt;p&gt;That is the kind of friction Flowloom aims to reduce.&lt;/p&gt;

&lt;p&gt;Rather than manually coordinating every action, users can organize the steps into a reusable workflow. Once configured and verified, that workflow can be executed again, with its progress and results available for inspection.&lt;/p&gt;

&lt;p&gt;This is what makes the idea interesting to me: the application is not just about automating a single action. It is about making entire sequences of work easier to repeat.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fjne7lezp8lddezwcfdw4.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fjne7lezp8lddezwcfdw4.png" alt="image1" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  What Flowloom brings together
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;1. Visual workflow editing&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The workflow editor is the starting point. Users can arrange nodes, connect steps, and organize the sequence of actions that make up an automation.&lt;/p&gt;

&lt;p&gt;The visual approach helps make the structure of a workflow easier to understand. Instead of searching through a long script to discover what happens next, users can inspect the connected steps.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;2. A real execution layer&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;A visual workflow is only useful if the application can execute it.&lt;/p&gt;

&lt;p&gt;Flowloom includes an execution engine designed around workflow nodes, conditions, delays, cancellation, execution history, and logging. These capabilities provide the foundation for turning a diagram into a process that actually runs.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;3. Browser automation&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Many repetitive tasks happen inside a browser. Flowloom integrates Browserbase to support browser-oriented workflows, bringing web interaction into the same environment as the rest of the automation.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;4. Open-model AI&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Some workflows need more than fixed rules. They may need to interpret text, summarize information, or transform content.&lt;/p&gt;

&lt;p&gt;Flowloom is designed to support Gemma through configurable provider options, including Google, OpenRouter, and Ollama, depending on the selected setup.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;5. Voice feedback&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Automation should not always require users to stare at a screen and monitor every step.&lt;/p&gt;

&lt;p&gt;The ElevenLabs integration is intended to provide spoken feedback for important execution events, making it possible to hear relevant updates while working on something else.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;6. Document-oriented workflows&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Documents are another source of repetitive work. Paper Instruments' Ultramarine model offers a potential way to bring AI-powered research, analysis, and drafting into workflows, while its document-related tools can support additional document-processing use cases.&lt;/p&gt;

&lt;p&gt;The key is to use each integration for a real responsibility rather than adding a service simply to make a technology list look impressive.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why I Chose a Desktop Application
&lt;/h2&gt;

&lt;p&gt;I chose Electron.js because I wanted Flowloom to feel like a tool developers can work with directly, rather than just another web page they need to keep open.&lt;/p&gt;

&lt;p&gt;Desktop applications provide a natural environment for settings, local configuration, workflow management, and persistent application state.&lt;/p&gt;

&lt;p&gt;Electron also allows the application to use familiar web technologies for its interface while providing access to desktop capabilities through a carefully designed application architecture.&lt;/p&gt;

&lt;p&gt;That does not automatically make every operation local or offline. External integrations still require their respective services and network connections, and local model inference depends on the user's configuration and available hardware.&lt;/p&gt;

&lt;p&gt;However, the desktop approach creates room to combine local workflow management with optional external services.&lt;/p&gt;

&lt;p&gt;The result I am working toward is an application that feels approachable on the surface while giving users meaningful control over how their workflows are configured and executed.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fa22uj36ojhou6mzo23o3.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fa22uj36ojhou6mzo23o3.png" alt="image2" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  The Architecture: One Workflow, Multiple Capabilities
&lt;/h2&gt;

&lt;p&gt;One of the most important ideas behind Flowloom is that individual integrations should contribute to a common execution model.&lt;/p&gt;

&lt;p&gt;Consider a hypothetical information-processing workflow:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;A trigger starts the workflow.&lt;/li&gt;
&lt;li&gt;A browser action visits a configured website.&lt;/li&gt;
&lt;li&gt;The workflow passes the collected information to a processing step.&lt;/li&gt;
&lt;li&gt;Gemma helps transform or summarize the text.&lt;/li&gt;
&lt;li&gt;A condition evaluates the result.&lt;/li&gt;
&lt;li&gt;A document-oriented step can process the relevant content when configured.&lt;/li&gt;
&lt;li&gt;Logs record the execution so the user can inspect the outcome.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;This is an example of the intended workflow pattern, not a claim that every combination of these steps has already been verified end to end.&lt;/p&gt;

&lt;p&gt;The important architectural principle is that each step has a clear responsibility and can pass information to the next step.&lt;/p&gt;

&lt;p&gt;That separation matters. A browser integration should handle browser-related work. An AI provider should handle the language task it has been given. A condition should make a decision based on its inputs. The execution engine should coordinate the sequence and make its state visible.&lt;/p&gt;

&lt;p&gt;When these responsibilities are separated, the application becomes easier to extend, test, and maintain.&lt;/p&gt;

&lt;p&gt;It also creates opportunities to replace one provider without having to redesign every workflow around it.&lt;/p&gt;

&lt;h2&gt;
  
  
  How I Built It
&lt;/h2&gt;

&lt;p&gt;Flowloom is built with Electron.js, with a focus on a visual workflow editor, a reusable execution engine, persistent workflows, and integrations with external AI and automation services.&lt;/p&gt;

&lt;p&gt;I approached the project incrementally rather than trying to build every capability in a single step.&lt;/p&gt;

&lt;h3&gt;
  
  
  First: Establish the desktop foundation
&lt;/h3&gt;

&lt;p&gt;The first priority was to create the application structure, its interface, and its settings architecture.&lt;/p&gt;

&lt;p&gt;A desktop application needs more than an attractive window. It needs a clear separation between the user interface and privileged operations, predictable configuration, and a structure that can support additional capabilities without becoming difficult to maintain.&lt;/p&gt;

&lt;h3&gt;
  
  
  Second: Build the workflow editor
&lt;/h3&gt;

&lt;p&gt;The next step was the visual workflow environment.&lt;/p&gt;

&lt;p&gt;The editor provides a way to represent a process as connected nodes. This matters because the workflow itself should be understandable, not hidden behind implementation details.&lt;/p&gt;

&lt;p&gt;The interface is intended to make the relationship between individual actions visible and help users understand how one step leads to another.&lt;/p&gt;

&lt;h3&gt;
  
  
  Third: Make workflows executable
&lt;/h3&gt;

&lt;p&gt;The execution engine connects the visual structure to actual behavior.&lt;/p&gt;

&lt;p&gt;Conditions, delays, cancellation, logging, and execution history are important because real workflows do not always follow a perfect path. They may need to wait, branch, stop, or expose an error.&lt;/p&gt;

&lt;p&gt;An automation tool should not simply display a successful-looking diagram. It should make it possible to understand what happened when the workflow ran.&lt;/p&gt;

&lt;h3&gt;
  
  
  Fourth: Integrate specialized services
&lt;/h3&gt;

&lt;p&gt;The project then brings together different capabilities through configurable integrations.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Gemma&lt;/strong&gt; supports the open-model direction of the project.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Browserbase&lt;/strong&gt; provides the browser-automation integration.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;ElevenLabs&lt;/strong&gt; supports the voice-feedback experience.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Paper Instruments' Ultramarine&lt;/strong&gt; offers an AI model for research, analysis, drafting, and other suitable text-processing tasks.&lt;/p&gt;

&lt;p&gt;Each service has a different role. The purpose of the architecture is to let these capabilities contribute to a workflow rather than forcing users to treat them as completely separate tools.&lt;/p&gt;

&lt;h3&gt;
  
  
  Fifth: Focus on configuration and reliability
&lt;/h3&gt;

&lt;p&gt;API credentials should be configured securely, not embedded in source code. Model identifiers should follow the actual provider's supported configuration. External service failures should not be disguised as successful execution.&lt;/p&gt;

&lt;p&gt;These details may be less visible than the interface, but they are essential for a trustworthy automation application.&lt;/p&gt;

&lt;p&gt;My aim is to keep improving Flowloom as a real developer tool, with meaningful execution behavior and clear feedback rather than a collection of attractive but disconnected demonstrations.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fubyn5j78ccce3oaamx6b.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fubyn5j78ccce3oaamx6b.png" alt="image3" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  The Role of Gemma: Open-Model Intelligence Inside a Workflow
&lt;/h2&gt;

&lt;p&gt;Gemma is particularly relevant to Flowloom because the project is not just about invoking an AI model in isolation. It is about making model capabilities available as part of a larger process.&lt;/p&gt;

&lt;p&gt;A workflow may need to summarize text, transform information into a more useful format, or help prepare content for a later step.&lt;/p&gt;

&lt;p&gt;With an open-weight model such as Gemma, developers have more flexibility over how they deploy and integrate language intelligence.&lt;/p&gt;

&lt;p&gt;Depending on the chosen provider and configuration, a model can be accessed through a hosted service or run locally through a compatible setup.&lt;/p&gt;

&lt;p&gt;That flexibility is valuable because not every workflow has the same requirements.&lt;/p&gt;

&lt;p&gt;Some users prioritize convenience. Others care more about cost, data handling, local execution, or the ability to change models as their needs evolve.&lt;/p&gt;

&lt;p&gt;Flowloom's configurable provider approach is intended to accommodate those different choices.&lt;/p&gt;

&lt;p&gt;The broader idea is that an AI model should be one component in a workflow, not a permanent dependency that dictates how the entire application must operate.&lt;/p&gt;

&lt;h2&gt;
  
  
  Browserbase: Bringing the Browser Into the Workflow
&lt;/h2&gt;

&lt;p&gt;Browsers are where much of everyday digital work happens.&lt;/p&gt;

&lt;p&gt;Research, information gathering, repetitive navigation, and web-based tasks often require the same sequence of interactions over and over again.&lt;/p&gt;

&lt;p&gt;Browserbase makes browser automation a natural part of Flowloom's direction.&lt;/p&gt;

&lt;p&gt;Instead of treating browser activity as a separate process outside the workflow editor, the application can organize browser actions alongside conditions, text processing, and other steps.&lt;/p&gt;

&lt;p&gt;That opens the door to more useful automation patterns.&lt;/p&gt;

&lt;p&gt;For example, a user could design a workflow that visits a configured page, gathers relevant information, and passes it to a later processing step.&lt;/p&gt;

&lt;p&gt;The value is not simply that a browser can be controlled programmatically. It is that browser actions can become part of a larger, reusable process.&lt;/p&gt;

&lt;p&gt;Browser automation also introduces important responsibilities. Websites change, network requests fail, and some actions can have consequences. A serious implementation needs appropriate URL handling, error reporting, cancellation, and clear visibility into what the automation actually did.&lt;/p&gt;

&lt;p&gt;Those considerations are part of making automation dependable rather than merely impressive in a short demonstration.&lt;/p&gt;

&lt;h2&gt;
  
  
  ElevenLabs: Giving Important Events a Voice
&lt;/h2&gt;

&lt;p&gt;Most automation tools communicate through text, logs, and visual indicators.&lt;/p&gt;

&lt;p&gt;That is useful, but it also means users may need to keep looking at the application to understand what is happening.&lt;/p&gt;

&lt;p&gt;The ElevenLabs integration explores another possibility: spoken feedback for important workflow events.&lt;/p&gt;

&lt;p&gt;For example, a configured workflow could announce a meaningful status change or provide a short notification when a relevant step finishes.&lt;/p&gt;

&lt;p&gt;The objective is not to narrate every internal operation. Constant narration would quickly become another distraction.&lt;/p&gt;

&lt;p&gt;Instead, voice feedback should be selective and useful.&lt;/p&gt;

&lt;p&gt;This is especially interesting for people who are multitasking or who prefer receiving certain updates without continuously monitoring the application window.&lt;/p&gt;

&lt;p&gt;Voice does not replace execution logs or detailed error information. It complements them by making important events easier to notice.&lt;/p&gt;

&lt;p&gt;For Flowloom, that creates an opportunity to make automation feel less like watching a machine operate and more like receiving useful updates from a tool that is working in the background.&lt;/p&gt;

&lt;h2&gt;
  
  
  Paper Instruments and Ultramarine: AI for Document Work
&lt;/h2&gt;

&lt;p&gt;Documents contain a large amount of the information people work with every day.&lt;/p&gt;

&lt;p&gt;Reading reports, extracting important points, preparing summaries, and transforming unstructured text into something useful can all involve repetitive effort.&lt;/p&gt;

&lt;p&gt;Paper Instruments' Ultramarine model is relevant to this problem because the Hacktoberfest partner category specifically encourages real applications involving research, analysis, drafting, or reasoning over documents.&lt;/p&gt;

&lt;p&gt;In Flowloom, this offers an opportunity to explore document-oriented tasks as part of a workflow.&lt;/p&gt;

&lt;p&gt;A configured process might take text from an earlier step, ask an AI model to analyze or summarize it, and pass the result to another step.&lt;/p&gt;

&lt;p&gt;The document libraries offered by Paper Instruments may also be relevant where actual Word, PowerPoint, or Excel files need to be processed, subject to their documented capabilities and the implementation.&lt;/p&gt;

&lt;p&gt;There is an important distinction here: an AI model processing text is not the same thing as a document-editing library manipulating a real file. Each capability should be integrated according to what it actually supports.&lt;/p&gt;

&lt;p&gt;For this challenge, the most valuable use would be a real, reproducible document-processing workflow with a clear input, useful output, and transparent usage information.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why Does Open Innovation Matter?
&lt;/h2&gt;

&lt;p&gt;This is the part of Flowloom that matters beyond the integrations themselves.&lt;/p&gt;

&lt;p&gt;Open innovation is not just about using a technology with an open-source label. It is about having the freedom to understand, adapt, replace, and build on the components that make an application useful.&lt;/p&gt;

&lt;p&gt;For Flowloom, that freedom matters in several ways.&lt;/p&gt;

&lt;h3&gt;
  
  
  1. Model choice should remain a choice
&lt;/h3&gt;

&lt;p&gt;Different models are useful for different tasks. Different providers have different costs, requirements, and deployment options.&lt;/p&gt;

&lt;p&gt;A workflow application should not force every user into a single model provider if its tasks can be handled through a compatible alternative.&lt;/p&gt;

&lt;p&gt;By designing around configurable providers, Flowloom can make room for different approaches to language intelligence.&lt;/p&gt;

&lt;h3&gt;
  
  
  2. Local inference can offer more control
&lt;/h3&gt;

&lt;p&gt;When a compatible open-weight model runs locally, some processing can happen on the user's own machine rather than being sent to a hosted model service.&lt;/p&gt;

&lt;p&gt;That can be valuable for privacy, experimentation, and reducing dependence on a remote inference endpoint.&lt;/p&gt;

&lt;p&gt;It is not a guarantee that the entire Flowloom application works offline. Browserbase, ElevenLabs, and other hosted integrations still require network access when used. But local model inference can give users a meaningful option for the tasks it supports.&lt;/p&gt;

&lt;h3&gt;
  
  
  3. Interoperability makes experimentation easier
&lt;/h3&gt;

&lt;p&gt;A workflow becomes more flexible when individual steps have clear inputs and outputs.&lt;/p&gt;

&lt;p&gt;If an AI provider can be replaced without rewriting browser automation, or a document-processing step can be added without redesigning the entire interface, experimentation becomes easier.&lt;/p&gt;

&lt;p&gt;That flexibility encourages developers to test alternatives and choose tools according to actual requirements rather than convenience alone.&lt;/p&gt;

&lt;h3&gt;
  
  
  4. Developers can learn from the building blocks
&lt;/h3&gt;

&lt;p&gt;Open models and open-source tools allow developers to study implementation choices, explore alternative configurations, and contribute improvements.&lt;/p&gt;

&lt;p&gt;That matters for a project like Flowloom because automation sits at the intersection of multiple technical areas: application architecture, workflow orchestration, AI integration, browser control, and user experience.&lt;/p&gt;

&lt;p&gt;The more replaceable and understandable the components are, the easier it becomes to keep learning and improving.&lt;/p&gt;

&lt;h3&gt;
  
  
  5. Freedom should include practical trade-offs
&lt;/h3&gt;

&lt;p&gt;Open-weight does not automatically mean free to run in every environment. Local inference requires compatible hardware and consumes resources. Hosted services can have usage charges. External integrations may introduce their own limits.&lt;/p&gt;

&lt;p&gt;A useful open approach makes those trade-offs visible rather than pretending they do not exist.&lt;/p&gt;

&lt;p&gt;For me, open innovation means being able to make those choices instead of having every decision made by a single provider.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Lazy Payoff: Make Repetition a One-Time Design Problem
&lt;/h2&gt;

&lt;p&gt;The theme of &lt;em&gt;Slow and Steady&lt;/em&gt; is a reminder that saving effort does not always require building something enormous.&lt;/p&gt;

&lt;p&gt;Sometimes the most useful improvement is to stop solving the same small problem every day.&lt;/p&gt;

&lt;p&gt;Consider a task that takes five minutes and needs to be repeated ten times.&lt;/p&gt;

&lt;p&gt;That is fifty minutes of repeated work.&lt;/p&gt;

&lt;p&gt;If a reliable workflow reduces the amount of manual coordination required, the benefit can accumulate over time. The value becomes even more noticeable when the workflow is reused across many sessions.&lt;/p&gt;

&lt;p&gt;But there is a catch: an automation only saves time if it works reliably enough to justify the effort of setting it up.&lt;/p&gt;

&lt;p&gt;A workflow that silently fails, produces incorrect information, or requires constant manual repair can create more work than it removes.&lt;/p&gt;

&lt;p&gt;That is why execution history, logs, cancellation, and clear error handling matter as much as the ability to connect nodes.&lt;/p&gt;

&lt;p&gt;The objective is not to automate everything simply because automation is possible.&lt;/p&gt;

&lt;p&gt;It is to identify repetitive work, design a process that genuinely helps, verify that it behaves as expected, and reuse it when the same need comes back.&lt;/p&gt;

&lt;p&gt;I am not claiming a measured percentage of time saved without verified before-and-after results. The practical payoff I am targeting is reduced repetition and a more reusable way to coordinate everyday tasks.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Do the work of designing the process once. Let the process do its part afterward.&lt;/strong&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  What Makes Flowloom Different From a Single-Purpose AI Tool?
&lt;/h2&gt;

&lt;p&gt;A conventional AI interface usually starts with a question: what do you want the model to generate?&lt;/p&gt;

&lt;p&gt;That is useful for one-off tasks. But many real-world processes involve more than generating text.&lt;/p&gt;

&lt;p&gt;They may require navigating a website, passing information between steps, evaluating a condition, waiting for an operation to finish, processing a result, and recording what happened.&lt;/p&gt;

&lt;p&gt;Flowloom explores a different starting point: &lt;strong&gt;what sequence of actions should happen, and how should those actions work together?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;That shift from a single interaction to a reusable workflow changes the role of AI.&lt;/p&gt;

&lt;p&gt;Instead of being the entire product, AI becomes one of several capabilities that can contribute to a larger process.&lt;/p&gt;

&lt;p&gt;Browser automation can handle web interaction. An open model can process language. A condition can control the next step. Voice feedback can communicate an important event. Logs can preserve a record of execution.&lt;/p&gt;

&lt;p&gt;The workflow provides the structure that connects them.&lt;/p&gt;

&lt;p&gt;That does not make Flowloom a replacement for every specialized tool. Rather, it gives users a place to organize compatible capabilities around a particular task.&lt;/p&gt;

&lt;h2&gt;
  
  
  Challenges and Lessons
&lt;/h2&gt;

&lt;p&gt;Building a desktop automation application introduces problems that are easy to underestimate.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;A visual connection is not the same as a working integration.&lt;/strong&gt; Every node needs a defined behavior, appropriate inputs, meaningful outputs, and error handling.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;External services are not interchangeable in every detail.&lt;/strong&gt; Providers have different authentication methods, API formats, limits, and capabilities. Configuration and integration code need to respect those differences.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Automation must remain observable.&lt;/strong&gt; Users need to know whether a workflow is running, what has completed, and where a failure occurred.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;User control matters.&lt;/strong&gt; Cancellation, careful handling of credentials, and sensible restrictions around browser actions are essential when an application can perform real work.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;A polished interface needs a reliable foundation.&lt;/strong&gt; A clean workflow editor is valuable, but its usefulness depends on the execution engine underneath it.&lt;/p&gt;

&lt;p&gt;These lessons reinforce the same principle: a successful automation application needs to balance ease of use with transparency and control.&lt;/p&gt;

&lt;h2&gt;
  
  
  How to Explore the Code
&lt;/h2&gt;

&lt;p&gt;Flowloom is available on GitHub:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;a href="https://github.com/maisamabbas0323/flowloom" rel="noopener noreferrer"&gt;maisamabbas0323/flowloom&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Clone the repository:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;git clone https://github.com/maisamabbas0323/flowloom.git
&lt;span class="nb"&gt;cd &lt;/span&gt;flowloom
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;For installation and development, follow the repository's current README and setup instructions.&lt;/p&gt;

&lt;p&gt;Depending on which integrations you want to use, you may need to configure credentials for the relevant services. Keep secrets in local environment configuration and never commit API keys to a public repository.&lt;/p&gt;

&lt;p&gt;The project is being developed around the idea of a desktop workflow environment that can grow as additional nodes and integrations become useful.&lt;/p&gt;

&lt;p&gt;If you explore the repository, I would be interested in feedback on workflow design, execution reliability, integration boundaries, and ways to make automation more understandable.&lt;/p&gt;

&lt;h2&gt;
  
  
  Prize Categories
&lt;/h2&gt;

&lt;p&gt;For this submission, I am focusing on categories that align with Flowloom's actual technology and intended capabilities.&lt;/p&gt;

&lt;p&gt;The official Week 3 challenge lists a $250 overall prize, six featured categories worth $200 each, and partner categories worth $100 each. A valid submission can be considered for the overall prize and every partner category it genuinely qualifies for, although a participant can win only once in the challenge. See the &lt;a href="https://dev.to/challenges/hacktoberfest-week3-2026-10-19"&gt;official Week 3 challenge page&lt;/a&gt; for the full rules and criteria.&lt;/p&gt;

&lt;h3&gt;
  
  
  Best Use of Gemma — $200
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;My strongest featured-category target.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Flowloom is built around the idea that open-model AI should contribute to useful, repeatable workflows rather than remain isolated in a chat interface.&lt;/p&gt;

&lt;p&gt;Gemma can support language-processing tasks inside those workflows, while configurable provider options give users flexibility in how they access the model.&lt;/p&gt;

&lt;p&gt;To make this category especially strong, the project should demonstrate a concrete Gemma-powered workflow: show the input, explain the task, display the resulting output, and make clear which provider and model were used.&lt;/p&gt;

&lt;p&gt;The important point is not merely mentioning Gemma. It is demonstrating how the open-weight model makes the application more useful and why that use fits the &lt;em&gt;Slow and Steady&lt;/em&gt; theme.&lt;/p&gt;

&lt;h3&gt;
  
  
  Best Use of Browserbase — $100
&lt;/h3&gt;

&lt;p&gt;Browserbase fits Flowloom's goal of making browser tasks part of reusable workflows.&lt;/p&gt;

&lt;p&gt;Rather than automating a website as a disconnected, one-off script, the application can organize browser interaction alongside other workflow steps.&lt;/p&gt;

&lt;p&gt;A compelling entry would show a real browser action, explain the information it returns, and demonstrate how that output is used by the next step.&lt;/p&gt;

&lt;p&gt;The strongest evidence would be a reproducible end-to-end workflow, with execution logs or screenshots that distinguish actual browser activity from a static mockup.&lt;/p&gt;

&lt;h3&gt;
  
  
  Best Use of ElevenLabs — $100
&lt;/h3&gt;

&lt;p&gt;ElevenLabs adds a voice dimension to the workflow experience.&lt;/p&gt;

&lt;p&gt;The idea is to communicate important execution events through spoken feedback, allowing users to stay informed without constantly watching the application.&lt;/p&gt;

&lt;p&gt;For this category, the clearest demonstration would show a meaningful workflow event, the corresponding spoken output, and why that notification is more useful than simply adding narration everywhere.&lt;/p&gt;

&lt;p&gt;A focused, practical use of voice is stronger than adding speech without a clear purpose.&lt;/p&gt;

&lt;h3&gt;
  
  
  Best Use of Ultramarine — Paper Instruments — $100
&lt;/h3&gt;

&lt;p&gt;Paper Instruments' Ultramarine model is a separate partner-category opportunity.&lt;/p&gt;

&lt;p&gt;The challenge specifically encourages using Ultramarine for real research, analysis, drafting, or document-oriented reasoning, and asks entrants to state what their run actually cost.&lt;/p&gt;

&lt;p&gt;For Flowloom, the most convincing use would be a working node that accepts real input, performs a useful AI task through Ultramarine, and passes the result to a subsequent workflow step.&lt;/p&gt;

&lt;p&gt;If the workflow processes a document, it should be clear whether the model is analyzing extracted text or a separate library is manipulating the actual file.&lt;/p&gt;

&lt;p&gt;For a strong submission, I would include the model configuration, a small reproducible example, the resulting output, and the actual usage cost reported by the service. I would not invent cost savings or remaining credit.&lt;/p&gt;

&lt;h3&gt;
  
  
  The overall Hacktoberfest prize — $250
&lt;/h3&gt;

&lt;p&gt;The overall prize is not tied to a single partner. It rewards the strength of the project as a whole.&lt;/p&gt;

&lt;p&gt;For Flowloom, that means telling a clear story about the problem, explaining how the workflow engine works, showing that the integrations perform meaningful tasks, and demonstrating why open-model flexibility matters.&lt;/p&gt;

&lt;p&gt;The project should stand on its own even if a judge does not focus on any individual partner integration.&lt;/p&gt;

&lt;p&gt;The most important evidence is a working application that addresses repetitive work, uses open-source AI or an open-weight model meaningfully, and communicates its design and trade-offs clearly.&lt;/p&gt;

&lt;h3&gt;
  
  
  My strategy
&lt;/h3&gt;

&lt;p&gt;I am prioritizing &lt;strong&gt;Best Use of Gemma&lt;/strong&gt; as the featured category and exploring Browserbase, ElevenLabs, and Ultramarine as partner categories where the implementation supports a genuine entry.&lt;/p&gt;

&lt;p&gt;I would rather demonstrate a smaller number of real, well-explained capabilities than claim every category based on a service name or an API key alone.&lt;/p&gt;

&lt;p&gt;The challenge asks builders to show what they made, how it works, and why open innovation matters. That is the standard I want Flowloom to meet.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Prize eligibility is determined by the official rules and judges, not by the categories listed in a post.&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  What's Next?
&lt;/h2&gt;

&lt;p&gt;Flowloom is an ongoing project, and the next steps are about making its workflows more dependable, understandable, and useful.&lt;/p&gt;

&lt;p&gt;I want to continue improving the relationship between the visual editor and the execution engine, make integration behavior easier to inspect, and ensure that errors and limitations are visible rather than hidden behind a polished interface.&lt;/p&gt;

&lt;p&gt;I also want to explore more real-world examples where multiple workflow steps work together to solve a problem that would otherwise require repetitive manual effort.&lt;/p&gt;

&lt;p&gt;The larger vision is a desktop environment where developers can choose their AI models and services, design workflows visually, and reuse those workflows whenever the same task returns.&lt;/p&gt;

&lt;p&gt;Not every task needs an agent. Not every problem needs another API. And not every useful automation needs to be complicated.&lt;/p&gt;

&lt;p&gt;Sometimes, the most valuable thing software can do is give us back the time we spend repeating ourselves.&lt;/p&gt;

&lt;h2&gt;
  
  
  Final Thoughts
&lt;/h2&gt;

&lt;p&gt;Building Flowloom has made me think about automation less as a collection of impressive capabilities and more as a question of how technology fits into everyday work.&lt;/p&gt;

&lt;p&gt;A visual editor is useful when it makes a process easier to understand. An AI model is useful when it solves a real problem. Browser automation is useful when it removes repetitive interaction. Voice feedback is useful when it communicates something worth hearing.&lt;/p&gt;

&lt;p&gt;The real opportunity appears when those capabilities work together in a reusable process.&lt;/p&gt;

&lt;p&gt;That is the idea I wanted to explore with Flowloom: an application where open-model AI and specialized tools can contribute to a workflow that users can configure, run, and inspect.&lt;/p&gt;

&lt;p&gt;The &lt;em&gt;Slow and Steady&lt;/em&gt; theme is a good fit because meaningful productivity is not always about moving faster. Sometimes it is about removing the unnecessary work that keeps making us repeat the same steps.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Flowloom — Connect it once. Let it run.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Built with a simple goal: less repetition, more control, and more time for the work that matters.&lt;/p&gt;




&lt;p&gt;&lt;strong&gt;Project:&lt;/strong&gt; &lt;a href="https://github.com/maisamabbas0323/flowloom" rel="noopener noreferrer"&gt;Flowloom on GitHub&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  Hacktoberfest #OpenSource #AI #Gemma #ElectronJS #Browserbase #ElevenLabs #Ultramarine #PaperInstruments #Automation #DeveloperTools
&lt;/h1&gt;

</description>
      <category>devchallenge</category>
      <category>hf26challenge</category>
    </item>
    <item>
      <title>PHP2Shell: Two Critical PHP Vulnerabilities Every Developer Should Know About</title>
      <dc:creator>Maisam Abbas</dc:creator>
      <pubDate>Fri, 23 Oct 2026 03:25:32 +0000</pubDate>
      <link>https://dev.to/maisamabbas0323/php2shell-two-critical-php-vulnerabilities-every-developer-should-know-about-53dk</link>
      <guid>https://dev.to/maisamabbas0323/php2shell-two-critical-php-vulnerabilities-every-developer-should-know-about-53dk</guid>
      <description>&lt;p&gt;A security alert that every web developer should pay attention to.&lt;/p&gt;

&lt;p&gt;According to The Hacker News, two critical vulnerabilities in PHP have been identified:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;CVE-2026-109618&lt;/li&gt;
&lt;li&gt;CVE-2026-109619&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Both have a reported CVSS v4.0 score of 9.2/10. They could allow attackers to execute malicious code on vulnerable servers without logging in. PHP released security fixes on October 21, 2026.&lt;/p&gt;

&lt;p&gt;Why does this matter?&lt;/p&gt;

&lt;p&gt;PHP powers many websites and web applications. A vulnerability in the PHP runtime can put a website at risk even when its application code appears secure.&lt;/p&gt;

&lt;p&gt;What should developers do?&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Check which PHP version their servers are running.&lt;/li&gt;
&lt;li&gt;Apply the appropriate security updates immediately.&lt;/li&gt;
&lt;li&gt;Restart PHP workers and verify that the patches are active.&lt;/li&gt;
&lt;li&gt;Review server logs for suspicious activity.&lt;/li&gt;
&lt;li&gt;Avoid running untrusted exploit scripts found online.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The key lesson is simple: writing secure code is important, but keeping the underlying technology updated is equally important.&lt;/p&gt;

&lt;p&gt;Security is not something we do once. It is part of every developer's responsibility.&lt;/p&gt;

&lt;p&gt;Read the full report from The Hacker News:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://thehackernews.com/2026/10/php2shell-two-unpatched-critical-php.html" rel="noopener noreferrer"&gt;https://thehackernews.com/2026/10/php2shell-two-unpatched-critical-php.html&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;What do you think: do developers pay enough attention to server-level security, or do most people focus only on their application code?&lt;/p&gt;

&lt;h1&gt;
  
  
  CyberSecurity #PHP #InfoSec #WebDevelopment #DevSecOps #DEVCommunity
&lt;/h1&gt;

</description>
      <category>cybersecurity</category>
      <category>php</category>
      <category>security</category>
      <category>vulnerabilities</category>
    </item>
    <item>
      <title>VoxTerm: the terminal that listens — my side hustle for Hacktoberfest Week 2</title>
      <dc:creator>Maisam Abbas</dc:creator>
      <pubDate>Sun, 18 Oct 2026 09:20:22 +0000</pubDate>
      <link>https://dev.to/maisamabbas0323/voxterm-the-terminal-that-listens-my-side-hustle-for-hacktoberfest-week-2-3ng0</link>
      <guid>https://dev.to/maisamabbas0323/voxterm-the-terminal-that-listens-my-side-hustle-for-hacktoberfest-week-2-3ng0</guid>
      <description>&lt;p&gt;I type for a living. So do you, probably. And somewhere along the way we all&lt;br&gt;
started typing &lt;em&gt;more&lt;/em&gt; — not to write code, but to explain what we want the code&lt;br&gt;
to do. Long, careful prompts. Paragraphs that are really just me talking to a&lt;br&gt;
machine that only listens through a keyboard.&lt;/p&gt;

&lt;p&gt;One night I caught myself: I had a perfect sentence in my head, and I was&lt;br&gt;
hunting for the keys to spell it out one letter at a time. That felt absurd.&lt;br&gt;
I own a microphone. My computer owns a microphone. Why am I still typing?&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;VoxTerm&lt;/strong&gt; started as a question — &lt;em&gt;what if the terminal just listened?&lt;/em&gt; — and&lt;br&gt;
became a genuine side-hustle-shaped product: a premium desktop workspace for&lt;br&gt;
real operating-system shells where you dictate a prompt, it gets cleaned up by&lt;br&gt;
an open-weight model, and it lands in your shell ready to run. You still press&lt;br&gt;
Enter. That part matters.&lt;/p&gt;


&lt;h2&gt;
  
  
  What I Built
&lt;/h2&gt;

&lt;p&gt;VoxTerm is a &lt;strong&gt;desktop terminal workspace&lt;/strong&gt; (Electron + React + xterm.js) built&lt;br&gt;
around one honest idea: &lt;em&gt;every button does the thing it says, or it tells you why&lt;br&gt;
it can't.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;It is a real terminal first — genuine &lt;code&gt;node-pty&lt;/code&gt; sessions running bash, zsh,&lt;br&gt;
fish, anything on your &lt;code&gt;$PATH&lt;/code&gt;, with correct input/output, resize, Unicode and&lt;br&gt;
cleanup. On top of that foundation it adds the things a developer actually&lt;br&gt;
wants when they're deep in a session:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;🎙 Dictation into the shell.&lt;/strong&gt; Hold a hotkey, speak, release. Your words are
transcribed and typed into the active terminal. Never auto-executed — you
review and hit Enter.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;🤖 Prompt cleanup with open-weight Gemma.&lt;/strong&gt; The raw transcript gets rewritten
by a fallback chain — local &lt;strong&gt;Ollama&lt;/strong&gt; first, then &lt;strong&gt;Google's hosted Gemma&lt;/strong&gt; —
so "make it list the big files in downloads" becomes a crisp shell command.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;🔒 A real privacy switch.&lt;/strong&gt; Local-only mode refuses &lt;em&gt;every&lt;/em&gt; cloud request at
the service layer. Pair it with Ollama and nothing ever leaves the machine.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;🖧 Attach to sessions you already have.&lt;/strong&gt; Live discovery of tmux/screen
sessions running &lt;em&gt;outside&lt;/em&gt; the app, with exact &lt;code&gt;$N&lt;/code&gt;-id targeting and honest
caveats when a session is shared.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;🔊 Spoken announcements.&lt;/strong&gt; ElevenLabs text-to-speech for events the app can
actually confirm — a build error, a session exit, an agent milestone.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;🧩 Agent-agnostic.&lt;/strong&gt; OpenCode, Claude Code, Codex CLI, Gemini CLI, Aider —
detected by what's genuinely installed, nothing fabricated.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Who would pay for it?&lt;/strong&gt; This is aimed at the professional who lives in a&lt;br&gt;
terminal and bills by the hour — backend and platform engineers, DevOps and SRE&lt;br&gt;
folks, data engineers, and the fast-growing crowd of developers who now drive&lt;br&gt;
coding agents from the CLI all day. For them, typing is the last slow part of&lt;br&gt;
the loop. A tool that removes friction &lt;em&gt;without removing control&lt;/em&gt; is worth&lt;br&gt;
money.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The problem it solves, in one line:&lt;/strong&gt; it turns the most tedious part of&lt;br&gt;
working with AI — writing the prompt — into the most natural thing a human does:&lt;br&gt;
talking. And it does it without ever taking the wheel away from the driver.&lt;/p&gt;



&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fo8mchwb3rf70swzd5lyc.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fo8mchwb3rf70swzd5lyc.png" alt="VoxTerm's Terminals view — a real node-pty shell with a dictation toast after a voice insert" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;The Terminals view. Real shells, real tabs, and a dictation that just landed as&lt;br&gt;
editable text — not an executed command.&lt;/em&gt;&lt;/p&gt;


&lt;h2&gt;
  
  
  Code
&lt;/h2&gt;

&lt;p&gt;The whole thing is open source under MIT:&lt;/p&gt;


&lt;div class="ltag-github-readme-tag"&gt;
  &lt;div class="readme-overview"&gt;
    &lt;h2&gt;
      &lt;img src="https://assets.dev.to/assets/github-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"&gt;
      &lt;a href="https://github.com/maisamabbas0323" rel="noopener noreferrer"&gt;
        maisamabbas0323
      &lt;/a&gt; / &lt;a href="https://github.com/maisamabbas0323/voxterm" rel="noopener noreferrer"&gt;
        voxterm
      &lt;/a&gt;
    &lt;/h2&gt;
    &lt;h3&gt;
      VoxTerm 'hacktoberfest week#2 challange' is a cross-platform voice-controlled terminal for developers, enabling natural multilingual voice commands for OpenCode, Claude Code, Codex, and other coding agents with offline speech recognition and intelligent prompt refinement. Built with Electron.js for Linux, Windows, and macOS.
    &lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="ltag-github-body"&gt;
    
&lt;div id="readme" class="md"&gt;&lt;div&gt;
&lt;a rel="noopener noreferrer" href="https://github.com/maisamabbas0323/voxterm/docs/logo.svg"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fraw.githubusercontent.com%2Fmaisamabbas0323%2Fvoxterm%2FHEAD%2Fdocs%2Flogo.svg" width="120" alt="VoxTerm logo"&gt;&lt;/a&gt;
&lt;div class="markdown-heading"&gt;
&lt;h1 class="heading-element"&gt;VoxTerm&lt;/h1&gt;
&lt;/div&gt;
&lt;p&gt;&lt;strong&gt;Type less. Talk more. Ship code.&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;A premium, voice-ready terminal workspace for developers — real operating-system
shells, speech-to-text dictation, agent-agnostic CLI sessions and an explicit
honest human-in-the-loop workflow.&lt;/p&gt;
&lt;p&gt;&lt;a href="https://github.com/maisamabbas0323/voxterm/./package.json" rel="noopener noreferrer"&gt;&lt;img src="https://camo.githubusercontent.com/69d2a9c4e04382e7755ceaf43b9363ad01e171fdc6bab34ca97dcfab1d1fdcb4/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f76657273696f6e2d302e312e302d363061356661" alt="version"&gt;&lt;/a&gt;
&lt;a href="https://github.com/maisamabbas0323/voxterm/./LICENSE" rel="noopener noreferrer"&gt;&lt;img src="https://camo.githubusercontent.com/8e9671e7a8cd24f1ebfbfab8588d9d0347d4a4526896d15e90bf0a76ce21848f/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d356565616434" alt="license"&gt;&lt;/a&gt;
&lt;a href="https://github.com/maisamabbas0323/voxterm#platform-support" rel="noopener noreferrer"&gt;&lt;img src="https://camo.githubusercontent.com/d6d9fd09097311abd49562d31f85978fdff768bf16f4516a0e602dbc45c40e57/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f706c6174666f726d2d6c696e75782d613738626661" alt="platform"&gt;&lt;/a&gt;
&lt;a href="https://github.com/maisamabbas0323/voxterm/./tsconfig.base.json" rel="noopener noreferrer"&gt;&lt;img src="https://camo.githubusercontent.com/5076e7f744b45576da4450a3c24b43f20e9c2201f142893e299fb33f4bd4b7d5/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f547970655363726970742d7374726963742d3331373863363f6c6f676f3d74797065736372697074266c6f676f436f6c6f723d7768697465" alt="TypeScript"&gt;&lt;/a&gt;
&lt;a href="https://www.electronjs.org" rel="nofollow noopener noreferrer"&gt;&lt;img src="https://camo.githubusercontent.com/25f0a2978948ea74cf2313553c8361ee49ddcb7f6f549d98d78507a1fb7bfbbc/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f456c656374726f6e2d34342d3437383438663f6c6f676f3d656c656374726f6e266c6f676f436f6c6f723d7768697465" alt="Electron"&gt;&lt;/a&gt;
&lt;a href="https://react.dev" rel="nofollow noopener noreferrer"&gt;&lt;img src="https://camo.githubusercontent.com/d705bb5d09b8d2584e6ba982bc01e4bd0a169b864151bfe897dda8666e57ce79/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f52656163742d31392d3631646166623f6c6f676f3d7265616374266c6f676f436f6c6f723d7768697465" alt="React"&gt;&lt;/a&gt;
&lt;a href="https://github.com/maisamabbas0323/voxterm/./tests" rel="noopener noreferrer"&gt;&lt;img src="https://camo.githubusercontent.com/85625311b008b4cbe844c3c44fe6ae353b89f87ca20492c14b474bc8ad0909e2/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f74657374732d31303525323070617373696e672d323863383430" alt="tests"&gt;&lt;/a&gt;
&lt;a href="https://hacktoberfest.com" rel="nofollow noopener noreferrer"&gt;&lt;img src="https://camo.githubusercontent.com/3e1487afc334e6d674ee4fed88133f6c434c68522614931462812b42c231ed96/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4861636b746f626572666573742d323032362d2d5765656b253230322d6666356635373f6c6f676f3d6469676974616c6f6365616e266c6f676f436f6c6f723d7768697465" alt="Hacktoberfest"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;/div&gt;

&lt;div class="markdown-heading"&gt;
&lt;h2 class="heading-element"&gt;Table of contents&lt;/h2&gt;
&lt;/div&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="https://github.com/maisamabbas0323/voxterm#why-voxterm" rel="noopener noreferrer"&gt;Why VoxTerm&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/maisamabbas0323/voxterm#feature-highlights" rel="noopener noreferrer"&gt;Feature highlights&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/maisamabbas0323/voxterm#platform-support" rel="noopener noreferrer"&gt;Platform support&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/maisamabbas0323/voxterm#quick-start" rel="noopener noreferrer"&gt;Quick start&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://github.com/maisamabbas0323/voxterm#configuration" rel="noopener noreferrer"&gt;Configuration&lt;/a&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="https://github.com/maisamabbas0323/voxterm#configuring-from-env" rel="noopener noreferrer"&gt;Configuring from &lt;code&gt;.env&lt;/code&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/maisamabbas0323/voxterm#configuring-in-the-app" rel="noopener noreferrer"&gt;Configuring in the app&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://github.com/maisamabbas0323/voxterm#using-voxterm" rel="noopener noreferrer"&gt;Using VoxTerm&lt;/a&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="https://github.com/maisamabbas0323/voxterm#workspace" rel="noopener noreferrer"&gt;Workspace&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/maisamabbas0323/voxterm#terminals" rel="noopener noreferrer"&gt;Terminals&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/maisamabbas0323/voxterm#dictation-speech-to-text" rel="noopener noreferrer"&gt;Dictation (speech to text)&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/maisamabbas0323/voxterm#prompt-enhancement-gemma" rel="noopener noreferrer"&gt;Prompt enhancement (Gemma)&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/maisamabbas0323/voxterm#announcements-text-to-speech" rel="noopener noreferrer"&gt;Announcements (text to speech)&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/maisamabbas0323/voxterm#attaching-to-tmux--screen-sessions" rel="noopener noreferrer"&gt;Attaching to tmux / screen sessions&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/maisamabbas0323/voxterm#coding-agents" rel="noopener noreferrer"&gt;Coding agents&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/maisamabbas0323/voxterm#activity-log" rel="noopener noreferrer"&gt;Activity log&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/maisamabbas0323/voxterm#keyboard-shortcuts" rel="noopener noreferrer"&gt;Keyboard shortcuts&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/maisamabbas0323/voxterm#settings-reference" rel="noopener noreferrer"&gt;Settings reference&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/maisamabbas0323/voxterm#security--privacy-model" rel="noopener noreferrer"&gt;Security &amp;amp; privacy model&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/maisamabbas0323/voxterm#architecture" rel="noopener noreferrer"&gt;Architecture&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/maisamabbas0323/voxterm#project-structure" rel="noopener noreferrer"&gt;Project structure&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/maisamabbas0323/voxterm#tech-stack" rel="noopener noreferrer"&gt;Tech stack&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/maisamabbas0323/voxterm#testing--verification" rel="noopener noreferrer"&gt;Testing &amp;amp; verification&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/maisamabbas0323/voxterm#known-limitations" rel="noopener noreferrer"&gt;Known limitations&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/maisamabbas0323/voxterm#roadmap" rel="noopener noreferrer"&gt;Roadmap&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/maisamabbas0323/voxterm#contributing" rel="noopener noreferrer"&gt;Contributing&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/maisamabbas0323/voxterm#license" rel="noopener noreferrer"&gt;License&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/maisamabbas0323/voxterm#author" rel="noopener noreferrer"&gt;Author&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="markdown-heading"&gt;
&lt;h2 class="heading-element"&gt;Why VoxTerm&lt;/h2&gt;

&lt;/div&gt;
&lt;p&gt;Most "AI terminals" are a chat box bolted onto a shell, wrapped in marketing.
VoxTerm is the opposite: a genuinely good terminal first, with voice and local
models added where they actually help — and &lt;strong&gt;every control either does the thing
it claims or tells you exactly why it can't.&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;Concretely:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Real shells,&lt;/strong&gt;…&lt;/li&gt;
&lt;/ul&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="gh-btn-container"&gt;&lt;a class="gh-btn" href="https://github.com/maisamabbas0323/voxterm" rel="noopener noreferrer"&gt;View on GitHub&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;


&lt;p&gt;If the embed doesn't render: &lt;strong&gt;&lt;a href="https://github.com/maisamabbas0323/voxterm" rel="noopener noreferrer"&gt;github.com/maisamabbas0323/voxterm&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;A quick tour of what's inside:&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Layer&lt;/th&gt;
&lt;th&gt;What it does&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;src/main/terminals&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Owns every &lt;code&gt;node-pty&lt;/code&gt; process — never the renderer&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;src/main/voice&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;ElevenLabs speech-to-text + the global push-to-talk hotkey&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;src/main/prompts&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;The Ollama → Google Gemma fallback chain and its instructions&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;src/main/external&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;tmux/screen discovery and precise attach targeting&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;src/shared&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Zod schemas + the typed IPC contract, shared by both sides&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;




&lt;h2&gt;
  
  
  How I Built It
&lt;/h2&gt;

&lt;p&gt;The stack is intentionally boring where it should be, and interesting only where&lt;br&gt;
it earns it.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The shell is sacred.&lt;/strong&gt; VoxTerm is a real terminal first. Every tab is a&lt;br&gt;
&lt;code&gt;node-pty&lt;/code&gt; process owned entirely by the Electron &lt;strong&gt;main&lt;/strong&gt; process; the renderer&lt;br&gt;
just sends keystrokes and receives output over a typed, Zod-validated IPC&lt;br&gt;
bridge. The renderer is sandboxed with context isolation and no Node access, so&lt;br&gt;
a bug (or a malicious page) can't reach your filesystem through the UI. This&lt;br&gt;
isn't paranoia — it's the difference between a tool you trust with your shells&lt;br&gt;
and one you don't.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The AI is open-weight and yours to run.&lt;/strong&gt; For prompt cleanup I didn't want to&lt;br&gt;
hard-wire one company's API into the core loop. So VoxTerm calls a &lt;strong&gt;fallback&lt;br&gt;
chain&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Ollama&lt;/strong&gt; first — a fully local, open-weight &lt;strong&gt;Gemma&lt;/strong&gt; model on your own
machine. This is the default the product is designed around, because it's the
one that makes the privacy promise real: nothing leaves your computer.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Google AI Studio's hosted Gemma&lt;/strong&gt; as the fallback for machines that can't run
a local model — reached with your own API key against the official endpoint,
with no configurable base URL to get wrong.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;That ordering is the whole point. It means the "free and private" path is the&lt;br&gt;
&lt;em&gt;primary&lt;/em&gt; path, and the cloud is the convenience path — not the other way&lt;br&gt;
around. Speech-to-text and spoken announcements go through &lt;strong&gt;ElevenLabs&lt;/strong&gt; because&lt;br&gt;
good real-time transcription and natural TTS are genuinely hard to match with a&lt;br&gt;
small local model today, and the app is upfront in the UI that dictation audio is&lt;br&gt;
sent to that service.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The engineering rule I refused to break:&lt;/strong&gt; &lt;em&gt;no fake buttons, no invented&lt;br&gt;
statistics, no placeholder sessions.&lt;/em&gt; If a feature isn't wired up, it's disabled&lt;br&gt;
and labelled. Provider status is a real network probe. "Detected tooling" is a&lt;br&gt;
real filesystem lookup with the resolved path and version. The activity log&lt;br&gt;
stores metadata only — never your terminal output, never env vars, never secrets.&lt;br&gt;
Honesty became an architecture decision, not a marketing line.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Flgnert9dv5m2ltsaeyb5.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Flgnert9dv5m2ltsaeyb5.png" alt="VoxTerm Settings — prompt providers with live status, local-only privacy, and the voice controls" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Settings shows real provider reachability and a one-switch local-only mode. The&lt;br&gt;
voice controls live here too — no separate "AI panel" pretending to be useful.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;A few of the tools that made this buildable: &lt;strong&gt;Electron 44&lt;/strong&gt;, &lt;strong&gt;React 19&lt;/strong&gt;,&lt;br&gt;
&lt;strong&gt;xterm.js 6&lt;/strong&gt;, &lt;strong&gt;node-pty&lt;/strong&gt;, &lt;strong&gt;Zod 4&lt;/strong&gt;, &lt;strong&gt;electron-vite / Vite 7&lt;/strong&gt;,&lt;br&gt;
&lt;strong&gt;Vitest 5&lt;/strong&gt;, and &lt;strong&gt;lucide-react&lt;/strong&gt; for every icon (SVG only — no emoji avatars,&lt;br&gt;
no decorative AI sparkle). It's verified with 105 unit tests, a headless&lt;br&gt;
Chrome-DevTools-Protocol UI smoke test, and real calls against both providers.&lt;/p&gt;




&lt;h2&gt;
  
  
  Why Does Open Innovation Matter?
&lt;/h2&gt;

&lt;p&gt;VoxTerm would be a worse product if it had been built around a single closed API.&lt;br&gt;
Here's concretely why.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Open weights made the privacy promise possible.&lt;/strong&gt; The entire premise —&lt;br&gt;
"your voice, your prompts, your machine" — only works because I can run a&lt;br&gt;
capable model like Gemma &lt;em&gt;locally&lt;/em&gt; through Ollama. A closed, cloud-only model&lt;br&gt;
would have forced every prompt through someone else's servers, and "local-only&lt;br&gt;
mode" would have been a lie I couldn't tell. Open-weight models turned a privacy&lt;br&gt;
&lt;em&gt;feature&lt;/em&gt; into a privacy &lt;em&gt;fact&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Open source let me build a terminal I actually trust.&lt;/strong&gt; &lt;code&gt;node-pty&lt;/code&gt;, &lt;code&gt;xterm.js&lt;/code&gt;,&lt;br&gt;
Electron, Zod, Vite — I read the code, patched around edge cases, and shipped&lt;br&gt;
because thousands of people already solved the hard parts in public. That's the&lt;br&gt;
quiet superpower of open innovation: nobody has to rebuild a PTY from scratch to&lt;br&gt;
make something new on top of it.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;It keeps the exit door open.&lt;/strong&gt; Because the provider layer is a chain and not a&lt;br&gt;
contract, you can swap Ollama for a different local runner, add another hosted&lt;br&gt;
model, or run entirely offline — without asking anyone's permission or waiting&lt;br&gt;
for a pricing page to change. That's what open innovation buys you: the ability&lt;br&gt;
to keep building when the ground shifts underneath you.&lt;/p&gt;

&lt;p&gt;And honestly? It's just &lt;em&gt;nicer&lt;/em&gt;. Building in the open meant every design choice&lt;br&gt;
was a conversation with how real tools behave, not a negotiation with a vendor's&lt;br&gt;
roadmap.&lt;/p&gt;




&lt;h2&gt;
  
  
  My First User
&lt;/h2&gt;

&lt;p&gt;The first person to actually open VoxTerm wasn't a customer — it was a friend who&lt;br&gt;
lives in tmux and has opinions about everything. I handed them the build, watched&lt;br&gt;
them attach to a session they already had running, dictate one command, and go&lt;br&gt;
quiet for a second.&lt;/p&gt;

&lt;p&gt;Then: &lt;em&gt;"Okay, that was faster than typing it. That's annoying. I want it."&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;They haven't paid me — this is still a side project finding its feet, and I'd&lt;br&gt;
rather say that plainly than invent a fake invoice. But "I want it" from someone&lt;br&gt;
who is not impressed by anything is the signal I actually trust. The next step is&lt;br&gt;
turning that into the boring, unglamorous part of a side hustle: a pricing page,&lt;br&gt;
a signed build, and a handful of real users who'll tell me what's still wrong.&lt;/p&gt;




&lt;h2&gt;
  
  
  Prize Categories
&lt;/h2&gt;

&lt;p&gt;Given what VoxTerm is built on and how it's verified, I'm entering the categories&lt;br&gt;
that genuinely apply — I'll confirm the exact list from the challenge page before&lt;br&gt;
publishing:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Best Use of Open-Source AI&lt;/strong&gt; — the core loop runs on open-weight Gemma via a
local Ollama first, with a hosted fallback.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Best Use of ElevenLabs&lt;/strong&gt; — ElevenLabs does real work in two places, not a
decorative bow: &lt;strong&gt;speech-to-text&lt;/strong&gt; turns a held hotkey into a transcript that
lands straight in the shell, and &lt;strong&gt;text-to-speech&lt;/strong&gt; speaks only the events a
developer actually cares about (a crash, a finished agent step) — never your
terminal output, never your secrets. Both paths are privacy-gated, clearly
labelled in the UI, and wired so the local/open-weight model stays the default.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Best Developer Tool&lt;/strong&gt; — a real desktop terminal for professional workflows.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Best Side Hustle&lt;/strong&gt; — built to be something people would actually pay for,
not a demo.&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  What's Next
&lt;/h2&gt;

&lt;p&gt;VoxTerm isn't a weekend sketch that stops at the demo. The roadmap is the same&lt;br&gt;
list a paying user would care about:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Per-agent adapters&lt;/strong&gt; so the terminal can understand agent events instead of
just displaying them.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Word-timestamp highlighting&lt;/strong&gt; in the dictation flow, so you can see what the
model thought you said.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;A signed, packaged release&lt;/strong&gt; and a real pricing model.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;macOS and Windows&lt;/strong&gt; follow behind Linux — I'd rather ship one platform well
than three badly.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;If you're the kind of person who types &lt;code&gt;Ctrl+R&lt;/code&gt; and then apologises to your shell&lt;br&gt;
— give it a try, break it, and tell me where it hurts. That's the only way a side&lt;br&gt;
hustle becomes something worth paying for.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Repo:&lt;/strong&gt; &lt;a href="https://github.com/maisamabbas0323/voxterm" rel="noopener noreferrer"&gt;https://github.com/maisamabbas0323/voxterm&lt;/a&gt;&lt;br&gt;
&lt;strong&gt;License:&lt;/strong&gt; MIT&lt;br&gt;
&lt;strong&gt;Built with:&lt;/strong&gt; Electron, React, xterm.js, node-pty, Zod, and open-weight Gemma&lt;br&gt;
via Ollama.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Type less. Talk more. Ship code.&lt;/em&gt;&lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>hf26challenge</category>
    </item>
    <item>
      <title>Unscript — A Sanity-Powered Writing Agent That Actually Knows Why It Changes Your Text</title>
      <dc:creator>Maisam Abbas</dc:creator>
      <pubDate>Sun, 27 Sep 2026 12:13:41 +0000</pubDate>
      <link>https://dev.to/maisamabbas0323/unscript-a-sanity-powered-writing-agent-that-actually-knows-why-it-changes-your-text-5am0</link>
      <guid>https://dev.to/maisamabbas0323/unscript-a-sanity-powered-writing-agent-that-actually-knows-why-it-changes-your-text-5am0</guid>
      <description>&lt;p&gt;&lt;em&gt;This is a submission for the &lt;a href="https://dev.to/challenges/sanity-2026-09-16"&gt;Sanity Challenge, Path One: Ship an Agent That Queries Real Content&lt;/a&gt;.&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  What I Built
&lt;/h2&gt;

&lt;p&gt;I built &lt;strong&gt;Unscript&lt;/strong&gt;, a terminal-based writing transformation agent that uses structured knowledge from Sanity to make writing feel more natural, clear, and human without treating every piece of text the same way.&lt;/p&gt;

&lt;p&gt;The main idea started with a simple problem:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Most writing tools can change text. The harder part is deciding &lt;strong&gt;how&lt;/strong&gt; the text should be changed and what should be preserved.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Instead of putting all of the rules inside the prompt, I wanted the agent to have an actual knowledge layer that it could query.&lt;/p&gt;

&lt;p&gt;That became Unscript.&lt;/p&gt;

&lt;p&gt;Unscript combines:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;A terminal-first user experience&lt;/li&gt;
&lt;li&gt;A structured Sanity Knowledge Base&lt;/li&gt;
&lt;li&gt;Sanity Context MCP&lt;/li&gt;
&lt;li&gt;Gemini 3.1 Flash-Lite&lt;/li&gt;
&lt;li&gt;Deterministic validation&lt;/li&gt;
&lt;li&gt;Source-aware retrieval&lt;/li&gt;
&lt;li&gt;Configurable writing levels and content types&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The resulting flow is:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;User
  ↓
Unscript CLI
  ↓
Agent
  ↓
Sanity Context MCP
  ↓
Structured Knowledge
  ↓
Gemini 3.1 Flash-Lite
  ↓
Transformation
  ↓
Validation
  ↓
Polished CLI Output
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The important part is that the model does not have to invent the writing rules on its own.&lt;/p&gt;

&lt;p&gt;The rules live in structured content.&lt;/p&gt;




&lt;h2&gt;
  
  
  Why I Built It This Way
&lt;/h2&gt;

&lt;p&gt;I did not want to build another text box with a prompt behind it.&lt;/p&gt;

&lt;p&gt;I wanted the knowledge itself to be part of the product.&lt;/p&gt;

&lt;p&gt;For example, Unscript needs to understand that transforming an article is different from transforming a short message. It also needs to know what tone is being requested, which writing patterns should be avoided, which parts of the original text must remain intact, and what level of transformation the user selected.&lt;/p&gt;

&lt;p&gt;That information is modeled separately in Sanity.&lt;/p&gt;

&lt;p&gt;The Knowledge Base contains structured categories for:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Writing Patterns&lt;/li&gt;
&lt;li&gt;Content Types&lt;/li&gt;
&lt;li&gt;Humanization Levels&lt;/li&gt;
&lt;li&gt;Tone Rules&lt;/li&gt;
&lt;li&gt;Transformation Rules&lt;/li&gt;
&lt;li&gt;Preservation Rules&lt;/li&gt;
&lt;li&gt;Sources&lt;/li&gt;
&lt;li&gt;User Decisions&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This gives the agent something much more useful than a large collection of unstructured instructions.&lt;/p&gt;

&lt;p&gt;It can retrieve the relevant pieces of knowledge for the specific transformation it is performing.&lt;/p&gt;




&lt;h2&gt;
  
  
  The Agent Workflow
&lt;/h2&gt;

&lt;p&gt;When a user runs the humanization flow, Unscript does not immediately send the text to Gemini.&lt;/p&gt;

&lt;p&gt;It first builds the context required for the transformation.&lt;/p&gt;

&lt;p&gt;The agent goes through several stages:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;1. Analyze the input
       ↓
2. Classify the content
       ↓
3. Determine the requested transformation level
       ↓
4. Retrieve relevant knowledge from Sanity
       ↓
5. Transform the text
       ↓
6. Validate the result
       ↓
7. Display the result and knowledge used
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This separation was important to me because it makes the system easier to reason about.&lt;/p&gt;

&lt;p&gt;The model handles the language transformation, while Sanity provides the structured rules and knowledge that guide that transformation.&lt;/p&gt;




&lt;p&gt;The main flow includes:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Unscript
  ├── Inspect Knowledge
  ├── Inspect Environment
  ├── Help
  └── Humanize Text
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Inspect Knowledge
&lt;/h3&gt;

&lt;p&gt;The first part of the demo shows the knowledge available to the agent.&lt;/p&gt;

&lt;p&gt;Unscript connects to the Sanity Context MCP endpoint and retrieves structured knowledge from the Sanity Knowledge Base.&lt;/p&gt;

&lt;p&gt;The output shows information such as:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Knowledge rules&lt;/li&gt;
&lt;li&gt;Writing patterns&lt;/li&gt;
&lt;li&gt;Sources&lt;/li&gt;
&lt;li&gt;Preservation rules&lt;/li&gt;
&lt;li&gt;Provenance&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The demo then switches to Sanity Studio to show where that structured content actually lives.&lt;/p&gt;

&lt;p&gt;This was important to demonstrate because the knowledge isn't mocked inside the CLI.&lt;/p&gt;

&lt;p&gt;It exists as real Sanity content.&lt;/p&gt;

&lt;h3&gt;
  
  
  Inspect Environment
&lt;/h3&gt;

&lt;p&gt;The environment inspection checks the pieces required by the application, including the configured Sanity Context MCP connection and Gemini integration.&lt;/p&gt;

&lt;h3&gt;
  
  
  Help
&lt;/h3&gt;

&lt;p&gt;The help screen explains the available Unscript commands and how to move through the terminal interface.&lt;/p&gt;

&lt;h3&gt;
  
  
  Humanize Text
&lt;/h3&gt;

&lt;p&gt;The main demo then enters the actual transformation workflow.&lt;/p&gt;

&lt;p&gt;I select:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Content Type → Article
Tone → Friendly
Transformation → Custom
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Unscript asks for the text, retrieves the relevant knowledge through Sanity Context MCP, sends the transformation task to Gemini 3.1 Flash-Lite, validates the result, and displays the final output.&lt;/p&gt;

&lt;p&gt;The result also exposes the knowledge that influenced the transformation instead of simply showing a new paragraph and hiding everything that happened behind it.&lt;/p&gt;

&lt;p&gt;For the demonstrated run, the retrieved context included:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;9 rules&lt;/li&gt;
&lt;li&gt;7 writing patterns&lt;/li&gt;
&lt;li&gt;3 sources&lt;/li&gt;
&lt;li&gt;4 preservation rules&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;along with the transformed result and provenance information.&lt;/p&gt;




&lt;h2&gt;
  
  
  How I Used Sanity
&lt;/h2&gt;

&lt;p&gt;Sanity is the knowledge layer of Unscript.&lt;/p&gt;

&lt;p&gt;I created a Sanity project called:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Unscript Knowledge&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The structured content is stored in the &lt;code&gt;production&lt;/code&gt; dataset.&lt;/p&gt;

&lt;p&gt;The project contains schemas for:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;writingPattern
contentType
humanizationLevel
toneRule
transformationRule
preservationRule
source
userDecision
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;These schemas let the knowledge remain structured instead of becoming one large prompt.&lt;/p&gt;

&lt;p&gt;For example, a transformation rule can exist as its own piece of knowledge, while a preservation rule can independently describe something that must not be changed.&lt;/p&gt;

&lt;p&gt;Sources are also represented separately so retrieved knowledge can retain provenance.&lt;/p&gt;




&lt;h2&gt;
  
  
  Sanity Context MCP
&lt;/h2&gt;

&lt;p&gt;The most important part of the Sanity integration is the &lt;strong&gt;Sanity Context MCP endpoint&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Unscript connects to:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;https://api.sanity.io/v1/context/organizations/o8io0s3zz/mcp/unscript-knowledge
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The agent establishes an MCP session and performs the required MCP initialization flow.&lt;/p&gt;

&lt;p&gt;The runtime sequence includes:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;initialize
    ↓
notifications/initialized
    ↓
initial_context
    ↓
tools/list
    ↓
groq_query
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The &lt;code&gt;groq_query&lt;/code&gt; capability is then used to retrieve the relevant structured knowledge.&lt;/p&gt;

&lt;p&gt;This means the agent isn't simply querying a local JSON file or a hard-coded array.&lt;/p&gt;

&lt;p&gt;The knowledge comes through Sanity's Context MCP layer.&lt;/p&gt;




&lt;h2&gt;
  
  
  Why Structured Content Matters Here
&lt;/h2&gt;

&lt;p&gt;This is probably the most important part of the project.&lt;/p&gt;

&lt;p&gt;A normal keyword search might find a phrase such as "make writing more conversational."&lt;/p&gt;

&lt;p&gt;But Unscript needs more context than that.&lt;/p&gt;

&lt;p&gt;It needs to know:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;What type of content is being transformed?&lt;/li&gt;
&lt;li&gt;What tone was selected?&lt;/li&gt;
&lt;li&gt;What transformation level was requested?&lt;/li&gt;
&lt;li&gt;Which patterns should be changed?&lt;/li&gt;
&lt;li&gt;Which patterns should be preserved?&lt;/li&gt;
&lt;li&gt;Which rules apply to this particular type of writing?&lt;/li&gt;
&lt;li&gt;Where did the rule come from?&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;That is where structured content becomes useful.&lt;/p&gt;

&lt;p&gt;Instead of treating knowledge as a flat document, Unscript can retrieve different pieces of related knowledge and use them together.&lt;/p&gt;

&lt;p&gt;For example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Article
  +
Friendly Tone
  +
Selected Humanization Level
  +
Transformation Rules
  +
Preservation Rules
  +
Writing Patterns
  +
Source Information
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;becomes the context used for the transformation.&lt;/p&gt;

&lt;p&gt;That is the part of the project that would be difficult to reproduce with a simple keyword search.&lt;/p&gt;




&lt;h2&gt;
  
  
  Knowledge Base
&lt;/h2&gt;

&lt;p&gt;The initial Knowledge Base is populated with structured content across the different schemas.&lt;/p&gt;

&lt;p&gt;The current knowledge set contains:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Sources                  3
Content Types            8
Humanization Levels      5
Tone Rules               8
Transformation Rules    14
Preservation Rules      10
Writing Patterns        10
User Decisions           0
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;That gives the agent a deliberately separated knowledge model rather than one giant prompt.&lt;/p&gt;

&lt;p&gt;The sources include established writing guidance such as:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;U.S. Digital.gov / GSA plain-language guidance&lt;/li&gt;
&lt;li&gt;Microsoft Writing Style Guide&lt;/li&gt;
&lt;li&gt;Google writing guidance&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The goal was not to copy these sources into one enormous instruction block.&lt;/p&gt;

&lt;p&gt;Instead, relevant ideas were modeled into structured knowledge that the agent can retrieve and apply.&lt;/p&gt;




&lt;h2&gt;
  
  
  Gemini 3.1 Flash-Lite
&lt;/h2&gt;

&lt;p&gt;Gemini 3.1 Flash-Lite handles the actual language transformation.&lt;/p&gt;

&lt;p&gt;Sanity provides the context.&lt;/p&gt;

&lt;p&gt;Gemini performs the transformation.&lt;/p&gt;

&lt;p&gt;Unscript then validates the result before presenting it.&lt;/p&gt;

&lt;p&gt;Conceptually:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Sanity
  =
What should guide the transformation?

Gemini
  =
How should the text be transformed?

Unscript
  =
Did the result follow the required constraints?
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Keeping those responsibilities separate made the architecture much easier to control.&lt;/p&gt;




&lt;h2&gt;
  
  
  Validation
&lt;/h2&gt;

&lt;p&gt;The transformation does not end when Gemini returns text.&lt;/p&gt;

&lt;p&gt;Unscript performs deterministic validation after the model response.&lt;/p&gt;

&lt;p&gt;This gives the application a second layer between the model and the final terminal output.&lt;/p&gt;

&lt;p&gt;The validation stage checks the result against the requirements established by the agent and the retrieved knowledge.&lt;/p&gt;

&lt;p&gt;This was especially important for preservation rules.&lt;/p&gt;

&lt;p&gt;A writing transformation should not accidentally remove information simply because the model thinks the sentence sounds better.&lt;/p&gt;

&lt;p&gt;The agent therefore treats transformation and preservation as separate concerns.&lt;/p&gt;




&lt;h2&gt;
  
  
  Provenance
&lt;/h2&gt;

&lt;p&gt;Another part I wanted to expose was &lt;strong&gt;where the knowledge came from&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;The retrieved context is not presented as mysterious model knowledge.&lt;/p&gt;

&lt;p&gt;The result can show the sources and knowledge used by the agent.&lt;/p&gt;

&lt;p&gt;This creates a clearer chain:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Source
  ↓
Structured Sanity Knowledge
  ↓
Sanity Context MCP
  ↓
Agent Retrieval
  ↓
Gemini Transformation
  ↓
Validation
  ↓
Final Result
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;That makes the application easier to inspect and debug.&lt;/p&gt;

&lt;p&gt;It also makes the Sanity integration meaningful rather than decorative.&lt;/p&gt;




&lt;h2&gt;
  
  
  The Terminal Experience
&lt;/h2&gt;

&lt;p&gt;I intentionally built Unscript as a CLI.&lt;/p&gt;

&lt;p&gt;The reason is simple: I wanted the tool to feel like something a developer could actually use from a terminal rather than another generic AI webpage.&lt;/p&gt;

&lt;p&gt;The interface includes:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Interactive command navigation&lt;/li&gt;
&lt;li&gt;Human-readable status information&lt;/li&gt;
&lt;li&gt;Environment inspection&lt;/li&gt;
&lt;li&gt;Knowledge inspection&lt;/li&gt;
&lt;li&gt;Interactive transformation flow&lt;/li&gt;
&lt;li&gt;Structured result output&lt;/li&gt;
&lt;li&gt;Retrieved knowledge information&lt;/li&gt;
&lt;li&gt;Validation information&lt;/li&gt;
&lt;li&gt;Clean handling of terminal input&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I also spent time fixing edge cases around terminal input.&lt;/p&gt;

&lt;p&gt;For example, partial-line &lt;code&gt;Ctrl+D&lt;/code&gt; handling and the interaction between editing, backspacing, and the prompt needed to be handled properly.&lt;/p&gt;

&lt;p&gt;Those details are easy to ignore when building a demo, but they matter when the application is actually being used from a terminal.&lt;/p&gt;




&lt;h2&gt;
  
  
  Technical Architecture
&lt;/h2&gt;

&lt;p&gt;The complete architecture looks like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;┌──────────────────────────────┐
│          User                │
└──────────────┬───────────────┘
               │
               ▼
┌──────────────────────────────┐
│       Unscript CLI           │
│                              │
│  commands / prompts / UI     │
└──────────────┬───────────────┘
               │
               ▼
┌──────────────────────────────┐
│       Unscript Agent         │
│                              │
│ analyze                       │
│ classify                      │
│ select level                  │
│ retrieve knowledge            │
│ transform                     │
│ validate                      │
└──────────────┬───────────────┘
               │
               ▼
┌──────────────────────────────┐
│      Sanity Context MCP      │
└──────────────┬───────────────┘
               │
               ▼
┌──────────────────────────────┐
│     Unscript Knowledge       │
│                              │
│ writing patterns             │
│ content types                │
│ humanization levels          │
│ tone rules                   │
│ transformation rules         │
│ preservation rules           │
│ sources                      │
│ user decisions               │
└──────────────┬───────────────┘
               │
               ▼
┌──────────────────────────────┐
│    Gemini 3.1 Flash-Lite     │
│                              │
│   language transformation    │
└──────────────┬───────────────┘
               │
               ▼
┌──────────────────────────────┐
│       Validation             │
│                              │
│   deterministic checks       │
└──────────────┬───────────────┘
               │
               ▼
┌──────────────────────────────┐
│       Final CLI Result       │
│                              │
│ transformed text             │
│ retrieved knowledge          │
│ provenance                   │
│ validation                   │
└──────────────────────────────┘
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Implementation
&lt;/h2&gt;

&lt;p&gt;Unscript is built as a TypeScript CLI.&lt;/p&gt;

&lt;p&gt;The project was developed around a few principles:&lt;/p&gt;

&lt;h3&gt;
  
  
  1. Knowledge should live outside the model
&lt;/h3&gt;

&lt;p&gt;Writing rules are structured in Sanity rather than being permanently embedded in the application prompt.&lt;/p&gt;

&lt;h3&gt;
  
  
  2. Retrieval should be inspectable
&lt;/h3&gt;

&lt;p&gt;The agent should be able to show what it retrieved and where that knowledge came from.&lt;/p&gt;

&lt;h3&gt;
  
  
  3. Transformation should be separate from validation
&lt;/h3&gt;

&lt;p&gt;The model generates the transformation, but deterministic application logic is responsible for checking the result.&lt;/p&gt;

&lt;h3&gt;
  
  
  4. The CLI should be usable on its own
&lt;/h3&gt;

&lt;p&gt;The terminal experience is part of the product rather than just a debugging interface.&lt;/p&gt;

&lt;h3&gt;
  
  
  5. Real services should be used in the demo
&lt;/h3&gt;

&lt;p&gt;The Sanity project, Sanity Context MCP endpoint, and Gemini integration are real parts of the runtime.&lt;/p&gt;




&lt;h2&gt;
  
  
  Testing
&lt;/h2&gt;

&lt;p&gt;I did not want the project to only work for the exact demo recording.&lt;/p&gt;

&lt;p&gt;The project went through separate checks during development, including:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;TypeScript compilation&lt;/li&gt;
&lt;li&gt;ESLint&lt;/li&gt;
&lt;li&gt;Prettier&lt;/li&gt;
&lt;li&gt;Production build&lt;/li&gt;
&lt;li&gt;CLI runtime checks&lt;/li&gt;
&lt;li&gt;Sanity schema validation&lt;/li&gt;
&lt;li&gt;MCP initialization&lt;/li&gt;
&lt;li&gt;Knowledge retrieval&lt;/li&gt;
&lt;li&gt;Gemini integration&lt;/li&gt;
&lt;li&gt;Transformation flow&lt;/li&gt;
&lt;li&gt;Deterministic validation&lt;/li&gt;
&lt;li&gt;Terminal input edge cases&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The final project reached a clean test/build state with the complete end-to-end flow working against the real Sanity Context MCP integration.&lt;/p&gt;




&lt;h2&gt;
  
  
  What I Learned
&lt;/h2&gt;

&lt;p&gt;The biggest thing I learned from building Unscript is that structured content changes how an agent can be designed.&lt;/p&gt;

&lt;p&gt;It is tempting to put everything into one prompt:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Here are some rules.
Now transform this text.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;That can work for a small prototype.&lt;/p&gt;

&lt;p&gt;But once the rules become more complex, the prompt becomes the application.&lt;/p&gt;

&lt;p&gt;That was exactly what I wanted to avoid.&lt;/p&gt;

&lt;p&gt;With Sanity, the knowledge becomes something that can be modeled, inspected, changed, queried, and reused.&lt;/p&gt;

&lt;p&gt;The agent can then treat that knowledge as an external system rather than a giant hard-coded instruction.&lt;/p&gt;

&lt;p&gt;That separation makes the whole application easier to understand.&lt;/p&gt;




&lt;h2&gt;
  
  
  Why Sanity Is Actually Part of the Product
&lt;/h2&gt;

&lt;p&gt;I did not use Sanity simply because the challenge required a Sanity project.&lt;/p&gt;

&lt;p&gt;If Sanity were removed from Unscript, the architecture would lose an important part of its purpose.&lt;/p&gt;

&lt;p&gt;The application depends on structured knowledge for:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Content classification&lt;/li&gt;
&lt;li&gt;Humanization levels&lt;/li&gt;
&lt;li&gt;Tone selection&lt;/li&gt;
&lt;li&gt;Transformation rules&lt;/li&gt;
&lt;li&gt;Preservation rules&lt;/li&gt;
&lt;li&gt;Writing patterns&lt;/li&gt;
&lt;li&gt;Source information&lt;/li&gt;
&lt;li&gt;Knowledge retrieval&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The model is therefore not the entire product.&lt;/p&gt;

&lt;p&gt;The knowledge layer is part of the product.&lt;/p&gt;

&lt;p&gt;That is the main reason I chose Path One.&lt;/p&gt;




&lt;h2&gt;
  
  
  Source Code
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://github.com/maisamabbas0323/unscript.git" rel="noopener noreferrer"&gt;https://github.com/maisamabbas0323/unscript.git&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Sanity Project
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Project ID: b209xsoi
Dataset: production
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Sanity Context MCP
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;https://api.sanity.io/v1/context/organizations/o8io0s3zz/mcp/unscript-knowledge
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Demo Video
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://youtube.com/watch?v=ZopcANma17Q%5C&amp;amp;si=jhlLzNV6l999JFDY" rel="noopener noreferrer"&gt;https://youtube.com/watch?v=ZopcANma17Q\&amp;amp;si=jhlLzNV6l999JFDY&lt;/a&gt;)&lt;/p&gt;




&lt;h2&gt;
  
  
  Sanity Project Details
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Project: Unscript Knowledge
Project ID: b209xsoi
Dataset: production
Organization: o8io0s3zz
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The Sanity Studio contains the schemas and structured documents used by the agent's Knowledge Base.&lt;/p&gt;




&lt;h2&gt;
  
  
  Final Thoughts
&lt;/h2&gt;

&lt;p&gt;Unscript started with a simple question:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What if a writing agent did not have to keep all of its knowledge inside the model?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The result became a terminal application where Sanity acts as the structured knowledge layer, Sanity Context MCP connects that knowledge to the agent, Gemini 3.1 Flash-Lite performs the language transformation, and Unscript validates and presents the result.&lt;/p&gt;

&lt;p&gt;The interesting part for me is not simply that the application can rewrite text.&lt;/p&gt;

&lt;p&gt;It is that the reasoning context behind the transformation can be structured, queried, inspected, and connected back to its sources.&lt;/p&gt;

&lt;p&gt;That is what I wanted to explore with the Sanity Challenge.&lt;/p&gt;




&lt;h2&gt;
  
  
  Built With
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Sanity&lt;/li&gt;
&lt;li&gt;Sanity Content Lake&lt;/li&gt;
&lt;li&gt;Sanity Context MCP&lt;/li&gt;
&lt;li&gt;Sanity Studio&lt;/li&gt;
&lt;li&gt;TypeScript&lt;/li&gt;
&lt;li&gt;Gemini 3.1 Flash-Lite&lt;/li&gt;
&lt;li&gt;MCP&lt;/li&gt;
&lt;li&gt;GROQ&lt;/li&gt;
&lt;li&gt;Node.js&lt;/li&gt;
&lt;li&gt;Terminal CLI&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  Challenge
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Sanity Challenge — Path One: Ship an Agent That Queries Real Content&lt;/strong&gt;&lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>sanitychallenge</category>
      <category>sanity</category>
      <category>ai</category>
    </item>
    <item>
      <title>Doneehub - Weekenchallenge Submission</title>
      <dc:creator>Maisam Abbas</dc:creator>
      <pubDate>Sat, 05 Sep 2026 12:52:17 +0000</pubDate>
      <link>https://dev.to/maisamabbas0323/doneehub-weekenchallenge-submission-3ipj</link>
      <guid>https://dev.to/maisamabbas0323/doneehub-weekenchallenge-submission-3ipj</guid>
      <description>&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Turn what you have into what someone needs.&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  What I Built
&lt;/h2&gt;

&lt;p&gt;Doneehub is a people-first generosity platform built around a simple idea:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;You already have something that can help. Doneehub helps you figure out what that something could become.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Generosity is often presented as if it starts with money. In reality, people have many other resources: time, technical skills, knowledge, transportation, food, unused items, professional experience, or simply the willingness to help.&lt;/p&gt;

&lt;p&gt;Doneehub brings those resources together and turns them into practical possibilities.&lt;/p&gt;

&lt;p&gt;The heart of the project is the &lt;strong&gt;Generosity Compiler&lt;/strong&gt;. A user can describe what they have—for example, an old laptop and technical skills, a few free hours and transportation, or a small amount of money and limited time. Doneehub then interprets that combination and helps turn it into realistic action ideas, requirements, and next steps.&lt;/p&gt;

&lt;p&gt;The project also includes &lt;strong&gt;GoogleHelp&lt;/strong&gt;, a general-purpose Gemini workspace that can help with questions, explanations, writing, rewriting, planning, learning, brainstorming, analysis, and problem solving.&lt;/p&gt;

&lt;p&gt;The goal was not to build another social feed filled with invented activity or impressive-looking numbers. I wanted to build something quieter and more useful: a tool that helps a person move from &lt;strong&gt;intention to action&lt;/strong&gt;.&lt;/p&gt;




&lt;h2&gt;
  
  
  Demo
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Live Demo:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
&lt;a href="https://doneehub.vercel.app/" rel="noopener noreferrer"&gt;https://doneehub.vercel.app/&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  Code
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;GitHub Repository:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
&lt;a href="https://github.com/maisamabbas0323/doneehub" rel="noopener noreferrer"&gt;https://github.com/maisamabbas0323/doneehub&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Doneehub is built as a local-first web application. The repository contains the frontend, Gemini integration, UI components, reusable services, and project configuration.&lt;/p&gt;


&lt;h2&gt;
  
  
  How I Built It
&lt;/h2&gt;

&lt;p&gt;I wanted the technical architecture to stay simple enough that the product itself could remain the focus.&lt;/p&gt;

&lt;p&gt;Doneehub does not require authentication and does not use a database. User preferences and configuration are kept locally in the browser.&lt;/p&gt;

&lt;p&gt;The application follows a simple flow:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Doneehub
   |
   +-- GoogleHelp
   |      |
   |      +-- User's Gemini API Key
   |                   |
   |                   v
   |             Google Gemini API
   |
   +-- Local Browser State
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  One Gemini Configuration
&lt;/h3&gt;

&lt;p&gt;Rather than asking users to configure an API key separately for every feature, Doneehub uses one centralized Gemini configuration.&lt;/p&gt;

&lt;p&gt;The user enters their Gemini API key through GoogleHelp. The key is stored locally, masked after saving, and can be tested, replaced, or removed.&lt;/p&gt;

&lt;p&gt;A shared Gemini client/service is responsible for the communication layer so that Gemini-powered features behave consistently throughout the application.&lt;/p&gt;

&lt;h3&gt;
  
  
  Generosity Compiler
&lt;/h3&gt;

&lt;p&gt;The Generosity Compiler was the main product idea I wanted to explore.&lt;/p&gt;

&lt;p&gt;Instead of starting with:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;“What should I donate?”&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;it starts with:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;“What do I already have?”&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;The user can combine different resources and constraints. Gemini interprets the combination and produces practical possibilities rather than simply returning a generic list of charities.&lt;/p&gt;

&lt;p&gt;For example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Resources:
- Old laptop
- Web development skills
- 4 hours available each weekend

Goal:
- Help someone learn technology
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The result can become a structured set of possible directions, action steps, things to verify, and practical considerations.&lt;/p&gt;

&lt;p&gt;The important distinction is that generated ideas are not presented as verified real-world opportunities unless supporting information actually exists.&lt;/p&gt;

&lt;h3&gt;
  
  
  GoogleHelp
&lt;/h3&gt;

&lt;p&gt;GoogleHelp is the broader Gemini workspace inside Doneehub.&lt;/p&gt;

&lt;p&gt;It supports normal conversation and useful everyday tasks such as:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Explaining difficult concepts&lt;/li&gt;
&lt;li&gt;Rewriting text&lt;/li&gt;
&lt;li&gt;Summarizing user-provided material&lt;/li&gt;
&lt;li&gt;Brainstorming ideas&lt;/li&gt;
&lt;li&gt;Planning projects&lt;/li&gt;
&lt;li&gt;Learning assistance&lt;/li&gt;
&lt;li&gt;Coding questions&lt;/li&gt;
&lt;li&gt;Problem solving&lt;/li&gt;
&lt;li&gt;Writing and editing&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I wanted it to feel like a workspace rather than a stereotypical chatbot screen.&lt;/p&gt;

&lt;h3&gt;
  
  
  Proper Markdown Rendering
&lt;/h3&gt;

&lt;p&gt;One small but important detail was the presentation of Gemini responses.&lt;/p&gt;

&lt;p&gt;Instead of showing raw text such as:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;# Heading
**important text**
- first item
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Doneehub renders the Markdown into readable interface content.&lt;/p&gt;

&lt;p&gt;The renderer supports headings, emphasis, lists, links, blockquotes, code, tables, and other common Markdown structures while sanitizing unsafe content.&lt;/p&gt;

&lt;p&gt;This makes generated information much easier to scan and actually use.&lt;/p&gt;

&lt;h3&gt;
  
  
  Real Information, Not Fake Data
&lt;/h3&gt;

&lt;p&gt;A major design decision was to avoid fabricating the world around the user.&lt;/p&gt;

&lt;p&gt;Doneehub does not create fake:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Organizations&lt;/li&gt;
&lt;li&gt;Beneficiaries&lt;/li&gt;
&lt;li&gt;Donation totals&lt;/li&gt;
&lt;li&gt;Testimonials&lt;/li&gt;
&lt;li&gt;Events&lt;/li&gt;
&lt;li&gt;Opportunities&lt;/li&gt;
&lt;li&gt;Locations&lt;/li&gt;
&lt;li&gt;Impact statistics&lt;/li&gt;
&lt;li&gt;Verification claims&lt;/li&gt;
&lt;li&gt;Live prices&lt;/li&gt;
&lt;li&gt;Availability&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;When current information is needed, it should come from a trustworthy public source or API. Gemini can then help interpret or organize that information, but generated text is not treated as proof that something exists.&lt;/p&gt;

&lt;p&gt;That distinction became one of the most important principles of the project.&lt;/p&gt;




&lt;h2&gt;
  
  
  Prize Categories
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Best Use of Google AI
&lt;/h3&gt;

&lt;p&gt;Doneehub is submitted for &lt;strong&gt;Best Use of Google AI&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Google Gemini is not used as a decorative chatbot added to the application. It is part of the core interaction model.&lt;/p&gt;

&lt;p&gt;The Generosity Compiler depends on Gemini to interpret combinations of resources and turn them into practical contribution ideas.&lt;/p&gt;

&lt;p&gt;GoogleHelp provides a broader Gemini workspace for reasoning, explanation, writing, planning, learning, and problem solving.&lt;/p&gt;

&lt;p&gt;The application also uses structured responses where predictable application data benefits from them, while normal conversational responses can remain natural Markdown.&lt;/p&gt;

&lt;p&gt;The important part is that Gemini is used to solve an actual product problem:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;How can we help someone understand how their existing resources could become useful to another person?&lt;/strong&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  What Makes Doneehub Different
&lt;/h2&gt;

&lt;p&gt;There are many platforms that tell people where to donate.&lt;/p&gt;

&lt;p&gt;Doneehub starts one step earlier.&lt;/p&gt;

&lt;p&gt;It asks:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What do you have?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Maybe the answer is:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Two free hours.&lt;/li&gt;
&lt;li&gt;A working laptop you no longer use.&lt;/li&gt;
&lt;li&gt;A car.&lt;/li&gt;
&lt;li&gt;Knowledge about accounting.&lt;/li&gt;
&lt;li&gt;A kitchen that can prepare extra food.&lt;/li&gt;
&lt;li&gt;Programming skills.&lt;/li&gt;
&lt;li&gt;A willingness to teach.&lt;/li&gt;
&lt;li&gt;A small amount of money.&lt;/li&gt;
&lt;li&gt;Professional experience.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Those things can have value even when they do not look like traditional donations.&lt;/p&gt;

&lt;p&gt;Doneehub is designed to help users discover that value and turn it into an actionable next step.&lt;/p&gt;




&lt;h2&gt;
  
  
  Design Direction
&lt;/h2&gt;

&lt;p&gt;The visual design deliberately avoids the familiar “AI product” aesthetic.&lt;/p&gt;

&lt;p&gt;Instead, Doneehub uses a calm editorial direction:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Near-black backgrounds&lt;/li&gt;
&lt;li&gt;Warm off-white typography&lt;/li&gt;
&lt;li&gt;Muted gray supporting text&lt;/li&gt;
&lt;li&gt;Restrained warm accent color&lt;/li&gt;
&lt;li&gt;Strong typography and hierarchy&lt;/li&gt;
&lt;li&gt;Compact navigation&lt;/li&gt;
&lt;li&gt;Subtle borders&lt;/li&gt;
&lt;li&gt;Purposeful whitespace&lt;/li&gt;
&lt;li&gt;Minimal motion&lt;/li&gt;
&lt;li&gt;Responsive layouts&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;There are no unnecessary AI badges, glowing gradients, robots, holograms, neon effects, fake dashboards, or invented social activity.&lt;/p&gt;

&lt;p&gt;The intention is for Doneehub to feel like a real product made for people—not a collection of AI-generated screens.&lt;/p&gt;




&lt;h2&gt;
  
  
  Challenges I Ran Into
&lt;/h2&gt;

&lt;p&gt;The hardest part was not making Gemini return text.&lt;/p&gt;

&lt;p&gt;The harder question was deciding &lt;strong&gt;what the application could honestly claim&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;A generosity product can easily become misleading if generated suggestions are presented as verified opportunities. It can also become superficial if it fills the interface with fake impact statistics, fictional beneficiaries, or invented success stories.&lt;/p&gt;

&lt;p&gt;I therefore treated the boundary between &lt;strong&gt;generated assistance&lt;/strong&gt; and &lt;strong&gt;verified information&lt;/strong&gt; as a product requirement rather than an afterthought.&lt;/p&gt;

&lt;p&gt;Another challenge was making the Gemini integration useful without turning every screen into a chatbot.&lt;/p&gt;

&lt;p&gt;That led to the Generosity Compiler: a focused workflow where Gemini has a clear job and the output is directly connected to something the user can act on.&lt;/p&gt;




&lt;h2&gt;
  
  
  What I Learned
&lt;/h2&gt;

&lt;p&gt;The project reinforced a simple lesson:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Good AI product design is often less about generating more and more about helping users make better decisions with what is generated.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The useful part of Gemini is not simply that it can produce an answer. The useful part is that it can help connect pieces of information that a person already has and turn them into a clearer plan.&lt;/p&gt;

&lt;p&gt;That became the guiding idea behind Doneehub.&lt;/p&gt;




&lt;h2&gt;
  
  
  What's Next
&lt;/h2&gt;

&lt;p&gt;There is a lot more that could be built on top of this foundation.&lt;/p&gt;

&lt;p&gt;Some possible next steps are:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;More resource combinations&lt;/li&gt;
&lt;li&gt;Better structured generosity plans&lt;/li&gt;
&lt;li&gt;More trustworthy public-source integrations&lt;/li&gt;
&lt;li&gt;Stronger source traceability&lt;/li&gt;
&lt;li&gt;More localized opportunities&lt;/li&gt;
&lt;li&gt;Better planning workflows&lt;/li&gt;
&lt;li&gt;Additional accessibility improvements&lt;/li&gt;
&lt;li&gt;Stronger validation for structured Gemini responses&lt;/li&gt;
&lt;li&gt;More offline-friendly functionality&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The architecture is intentionally simple so these capabilities can be added without turning the product into an unnecessarily complicated platform.&lt;/p&gt;




&lt;h2&gt;
  
  
  Built With
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;TypeScript&lt;/li&gt;
&lt;li&gt;React&lt;/li&gt;
&lt;li&gt;Tailwind CSS&lt;/li&gt;
&lt;li&gt;Google Gemini API&lt;/li&gt;
&lt;li&gt;Browser-local storage/state&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The exact package versions and available scripts are defined in the repository's &lt;code&gt;package.json&lt;/code&gt;.&lt;/p&gt;




&lt;h2&gt;
  
  
  Running Locally
&lt;/h2&gt;

&lt;p&gt;Clone the repository:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;git clone https://github.com/maisamabbas0323/doneehub.git
&lt;span class="nb"&gt;cd &lt;/span&gt;doneehub
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Install dependencies:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm &lt;span class="nb"&gt;install&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Start the development server:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm run dev
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Build the project:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm run build
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;If the repository's configured scripts differ, &lt;code&gt;package.json&lt;/code&gt; is the authoritative source.&lt;/p&gt;




&lt;h2&gt;
  
  
  Gemini Configuration
&lt;/h2&gt;

&lt;p&gt;Open &lt;strong&gt;GoogleHelp&lt;/strong&gt; inside Doneehub and configure a Gemini API key.&lt;/p&gt;

&lt;p&gt;The application is designed around a user-provided key rather than a project-owned secret.&lt;/p&gt;

&lt;p&gt;For security:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Never commit API keys.&lt;/li&gt;
&lt;li&gt;Never hardcode secrets.&lt;/li&gt;
&lt;li&gt;Never place keys in URLs.&lt;/li&gt;
&lt;li&gt;Never log keys.&lt;/li&gt;
&lt;li&gt;Never include keys in screenshots or documentation.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Because the key is used client-side, it should be treated accordingly and managed by the user.&lt;/p&gt;




&lt;h2&gt;
  
  
  Privacy and Architecture
&lt;/h2&gt;

&lt;p&gt;Doneehub intentionally has:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;No authentication&lt;/li&gt;
&lt;li&gt;No user accounts&lt;/li&gt;
&lt;li&gt;No application database&lt;/li&gt;
&lt;li&gt;No Supabase&lt;/li&gt;
&lt;li&gt;No project-owned secret API key&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The product is local-first wherever practical.&lt;/p&gt;

&lt;p&gt;This keeps the architecture lightweight and makes the core experience understandable: the user brings their resources, their intentions, and their Gemini configuration; Doneehub helps turn those inputs into useful possibilities.&lt;/p&gt;




&lt;h2&gt;
  
  
  License
&lt;/h2&gt;

&lt;p&gt;Doneehub is released under the MIT License.&lt;/p&gt;

&lt;p&gt;See &lt;code&gt;LICENSE&lt;/code&gt; for the complete license text.&lt;/p&gt;




&lt;h2&gt;
  
  
  Repository
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://github.com/maisamabbas0323/doneehub" rel="noopener noreferrer"&gt;https://github.com/maisamabbas0323/doneehub&lt;/a&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  Submission Note
&lt;/h2&gt;

&lt;p&gt;This project was built for the &lt;strong&gt;Weekend Challenge: Generosity Edition&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;The central idea is simple:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Turn what you have into what someone needs.&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

</description>
      <category>weekendchallenge</category>
      <category>donation</category>
      <category>ai</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Caninography</title>
      <dc:creator>Maisam Abbas</dc:creator>
      <pubDate>Mon, 17 Aug 2026 03:13:42 +0000</pubDate>
      <link>https://dev.to/maisamabbas0323/caninography-36g5</link>
      <guid>https://dev.to/maisamabbas0323/caninography-36g5</guid>
      <description>&lt;p&gt;This is a submission for Weekend Challenge: &lt;em&gt;Dog Days Edition&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;I built Caninography, a small digital archive for exploring dog breeds from around the world.&lt;/p&gt;

&lt;p&gt;I wanted it to feel more like a digital museum than a normal dog website.&lt;/p&gt;

&lt;p&gt;You can explore breeds, their origins, history, countries, characteristics and connections between them.&lt;/p&gt;

&lt;p&gt;The whole design is dark, clean and visual. I also kept it silent, so there is no distracting audio or player UI.&lt;/p&gt;

&lt;h3&gt;
  
  
  GitHub:
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://github.com/maisamabbas0323/canonigraphy.git" rel="noopener noreferrer"&gt;https://github.com/maisamabbas0323/canonigraphy.git&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  How I Built It
&lt;/h2&gt;

&lt;p&gt;I built it with React, Vite and TypeScript.&lt;/p&gt;

&lt;p&gt;For the visual side, I focused a lot on typography, photography, smooth transitions and responsive layouts.&lt;/p&gt;

&lt;p&gt;I also added an interactive world atlas and a constellation-style view to explore breed relationships.&lt;/p&gt;

&lt;p&gt;For the content, I used Google Gemini to help create short and interesting breed information.&lt;/p&gt;

&lt;p&gt;I didn't wanted to make another chatbot. Instead, Gemini stays behind the experience and helps make the archive content more rich while people simply explore it.&lt;/p&gt;

&lt;h2&gt;
  
  
  Prize Categories
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Best Use of Google AI
&lt;/h3&gt;

&lt;p&gt;Caninography is submitted for Best Use of Google AI.&lt;/p&gt;

&lt;p&gt;I used Google Gemini to generate concise, breed-specific information based on the archive data.&lt;/p&gt;

&lt;p&gt;The idea was to use AI in the background, not put a chatbot in front of the user.&lt;/p&gt;

&lt;p&gt;Built With&lt;br&gt;
React&lt;br&gt;
Vite&lt;br&gt;
TypeScript&lt;br&gt;
Google Gemini&lt;br&gt;
CSS&lt;br&gt;
SVG&lt;br&gt;
Canvas&lt;/p&gt;

&lt;h2&gt;
  
  
  A Little About The Idea
&lt;/h2&gt;

&lt;p&gt;I always felt dog breed information is mostly shown as simple lists.&lt;/p&gt;

&lt;p&gt;So I thought:&lt;/p&gt;

&lt;p&gt;What if a dog archive felt like a museum?&lt;/p&gt;

&lt;p&gt;That small idea became Caninography.&lt;/p&gt;

&lt;p&gt;A place to explore their stories, origins and history — one breed at a time.&lt;/p&gt;

</description>
      <category>weekendchallenge</category>
      <category>webdev</category>
      <category>ai</category>
    </item>
    <item>
      <title>Beyond The Plate — Every Dish Has a Story | DEV Frontend Challenge</title>
      <dc:creator>Maisam Abbas</dc:creator>
      <pubDate>Wed, 12 Aug 2026 11:57:25 +0000</pubDate>
      <link>https://dev.to/maisamabbas0323/beyond-the-plate-every-dish-has-a-story-dev-frontend-challenge-14ll</link>
      <guid>https://dev.to/maisamabbas0323/beyond-the-plate-every-dish-has-a-story-dev-frontend-challenge-14ll</guid>
      <description>&lt;p&gt;This is a submission for &lt;a href="https://dev.to/challenges/frontend-2026-07-29"&gt;Frontend Challenge - Comfort Food Edition, Perfect Landing&lt;/a&gt;_&lt;/p&gt;

&lt;h2&gt;
  
  
  What I Built
&lt;/h2&gt;

&lt;p&gt;For this challenge I wanted to build something a little different than a traditional recipe or food website.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Beyond The Plate&lt;/strong&gt; is an editorial-style web experience that explores the stories behind comfort food from around the world. Instead of only showing recipes, it tells where a dish comes from, why people love it, how it became part of a culture, and what makes it special.&lt;/p&gt;

&lt;p&gt;The project currently features &lt;strong&gt;300+ authentic dishes&lt;/strong&gt; from countries across every continent. Each dish includes real historical background, cultural traditions, ingredients, nutrition, cooking instructions, and related dishes to encourage people to keep exploring.&lt;/p&gt;

&lt;p&gt;I spent a lot of time making the interface feel calm and immersive. The goal was to make visitors feel like they were walking through a digital museum instead of scrolling another food website.&lt;/p&gt;

&lt;p&gt;Some highlights:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt; 300+ authentic dishes from around the world&lt;/li&gt;
&lt;li&gt; Real recipes with ingredients and cooking steps&lt;/li&gt;
&lt;li&gt; Cultural stories and historical background&lt;/li&gt;
&lt;li&gt; Nutrition dashboard with macro breakdowns&lt;/li&gt;
&lt;li&gt; Editorial gallery with authentic food photography&lt;/li&gt;
&lt;li&gt; Fully responsive from mobile to large desktop&lt;/li&gt;
&lt;li&gt; Premium animations using Framer Motion and GSAP&lt;/li&gt;
&lt;li&gt; Built with React, TypeScript and Vite&lt;/li&gt;
&lt;li&gt; Accessibility focused&lt;/li&gt;
&lt;li&gt; Custom design system inspired by museums and editorial magazines&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I tried to keep everything feeling premium while still being easy to read and explore.&lt;/p&gt;




&lt;h2&gt;
  
  
  Demo
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Live Demo
&lt;/h3&gt;


&lt;div class="crayons-card c-embed text-styles text-styles--secondary"&gt;
    &lt;div class="c-embed__content"&gt;
      &lt;div class="c-embed__body flex items-center justify-between"&gt;
        &lt;a href="https://beyond-the-plate-seven.vercel.app/" rel="noopener noreferrer" class="c-link fw-bold flex items-center"&gt;
          &lt;span class="mr-2"&gt;beyond-the-plate-seven.vercel.app&lt;/span&gt;
          

        &lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;


&lt;h3&gt;
  
  
  GitHub Repository
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://github.com/maisamabbas0323/beyond-the-plate.git" rel="noopener noreferrer"&gt;https://github.com/maisamabbas0323/beyond-the-plate.git&lt;/a&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  Screenshots
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Home
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fgaq1vt6djexet81posm1.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fgaq1vt6djexet81posm1.png" alt="Home Tab" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Discover
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fixnnwesle5jaq6sns5lu.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fixnnwesle5jaq6sns5lu.png" alt="Discover Tab" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  ### Culture
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fvm38crv40pup9va3ph40.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fvm38crv40pup9va3ph40.png" alt="Culture Tab" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Nutrition
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fu16ta15q9r3fkuxje732.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fu16ta15q9r3fkuxje732.png" alt="Nutrition Tab" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Recipes
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F6hdhvscy6fp6lgk4o23e.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F6hdhvscy6fp6lgk4o23e.png" alt="Recipes Tab" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Gallery
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Ffyeofm0dyd9e1nv6q3rm.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Ffyeofm0dyd9e1nv6q3rm.png" alt="Gallery Tab" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  About
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Ft3zdcebbgsnqqbagc6on.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Ft3zdcebbgsnqqbagc6on.png" alt="About Tab" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Journey
&lt;/h2&gt;

&lt;p&gt;This project started much smaller.&lt;/p&gt;

&lt;p&gt;At first I only wanted to build a nice landing page for the challenge, but after working on it for a while I kept asking myself, "What if every comfort food could tell its own story?"&lt;/p&gt;

&lt;p&gt;That idea slowly turned into a much bigger project.&lt;/p&gt;

&lt;p&gt;I spent most of my time researching real dishes instead of making things up. I wanted every recipe, every country, and every cultural reference to be authentic. That part actually took longer than building the UI.&lt;/p&gt;

&lt;p&gt;The design also changed many times. I rebuilt the hero section more than once because it never felt quite right. I experimented with different layouts, typography, animations, and colors until everything started feeling like a digital food exhibition instead of a normal website.&lt;/p&gt;

&lt;p&gt;One of my favorite parts was adding the little interactions throughout the site. Small hover effects, smooth scrolling, floating cards, subtle animations, and transitions make the experience feel much more alive without becoming distracting.&lt;/p&gt;

&lt;p&gt;There were definitely a few frustrating moments too. Getting everything responsive across different screen sizes took a lot more work than I expected, and I probably changed the spacing and typography dozens of times before I was happy with it. But looking back, I'm glad I kept improving those details because they made a big difference.&lt;/p&gt;

&lt;p&gt;If I continue working on Beyond The Plate after this challenge, I'd love to add:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;interactive world maps&lt;/li&gt;
&lt;li&gt;multilingual support&lt;/li&gt;
&lt;li&gt;offline PWA support&lt;/li&gt;
&lt;li&gt;more authentic dishes and regional cuisines&lt;/li&gt;
&lt;li&gt;bookmarking and personal collections&lt;/li&gt;
&lt;li&gt;seasonal food collections&lt;/li&gt;
&lt;li&gt;audio stories for every dish&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Overall, this was a really fun challenge. It pushed me to think beyond just building another landing page and instead create something that people might actually enjoy exploring.&lt;/p&gt;

&lt;p&gt;Thanks to the DEV community for organizing another great Frontend Challenge. ❤️&lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>frontendchallenge</category>
      <category>webdev</category>
      <category>javascript</category>
    </item>
    <item>
      <title>The Last Spark</title>
      <dc:creator>Maisam Abbas</dc:creator>
      <pubDate>Sun, 12 Jul 2026 15:38:13 +0000</pubDate>
      <link>https://dev.to/maisamabbas0323/the-last-spark-1k3e</link>
      <guid>https://dev.to/maisamabbas0323/the-last-spark-1k3e</guid>
      <description>&lt;h2&gt;
  
  
  The Last Spark - Learn your passion with google ais
&lt;/h2&gt;

&lt;p&gt;This is a submission for &lt;a href="https://dev.to/challenges/weekend-2026-07-09"&gt;Weekend Challenge: Passion Edition&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  What I Built
&lt;/h2&gt;

&lt;p&gt;I built &lt;strong&gt;The Last Spark&lt;/strong&gt;, an AI-powered passion learning web app where users can pick a passion like Cybersecurity, Football, Cooking, Programming, Music, or even create there own custom passion. After selecting a difficulty, Google Gemini generates a complete learning journey with chapters, study notes, timed quizzes, and a final AI report based on the selected passion. My goal was to make learning feel more like playing a game instead of reading long boring articles.&lt;/p&gt;

&lt;h2&gt;
  
  
  Demo
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Live Demo:&lt;/strong&gt; &lt;a href="https://the-last-spark.vercel.app/" rel="noopener noreferrer"&gt;https://the-last-spark.vercel.app/&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Code
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;GitHub Repository:&lt;/strong&gt; &lt;a href="https://github.com/maisamabbas0323/the-last-spark" rel="noopener noreferrer"&gt;https://github.com/maisamabbas0323/the-last-spark&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  How I Built It
&lt;/h2&gt;

&lt;p&gt;The project is built with &lt;strong&gt;React, TypeScript, Vite, Tailwind CSS, Framer Motion&lt;/strong&gt;, and &lt;strong&gt;Google Gemini 3.1 Flash Lite&lt;/strong&gt;. Gemini creates the study content, chapters, questions, explanations, and final reports in real time based on what the user chooses. I spent most of my time making the UI smooth, responsive, and trying to give it a premium gaming feel with animated cards, timers, progress tracking, and reports. There was lot of debugging and redesign during development, but it was really fun to build.&lt;/p&gt;

&lt;h2&gt;
  
  
  Prize Categories
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;✅ Best Use of Google AI&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Thanks for checking out my project. Hope you enjoy it as much as I enjoyed building it 😊&lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>weekendchallenge</category>
      <category>webdev</category>
      <category>ai</category>
    </item>
    <item>
      <title>An AI-Powered Chess Experience with Google Gemini</title>
      <dc:creator>Maisam Abbas</dc:creator>
      <pubDate>Sun, 21 Jun 2026 06:18:18 +0000</pubDate>
      <link>https://dev.to/maisamabbas0323/an-ai-powered-chess-experience-with-google-gemini-58g6</link>
      <guid>https://dev.to/maisamabbas0323/an-ai-powered-chess-experience-with-google-gemini-58g6</guid>
      <description>&lt;h2&gt;
  
  
  Turning a Classic Game into an AI-Powered Experience with Gemini
&lt;/h2&gt;

&lt;p&gt;When I started working on my June Solstice Game Jam project, I knew I didn't want to build just another game.&lt;/p&gt;

&lt;p&gt;I wanted to create something that combined strategy, learning, and artificial intelligence in a way that felt natural and useful.&lt;/p&gt;

&lt;p&gt;Chess immediately came to mind.&lt;/p&gt;

&lt;p&gt;For centuries, chess has been a symbol of intelligence, planning, and decision-making. At the same time, AI has become one of the most exciting technologies of our generation. Combining the two felt like the perfect challenge.&lt;/p&gt;

&lt;p&gt;The result was &lt;strong&gt;Solstice Chess&lt;/strong&gt;, a modern AI-powered chess experience built with Google Gemini.&lt;/p&gt;




&lt;h2&gt;
  
  
  What I Built
&lt;/h2&gt;

&lt;p&gt;Solstice Chess is a web-based chess platform that combines traditional chess gameplay with AI-powered analysis and assistance.&lt;/p&gt;

&lt;p&gt;Players can jump into a game, choose a difficulty level, and receive intelligent insights powered by Gemini.&lt;/p&gt;

&lt;p&gt;The goal wasn't simply to build a chess board.&lt;/p&gt;

&lt;p&gt;The goal was to create an experience where players could improve, learn, and understand the reasoning behind moves rather than simply playing against a computer.&lt;/p&gt;

&lt;h3&gt;
  
  
  Core Features
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Interactive chess gameplay&lt;/li&gt;
&lt;li&gt;Multiple AI difficulty levels&lt;/li&gt;
&lt;li&gt;Gemini-powered move analysis&lt;/li&gt;
&lt;li&gt;Position evaluation&lt;/li&gt;
&lt;li&gt;Strategic recommendations&lt;/li&gt;
&lt;li&gt;Modern responsive interface&lt;/li&gt;
&lt;li&gt;Fast browser-based experience&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Project Screenshots
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Landing Page
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F245m0198eyff6tyytvrf.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F245m0198eyff6tyytvrf.png" alt="Landing Page Of Game" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The landing page introduces players to the project through a clean, premium interface inspired by modern AI products.&lt;/p&gt;




&lt;h3&gt;
  
  
  Gameplay Interface
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fnd5tsdcifk3xzpd0eoqh.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fnd5tsdcifk3xzpd0eoqh.png" alt="Solstice Chess Gameplay" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The gameplay screen focuses on clarity and usability while keeping the chessboard at the center of attention.&lt;/p&gt;




&lt;h3&gt;
  
  
  Gemini Integration
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fd6zqyrzez7g3ic5z18uz.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fd6zqyrzez7g3ic5z18uz.png" alt="Gemini AI Integration" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Players can connect Gemini and unlock AI-powered analysis and chess insights.&lt;/p&gt;




&lt;h2&gt;
  
  
  Why I Built This
&lt;/h2&gt;

&lt;p&gt;One thing I've always found interesting about chess is that beginners often struggle to understand &lt;em&gt;why&lt;/em&gt; a move is good or bad.&lt;/p&gt;

&lt;p&gt;Many chess engines provide evaluations, but they don't always explain their reasoning in a way that's easy to understand.&lt;/p&gt;

&lt;p&gt;That's where Gemini became exciting.&lt;/p&gt;

&lt;p&gt;Instead of only showing moves, Gemini can help explain strategic ideas, identify weaknesses, and provide insights that feel more like guidance than raw calculations.&lt;/p&gt;

&lt;p&gt;I wanted the AI to feel less like an opponent and more like a coach.&lt;/p&gt;




&lt;h2&gt;
  
  
  The Technical Approach
&lt;/h2&gt;

&lt;p&gt;The project was built as a modern web application with a strong focus on user experience.&lt;/p&gt;

&lt;h3&gt;
  
  
  Frontend
&lt;/h3&gt;

&lt;p&gt;The interface was designed around a premium dark theme with clean typography and a distraction-free layout.&lt;/p&gt;

&lt;p&gt;My goal was to create something that felt modern and professional while remaining easy to use.&lt;/p&gt;

&lt;h3&gt;
  
  
  Chess Logic
&lt;/h3&gt;

&lt;p&gt;The chess system handles:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Legal move validation&lt;/li&gt;
&lt;li&gt;Piece movement&lt;/li&gt;
&lt;li&gt;Turn management&lt;/li&gt;
&lt;li&gt;Difficulty settings&lt;/li&gt;
&lt;li&gt;Board state updates&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Maintaining correct game state was one of the most important parts of development.&lt;/p&gt;

&lt;h3&gt;
  
  
  Gemini AI
&lt;/h3&gt;

&lt;p&gt;Gemini serves as the intelligence layer of the application.&lt;/p&gt;

&lt;p&gt;It can be used to:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Analyze positions&lt;/li&gt;
&lt;li&gt;Explain moves&lt;/li&gt;
&lt;li&gt;Provide strategic feedback&lt;/li&gt;
&lt;li&gt;Offer educational commentary&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This transforms a standard chess game into a learning experience.&lt;/p&gt;




&lt;h2&gt;
  
  
  Challenges I Faced
&lt;/h2&gt;

&lt;p&gt;Like most projects, things didn't go smoothly from day one.&lt;/p&gt;

&lt;p&gt;One of the biggest challenges was balancing functionality with simplicity.&lt;/p&gt;

&lt;p&gt;I wanted powerful AI features without overwhelming players with information.&lt;/p&gt;

&lt;p&gt;Another challenge was designing an interface that felt modern while keeping the focus on the chessboard itself.&lt;/p&gt;

&lt;p&gt;Several parts of the UI were redesigned multiple times before reaching the final version.&lt;/p&gt;




&lt;h2&gt;
  
  
  What I'm Most Proud Of
&lt;/h2&gt;

&lt;p&gt;The feature I'm most proud of isn't a single button or screen.&lt;/p&gt;

&lt;p&gt;It's the overall experience.&lt;/p&gt;

&lt;p&gt;I love that a player can open the application, start a game, receive AI insights, and learn something new without needing to install anything or study complicated tools.&lt;/p&gt;

&lt;p&gt;That combination of accessibility and intelligence is exactly what I hoped to achieve.&lt;/p&gt;




&lt;h2&gt;
  
  
  What I Learned
&lt;/h2&gt;

&lt;p&gt;Building Solstice Chess taught me valuable lessons about:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;AI integration&lt;/li&gt;
&lt;li&gt;Product design&lt;/li&gt;
&lt;li&gt;User experience&lt;/li&gt;
&lt;li&gt;State management&lt;/li&gt;
&lt;li&gt;Game development&lt;/li&gt;
&lt;li&gt;Problem solving&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;It also reinforced something I've learned repeatedly as a developer:&lt;/p&gt;

&lt;p&gt;The most challenging part of building software isn't always creating features.&lt;/p&gt;

&lt;p&gt;It's creating an experience that feels simple.&lt;/p&gt;




&lt;h2&gt;
  
  
  What's Next?
&lt;/h2&gt;

&lt;p&gt;This project is only the beginning.&lt;/p&gt;

&lt;p&gt;Future ideas include:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Multiplayer mode&lt;/li&gt;
&lt;li&gt;Game history and replays&lt;/li&gt;
&lt;li&gt;Personalized AI coaching&lt;/li&gt;
&lt;li&gt;Opening explorer&lt;/li&gt;
&lt;li&gt;Advanced analytics&lt;/li&gt;
&lt;li&gt;Cloud synchronization&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;There are many directions this project could grow, and I'm excited to continue exploring them.&lt;/p&gt;




&lt;h2&gt;
  
  
  Code
&lt;/h2&gt;

&lt;p&gt;GitHub Repository:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://github.com/abxdev12/solstice-shift" rel="noopener noreferrer"&gt;https://github.com/abxdev12/solstice-shift&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Live Demo:&lt;/p&gt;


&lt;div class="crayons-card c-embed text-styles text-styles--secondary"&gt;
    &lt;div class="c-embed__content"&gt;
      &lt;div class="c-embed__body flex items-center justify-between"&gt;
        &lt;a href="https://solstice-shift.vercel.app/" rel="noopener noreferrer" class="c-link fw-bold flex items-center"&gt;
          &lt;span class="mr-2"&gt;solstice-shift.vercel.app&lt;/span&gt;
          

        &lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;





&lt;h2&gt;
  
  
  Prize Category
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Best Google AI Usage
&lt;/h3&gt;

&lt;p&gt;Google Gemini plays a central role in Solstice Chess by providing intelligent analysis, strategic feedback, and educational guidance that enhances the traditional chess experience.&lt;/p&gt;

&lt;h3&gt;
  
  
  Best Ode to Alan Turing
&lt;/h3&gt;

&lt;p&gt;Chess and artificial intelligence share a long history together. Solstice Chess celebrates that connection by combining one of humanity's oldest strategy games with modern generative AI technology.&lt;/p&gt;




&lt;p&gt;Thank you for reading and checking out Solstice Chess.&lt;/p&gt;

&lt;p&gt;If you're interested in AI, game development, or chess, I'd love to hear your thoughts and feedback.&lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>gamechallenge</category>
      <category>gamedev</category>
      <category>ai</category>
    </item>
  </channel>
</rss>
