MR

/projects
/ai article writer docx

ReactNode.jsMaterial UIOpenAI APIdocx.jsExpress.js
AI Article Writer DOCX

Overview

ChatGPT AI Writer to DOCX is a web application that combines OpenAI's powerful language model with advanced document editing and export capabilities. The platform aims to streamline the process of generating, editing, and formatting AI-written content into professional DOCX documents.

My Role

As the Full-Stack Developer, I designed and implemented the entire application architecture, focusing on creating a seamless integration between the OpenAI API, rich text editing capabilities, and document export functionality. I worked independently to create an intuitive yet powerful tool for content creation and formatting.

Key Features / Achievements

  • Engineered a customizable OpenAI API playground that allows fine-tuning of AI parameters for optimal content generation
  • Developed an advanced rich text editor using QuillJS with custom formatting controls and real-time preview
  • Implemented a sophisticated DOCX export system with customizable templates, styles, and formatting options
  • Created a responsive Material UI interface that provides an intuitive workflow from AI generation to document export

Technical Implementation Details

AI Integration Features:

  • Customizable OpenAI API parameters
  • Temperature and token control
  • Multiple completion options
  • Context preservation
  • Prompt templates system

Rich Text Editor Capabilities:

  • Full QuillJS integration with custom toolbar
  • Real-time formatting preview
  • Custom formatting options
  • Image handling and embedding
  • Multiple content blocks support

DOCX Export System:

  • Customizable document templates
  • Style preservation during export
  • Complex formatting support
  • Table and list conversion
  • Image export handling
  • Custom header/footer options

Stack & Tools

Built using React 18 for the frontend with Material UI for a polished interface. The rich text editing is powered by React-Quill with custom extensions. Document generation uses the docx.js library for precise DOCX formatting control. Additional tools include:

  • Material UI for component design
  • React Router for navigation
  • QuillJS Parser for content conversion
  • File-Saver for document download handling
  • Custom OpenAI API integration

Results & Outcomes

The application successfully bridges the gap between AI content generation and professional document creation, offering users:

  • Streamlined workflow from AI generation to formatted documents
  • Professional-grade document formatting capabilities
  • Customizable export options for different document types
  • Significant time savings in content creation and formatting
  • Consistent document styling across exports

The platform demonstrates how modern web technologies can be combined to create a powerful content generation and document management tool that maintains professional standards while leveraging AI capabilities.

/screens

screencapture-localhost-3000-2025-06-21-16_24_39
screencapture-localhost-3002-2025-06-21-17_49_10
screencapture-localhost-3002-2025-06-21-17_50_26
screencapture-localhost-3002-2025-06-21-17_53_57
screencapture-localhost-3002-2025-06-21-17_58_18
screencapture-localhost-3002-2025-06-21-18_04_49
screencapture-localhost-3002-essay-writer-2025-06-21-18_00_37
screencapture-localhost-3002-essay-writer-2025-06-21-18_02_37