Chat & Verify

Version: 0.0.11
Package: @kosmas10/chat-and-verify

A web-based chatbot application that provides citations and highlights in source documents for easy verification of AI-generated answers. Supports PDF and Word documents with an intelligent question-answering system powered by Claude or OpenAI.

🎯 Key Features

• 📄 Document Support: Upload and analyze PDF and Word (DOCX) documents
• 💬 AI-Powered Chat: Ask questions about your documents using Claude or OpenAI
• 🔍 Source Verification: Every answer includes exact quotes from the source document
• ✨ Smart Highlighting: Automatically highlights relevant passages in the document
• 🎨 Modern UI: Clean, responsive interface with real-time document viewing
• 🔒 Privacy-First: Your API keys are stored locally, never sent to third parties
• ⚡ Fast Loading: 2-stage bundled React architecture for reliable, efficient loading
• 🎯 Claude Artifact Support: Automatically detects and uses Claude when running as a Claude Artifact

🏗️ Architecture: 2-Stage Bundled React

This application uses a simplified 2-stage loading architecture with bundled React:

Stage 1: Bootstrap (User Installs This)

• File: chat-and-verify-bootstrap.html
• Purpose: Ultra-minimal loader (~25 lines)
• What it does: Fetches the latest bundled app from npm/CDN

Stage 2: Bundled Application (Auto-Updates)

• Package: @kosmas10/chat-and-verify (this package)
• File: dist/chat-and-verify.html
• Purpose: The full Chat & Verify application
• What it does: Provides the complete document chat experience

Why This Architecture?

1. 🛡️ Future-Proof: Stage 1 never changes, so users never need to update their local file
2. 🔄 Auto-Updates: The application updates automatically via npm/CDN
3. 📦 Self-Contained: All dependencies are bundled - no external CDN issues
4. ⚡ Fast: Single HTML file with all assets inlined

🚀 Quick Start

Option A: Using the Bootstrap (Recommended)

1. Download the bootstrap file (one time only):

   curl -O https://cdn.jsdelivr.net/npm/@kosmas10/chat-and-verify@latest/chat-and-verify-bootstrap.html

2. Open it in your browser:

   • Double-click the file, or
   • Open it from your browser's File menu

3. That's it! The application will load automatically and stay up-to-date.

Option B: Direct CDN Link

Simply navigate to:

https://cdn.jsdelivr.net/npm/@kosmas10/chat-and-verify@latest/chat-and-verify-bootstrap.html

📖 Usage

1. Configure Your LLM

If running as a Claude Artifact: The app automatically detects the Claude environment and uses Claude directly - no configuration needed!

If running standalone: On first launch, you'll be prompted to configure your AI provider:

• OpenAI: Requires an API key from platform.openai.com
• Claude: Requires an API key from console.anthropic.com

Your API key is stored locally in your browser and never sent anywhere except to your chosen LLM provider.

2. Upload a Document

Click "Select PDF or Word File" and choose:

• PDF files (.pdf)
• Word documents (.docx)

3. Ask Questions

Type your question in the chat box and press Enter or click the send button.

4. Verify Answers

• Click the 🔍 icon next to any quote to find it in the document
• Highlighted passages show you exactly where information came from
• Scroll through the document while chatting

🎨 Features in Detail

Document Viewer

• PDF Rendering: High-quality PDF display with text selection
• Word Support: Native DOCX rendering with formatting preserved
• Responsive Scaling: Automatically adjusts to your screen size
• Search & Highlight: Find and highlight text across pages
• Resizable Panel: Drag the divider to adjust viewer/chat sizes

Chat Interface

• Markdown Support: Rich text formatting in responses
• Source Citations: Every answer includes exact quotes
• Message History: Scroll through your conversation
• Context Awareness: AI remembers the conversation context

LLM Configuration

• Multiple Providers: Choose between OpenRouter (GPT, Claude, Gemini) and direct OpenAI
• Model Selection: Pick specific models (GPT-4, Claude Sonnet, etc.)
• Secure Storage: API keys stored locally in browser
• Easy Reconfiguration: Change providers anytime

🔧 Development

Prerequisites

• Node.js >= 18.0.0
• npm

Setup

cd chat-and-verify
npm install

Development Server

npm run dev

Build

npm run build

The build produces a single HTML file at dist/chat-and-verify.html.

📦 Package Structure

@kosmas10/chat-and-verify/
├── dist/
│   └── chat-and-verify.html      # Bundled application
├── chat-and-verify-bootstrap.html # Bootstrap loader
├── README.md                      # This file
└── LICENSE                        # MIT License

🌐 Browser Compatibility

• ✅ Chrome/Chromium 90+
• ✅ Firefox 88+
• ✅ Safari 14+
• ✅ Edge 90+

🔒 Privacy & Security

• Local Storage: API keys stored in browser localStorage only
• No Tracking: No analytics or tracking code
• Direct API Calls: Your data goes directly to your chosen LLM provider
• Open Source: Full source code available for inspection

🐛 Troubleshooting

Application Won't Load

1. Check your internet connection
2. Ensure cdn.jsdelivr.net is accessible (not blocked by firewall)
3. Try clearing browser cache
4. Check browser console for errors (F12)

LLM Not Responding

1. Verify your API key is correct
2. Check you have API credits/quota available
3. Ensure the API endpoint is accessible
4. Try reconfiguring with the LLM Config button

Document Won't Upload

1. Ensure file is PDF or DOCX format
2. Check file size (very large files may be slow)
3. Try a different document to isolate the issue

📝 Version History

0.0.8 (Current)

• Complete React rewrite using V2 architecture
• Bundled React application with Tailwind CSS
• Simplified 2-stage loading (no intermediate loader needed)
• All dependencies bundled (PDF.js, mammoth, lucide-react)
• Improved component-based architecture for maintainability
• TypeScript for type safety

0.0.7

• Removed all remaining console.log statements
• Console now completely silent during normal operation

0.0.6

• Removed initial non-error console output
• Bootstrap file updated with cleaner code structure

0.0.5

• Improved Claude Artifact detection

0.0.4

• Added Claude Artifact detection and automatic configuration
• LLM Config button automatically hidden when running as Claude Artifact

0.0.3

• Bug fixes and improvements

0.0.2

• Added bootstrap loader for future-proof installations

0.0.1

• Initial release

🤝 Contributing

Contributions are welcome! Please visit: https://github.com/kosmas10/ai-chat-extensions

📄 License

MIT License - See LICENSE file for details

🆘 Support

For issues, questions, or feature requests:

• GitHub Issues: https://github.com/kosmas10/ai-chat-extensions/issues
• Package: https://www.npmjs.com/package/@kosmas10/chat-and-verify

Made with ❤️ for better AI verification