/GROK4FREE

This is free access to grok-4 from Xai, but with usage restrictions from puter.com

Primary LanguageHTMLMIT LicenseMIT

Grok Chat with Puter for free use

✨ Features

  • Direct Grok Integration: Chat directly with the x-ai/grok-4 model via the Puter AI API.
  • Puter Native: Built entirely on and for the Puter platform. No external servers or setup required.
  • Secure Authentication: Uses your existing Puter account for secure and simple sign-in.
  • Persistent Chat History: Your conversations are automatically saved to your Puter account's Key-Value store (puter.kv) and are available across sessions.
  • Streaming Responses: See the AI's response generate in real-time for a fluid, interactive experience.
  • File Attachments: Attach files from your Puter filesystem to your messages, enabling context-rich conversations.
  • Customizable System Prompts: Set a custom system prompt (instruction) for the AI for each individual chat session.
  • Markdown Support: AI responses are rendered as Markdown, supporting rich text formatting, code blocks, lists, and more.
  • Multi-language Support (i18n): The interface is available in English, Russian (Русский), and Chinese (中文), with the language preference saved to your user profile.
  • Modern & Responsive UI: A sleek, dark-themed interface built with Tailwind CSS that is clean, intuitive, and works on various screen sizes.
  • Single-File Application: The entire application is contained within a single index.html file for ultimate portability and simplicity.

🛠️ Tech Stack

  • Platform: Puter.com
  • Core SDK: Puter.js v2 SDK for:
    • puter.auth: User Authentication
    • puter.kv: Data Persistence (Chat History)
    • puter.ai: AI Model Interaction (Grok)
    • puter.fs: File System Operations (Attachments)
    • puter.ui: Native UI Elements (File Picker)
  • Styling: Tailwind CSS
  • Markdown Rendering: Marked.js
  • Frontend: HTML5, CSS3, Vanilla JavaScript (ES6+)

🚀 How to Use

Since this is a Puter application, you don't need to host it anywhere. You can run it directly from your Puter desktop.

  1. Sign in to your account on Puter.com.
  2. Create a new file on your Puter desktop. You can name it index.html.
  3. Open the new file and paste the entire content of the provided index.html file into it.
  4. Save the file.
  5. Double-click the index.html file on your desktop. The application will open and run.

The app will first ask you to sign in to authorize it with your Puter account. Once authorized, your chats will be automatically saved and loaded.

📂 Code Breakdown

The application logic is contained within a single <script> tag in the index.html file. Here's a brief overview of its structure:

  • Internationalization (i18n): The translations object holds all UI strings for different languages. The setLanguage() function dynamically updates the DOM and saves the user's preference to puter.kv.

  • DOM Elements: All necessary DOM elements are selected and stored in constants for easy access.

  • Initialization & Authentication:

    • The DOMContentLoaded event listener checks if the user is signed in with puter.auth.isSignedIn().
    • If not signed in, the authentication modal is shown. puter.auth.signIn() is called on button click.
    • If signed in, initializeUser() is called, which fetches user info, loads the saved language preference, and calls loadChats().

  • Chat Management (Puter KV):

    • loadChats(): Fetches the chat history from Puter's Key-Value store using puter.kv.get('grok-chats-v2').
    • saveChats(): Serializes the chats object and saves it back to the KV store with puter.kv.set().
    • createNewChat(), selectChat(), renderChatHistory(): Functions to manage the chat state and update the UI sidebar.

  • AI Interaction (Puter AI):

    • sendMessage(): This is the core function for communicating with the AI.
    • It constructs a message history, including the system prompt.
    • It calls puter.ai.chat() with the x-ai/grok-4 model and stream: true.
    • It iterates through the response stream, appending text chunks to the UI in real-time for a streaming effect.
    • The final response is saved to the chat history.

  • File Handling (Puter FS & UI):

    • The "Attach File" button uses puter.ui.showOpenFilePicker() to open the native Puter file dialog.
    • The selected file is read and then written to a dedicated folder (grok_attachments) in the user's Puter filesystem using puter.fs.write().
    • The path to this new file is stored and sent as part of the message content to the AI.

  • UI Utilities:

    • Helper functions like scrollToBottom(), textarea auto-resizing, and UI state toggles (showApp, showAuth) are included for a better user experience.

📄 License

This project is licensed under the MIT License. See the LICENSE file for details.