### Manual Frontend Setup Source: https://github.com/opactorai/claudable/blob/main/README.md Installs Node.js dependencies specifically for the frontend application within the Claudable project. ```bash cd apps/web npm install ``` -------------------------------- ### Manual Backend Setup with Python Virtual Environment Source: https://github.com/opactorai/claudable/blob/main/README.md Sets up a Python virtual environment for the backend API and installs the required Python packages from the requirements.txt file. ```bash cd ../api python3 -m venv .venv source .venv/bin/activate # On Windows: .venv\Scripts\activate pip install -r requirements.txt ``` -------------------------------- ### Troubleshoot Installation Failures Source: https://github.com/opactorai/claudable/blob/main/README.md A command sequence to resolve installation issues by cleaning all dependencies and then reinstalling them. ```bash # Clean all dependencies and retry npm run clean npm install ``` -------------------------------- ### Install Qwen Code CLI Source: https://github.com/opactorai/claudable/blob/main/README.md Installs the Qwen Code CLI globally using npm, allowing interaction with Qwen3-Coder models. Qwen Code is an open-source CLI from Alibaba. ```bash npm install -g @qwen-code/qwen-code@latest qwen --version ``` -------------------------------- ### Start Claudable Development Servers Source: https://github.com/opactorai/claudable/blob/main/README.md Starts the development servers for the Claudable application, typically including frontend and API servers. The application will be accessible via localhost. ```bash npm run dev ``` -------------------------------- ### Tanstack Query Data Fetching Example Source: https://github.com/opactorai/claudable/blob/main/apps/api/app/prompt/system-prompt.md Demonstrates how to use Tanstack Query (React Query) for server state management. It shows fetching data, handling loading states, and managing errors. ```TypeScript const { data, isLoading, error } = useQuery({ queryKey: ['todos'], queryFn: fetchTodos, }); ``` -------------------------------- ### Install Gemini CLI Source: https://github.com/opactorai/claudable/blob/main/README.md Installs the Gemini CLI globally using npm and initiates the authentication flow. Gemini CLI is Google's open-source AI agent powered by Gemini 2.5 Pro. ```bash npm install -g @google/gemini-cli gemini # follow authentication flow ``` -------------------------------- ### Install and Login Claude Code Agent Source: https://github.com/opactorai/claudable/blob/main/README.md Instructions for installing the Claude Code CLI agent globally and logging in to use its features. This agent is recommended for its advanced AI capabilities. ```bash npm install -g @anthropic-ai/claude-code claude # then > /login ``` -------------------------------- ### Install Cursor CLI Agent Source: https://github.com/opactorai/claudable/blob/main/README.md Instructions for installing the Cursor CLI agent using a curl command and logging in. This agent supports multiple AI models and MCP integration. ```bash curl https://cursor.com/install -fsS | bash cursor-agent login ``` -------------------------------- ### Clone Claudable Repository and Install Dependencies Source: https://github.com/opactorai/claudable/blob/main/README.md Clones the Claudable project repository from GitHub, navigates into the project directory, and installs all Node.js and Python dependencies required for development. ```bash git clone https://github.com/opactorai/Claudable.git cd Claudable npm install ``` -------------------------------- ### Install and Login Codex CLI Agent Source: https://github.com/opactorai/claudable/blob/main/README.md Steps to install the Codex CLI agent globally and log in using a ChatGPT account. This agent is known for its high reasoning capabilities and local execution. ```bash npm install -g @openai/codex codex # login with ChatGPT account ``` -------------------------------- ### Next.js Image Remote Patterns Configuration Source: https://github.com/opactorai/claudable/blob/main/apps/api/app/prompt/system-prompt.md Details the requirement to configure `next.config.mjs` with `remotePatterns` before using external image URLs with `next/image`, providing examples of common domains. ```javascript // next.config.mjs // Example configuration for remotePatterns // const config = { // images: { // remotePatterns: [ // { // protocol: 'https', // hostname: 'via.placeholder.com', // }, // { // protocol: 'https', // hostname: 'picsum.photos', // }, // { // protocol: 'https', // hostname: 'unsplash.com', // }, // ], // }, // }; // export default config; ``` -------------------------------- ### Clean Project Dependencies and Environments Source: https://github.com/opactorai/claudable/blob/main/README.md Removes all installed Node.js dependencies (node_modules), Python virtual environments (.venv), and package lock files. This is useful for resolving dependency conflicts or performing a clean reinstallation. ```bash npm run clean ``` -------------------------------- ### List Directory Contents (Bash) Source: https://github.com/opactorai/claudable/blob/main/apps/api/app/prompt/system-prompt.md This command is used to list the contents of the current directory in a long listing format, showing details like permissions, owner, size, and modification date. It's often the first step in understanding the project structure. ```Bash ls -la ``` -------------------------------- ### Next.js Image Component Configuration (JavaScript/TypeScript) Source: https://github.com/opactorai/claudable/blob/main/apps/api/app/prompt/system-prompt.md Demonstrates how to configure remote image domains in `next.config.mjs` for the `next/image` component. This is crucial for optimizing and securely displaying external images. It specifies protocols, hostnames, ports, and pathnames. ```JavaScript /** @type {import('next').NextConfig} */ const nextConfig = { images: { remotePatterns: [ { protocol: 'https', hostname: 'via.placeholder.com', port: '', pathname: '/**', }, { protocol: 'https', hostname: 'picsum.photos', port: '', pathname: '/**', }, ], }, }; module.exports = nextConfig; ``` -------------------------------- ### Next.js File Path Conventions Source: https://github.com/opactorai/claudable/blob/main/apps/api/app/prompt/system-prompt.md This section clarifies the correct way to reference files within a Next.js project, emphasizing the use of relative paths from the project root and avoiding leading slashes or './' prefixes. ```text Standard structure: app/page.tsx, app/layout.tsx, app/globals.css With src: src/app/page.tsx, src/app/layout.tsx, src/app/globals.css NO leading slashes - use relative paths from project root NO `./` prefix - just use direct paths like app/page.tsx ``` -------------------------------- ### Tailwind CSS Basic Directives (CSS) Source: https://github.com/opactorai/claudable/blob/main/apps/api/app/prompt/system-prompt.md Shows the essential Tailwind CSS directives that need to be included in a CSS file (like `index.css`) to enable Tailwind's utility-first styling. These directives inject Tailwind's base styles, component classes, and utility classes. ```CSS @tailwind base; @tailwind components; @tailwind utilities; ``` -------------------------------- ### Tailwind CSS Configuration Source: https://github.com/opactorai/claudable/blob/main/apps/api/app/prompt/system-prompt.md Specifies the use of Tailwind CSS v3 with standard PostCSS configuration, including tailwindcss and autoprefixer plugins. It also advises on custom theme creation using tailwind.config.ts. ```css @tailwind base; @tailwind components; @tailwind utilities; ``` ```javascript // tailwind.config.ts // Use standard configuration with tailwindcss and autoprefixer plugins // For custom themes, use tailwind.config.ts, not experimental CSS features ``` -------------------------------- ### Reinstall Claude Code Safely Source: https://github.com/opactorai/claudable/blob/main/README.md Provides the command to reinstall Claude Code globally without using sudo, mitigating permission issues. It uses npm with the '--unsafe-perm=false' flag. ```bash npm install -g @anthropic-ai/claude-code --unsafe-perm=false ``` -------------------------------- ### Backup SQLite Database Source: https://github.com/opactorai/claudable/blob/main/README.md Creates a backup of the SQLite database used by Claudable. This is recommended before making significant changes or deployments. ```bash npm run db:backup ``` -------------------------------- ### Error Checking Sequence in Next.js Source: https://github.com/opactorai/claudable/blob/main/apps/api/app/prompt/system-prompt.md Outlines the recommended order for checking code quality and potential errors before a final build, prioritizing TypeScript type checking, then ESLint, and finally the build process. ```bash 1. Run `npx tsc --noEmit` for TypeScript type checking (fastest) 2. Run `npx next lint` for ESLint errors (fast) 3. Only after fixing all errors, run `npm run build` as final verification ``` -------------------------------- ### Fix Permission Errors (macOS/Linux) Source: https://github.com/opactorai/claudable/blob/main/README.md Provides steps to resolve potential permission errors in the backend API by recreating the Python virtual environment and reinstalling dependencies. ```bash cd apps/api python3 -m venv .venv source .venv/bin/activate pip install -r requirements.txt ``` -------------------------------- ### Next.js Client Component Directive (TypeScript) Source: https://github.com/opactorai/claudable/blob/main/apps/api/app/prompt/system-prompt.md This directive is used at the top of a React Server Component file to opt-in to client-side interactivity. It's necessary when a component needs to use React Hooks like `useState`, `useEffect`, or event listeners. ```TypeScript "use client"; // Your client component code here ``` -------------------------------- ### Fix Claude Code Permissions (WSL) Source: https://github.com/opactorai/claudable/blob/main/README.md Resolves 'skip permissions' errors in Claude Code on WSL by ensuring correct file ownership and avoiding root execution. It includes commands to check the current user and change directory ownership. ```bash # Check current user whoami # Change ownership of project directory to current user sudo chown -R $(whoami):$(whoami) ~/Claudable ``` -------------------------------- ### Reset SQLite Database Source: https://github.com/opactorai/claudable/blob/main/README.md Resets the Claudable's SQLite database to its initial state. Use with caution as this action will delete all existing data. ```bash npm run db:reset ``` -------------------------------- ### Parse and Compare Server Time with JavaScript Source: https://github.com/opactorai/claudable/blob/main/apps/web/test-time.html This snippet demonstrates how to parse a server time string, both with and without a 'Z' suffix, using the JavaScript Date object. It calculates the time difference in hours between the parsed dates and the current time, and then displays the results on the page. ```javascript const serverTime = "2025-08-19T06:37:10.686372"; const date1 = new Date(serverTime); const date2 = new Date(serverTime + 'Z'); const now = new Date(); const diff1 = now.getTime() - date1.getTime(); const diff2 = now.getTime() - date2.getTime(); const hours1 = Math.floor(diff1 / (1000 * 60 * 60)); const hours2 = Math.floor(diff2 / (1000 * 60 * 60)); const output = document.getElementById('output'); output.innerHTML = `

Server Time: ${serverTime}

Without Z suffix:

Parsed: ${date1.toISOString()}

Local: ${date1.toLocaleString()}

Difference: ${hours1} hours ago

With Z suffix:

Parsed: ${date2.toISOString()}

Local: ${date2.toLocaleString()}

Difference: ${hours2} hours ago

Current Time:

Now: ${now.toISOString()}

Local: ${now.toLocaleString()}

`; ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.