### Complete First-Time Setup

Source: https://github.com/tinykit-studio/tinykit/blob/main/claude.md

Access the setup page in your browser to complete the initial configuration, including Pocketbase admin creation. This is typically done after starting the dev server for the first time.

```bash
# Visit http://localhost:5173/setup to complete first-time setup
```

--------------------------------

### Clone Repository and Install Dependencies

Source: https://github.com/tinykit-studio/tinykit/blob/main/claude.md

Clone the Tinykit repository and install all necessary npm dependencies to set up the project locally. This is the first step in the initial setup process.

```bash
# Clone the repository
git clone https://github.com/tinykit-studio/tinykit.git
cd tinykit

# Install dependencies
npm install
```

--------------------------------

### Start Development Server

Source: https://github.com/tinykit-studio/tinykit/blob/main/claude.md

Start the development server, which includes Pocketbase and Vite. This command also handles the auto-download of Pocketbase and starts both services for a seamless development experience.

```bash
npm run dev
```

--------------------------------

### Clone and Run Tinykit with Node.js

Source: https://github.com/tinykit-studio/tinykit/blob/main/README.md

This snippet demonstrates how to clone the Tinykit repository, install dependencies, and start the development server using Node.js. It automatically downloads PocketBase.

```bash
# Clone and install
git clone https://github.com/tinykit-studio/tinykit.git
cd tinykit
npm install

# Start dev server (auto-downloads PocketBase)
npm run dev
```

--------------------------------

### Install and Initialize Railway CLI

Source: https://github.com/tinykit-studio/tinykit/blob/main/deploy/railway/README.md

Install the Railway CLI globally, log in to your account, and initialize a new project.

```bash
npm i -g @railway/cli
railway login
railway init
```

--------------------------------

### Install Docker on Ubuntu

Source: https://github.com/tinykit-studio/tinykit/blob/main/deploy/docker/README.md

Install Docker on an Ubuntu-based system using the official installation script.

```bash
curl -fsSL https://get.docker.com -o get-docker.sh
sh get-docker.sh
```

--------------------------------

### Install Flyctl for Fly.io Deployment

Source: https://github.com/tinykit-studio/tinykit/blob/main/deploy/docker/README.md

Install the Fly.io command-line interface tool.

```bash
curl -L https://fly.io/install.sh | sh
```

--------------------------------

### Start Pocketbase Server Only

Source: https://github.com/tinykit-studio/tinykit/blob/main/claude.md

Start only the Pocketbase server. Use this command if you are running the frontend development server separately.

```bash
npm run pocketbase:serve
```

--------------------------------

### GET /api/templates

Source: https://github.com/tinykit-studio/tinykit/blob/main/claude.md

Lists available starter templates.

```APIDOC
## GET /api/templates

### Description
Lists available starter templates.

### Method
GET

### Endpoint
/api/templates
```

--------------------------------

### Domain-Based Routing Example

Source: https://github.com/tinykit-studio/tinykit/blob/main/claude.md

Illustrates how multiple domains can point to a single tinykit server, serving different applications or the studio.

```text
calculator.myserver.com/                → Serves calculator production app
calculator.myserver.com/tinykit/studio  → Edit calculator app
calculator.myserver.com/tinykit/dashboard → See ALL apps

blog.myserver.com/                      → Serves blog production app
blog.myserver.com/tinykit/studio        → Edit blog app
```

--------------------------------

### Start Vite Development Server Only

Source: https://github.com/tinykit-studio/tinykit/blob/main/claude.md

Start only the Vite development server. Use this command if you are already running the Pocketbase service separately.

```bash
npm run dev:vite
```

--------------------------------

### Copy Environment Variables

Source: https://github.com/tinykit-studio/tinykit/blob/main/claude.md

Copy the example environment variables file to create your own configuration file. This ensures all necessary variables are present for the application to run.

```bash
cp .env.example .env
```

--------------------------------

### Dockerfile for Node.js Application

Source: https://github.com/tinykit-studio/tinykit/blob/main/deploy/railway/README.md

A Dockerfile to build and run a Node.js application. It installs dependencies, copies the application code, builds the project, exposes port 3000, and sets the entry point to a start script.

```docker
FROM node:20-alpine

WORKDIR /app

# Install dependencies
COPY package*.json ./
RUN npm install

# Copy app
COPY . .

# Build
RUN npm run build

# Expose port
EXPOSE 3000

# Start
COPY start.sh ./
RUN chmod +x start.sh
CMD ["./start.sh"]
```

--------------------------------

### GET /api/templates/[id]

Source: https://github.com/tinykit-studio/tinykit/blob/main/claude.md

Retrieves details for a specific starter template.

```APIDOC
## GET /api/templates/[id]

### Description
Retrieves details for a specific starter template.

### Method
GET

### Endpoint
/api/templates/[id]

### Parameters
#### Path Parameters
- **id** (string) - Required - The ID of the template.
```

--------------------------------

### Clone and Run Tinykit with Docker Compose

Source: https://github.com/tinykit-studio/tinykit/blob/main/README.md

This snippet shows how to clone the Tinykit repository and start the application using Docker Compose. It's the simplest way to run Tinykit locally.

```bash
git clone https://github.com/tinykit-studio/tinykit.git
cd tinykit/deploy/docker
docker-compose up -d
```

--------------------------------

### Troubleshoot Pocketbase Permissions

Source: https://github.com/tinykit-studio/tinykit/blob/main/claude.md

Ensure the Pocketbase executable has execute permissions. This is a common fix if Pocketbase fails to start.

```bash
# Verify file permissions: chmod +x ./pocketbase/pocketbase
```

--------------------------------

### GET /api/settings/llm-status

Source: https://github.com/tinykit-studio/tinykit/blob/main/claude.md

Checks if the LLM is configured.

```APIDOC
## GET /api/settings/llm-status

### Description
Checks if the LLM is configured.

### Method
GET

### Endpoint
/api/settings/llm-status
```

--------------------------------

### Troubleshoot Pocketbase Port Conflict

Source: https://github.com/tinykit-studio/tinykit/blob/main/claude.md

Check if port 8091 is in use by another process. This command helps diagnose issues with Pocketbase failing to start due to port conflicts.

```bash
# Check if port 8091 is available: lsof -i :8091
```

--------------------------------

### POST /api/setup

Source: https://github.com/tinykit-studio/tinykit/blob/main/claude.md

Creates the first-time Pocketbase admin user.

```APIDOC
## POST /api/setup

### Description
Creates the first-time Pocketbase admin user.

### Method
POST

### Endpoint
/api/setup
```

--------------------------------

### Manual Docker Build and Run

Source: https://github.com/tinykit-studio/tinykit/blob/main/deploy/docker/README.md

Manually build the Docker image and run the Tinykit container with specified ports, environment variables, and volume mounts.

```bash
# Build image
docker build -f deploy/docker/Dockerfile -t crud-one .

# Run container
docker run -d \
  -p 3000:3000 \
  -e LLM_PROVIDER=openai \
  -e LLM_API_KEY=sk-your-key \
  -e LLM_MODEL=gpt-4 \
  -v crud_pb_data:/app/pocketbase/pb_data \
  -v crud_workspace:/app/workspace \
  --name crud-one \
  crud-one
```

--------------------------------

### Launch and Deploy App on Fly.io

Source: https://github.com/tinykit-studio/tinykit/blob/main/deploy/docker/README.md

Launch a new application on Fly.io using a Dockerfile, set necessary secrets, and deploy the application.

```bash
# Launch app
fly launch --dockerfile deploy/docker/Dockerfile

# Set secrets
fly secrets set LLM_API_KEY=sk-your-key
fly secrets set LLM_PROVIDER=openai
fly secrets set LLM_MODEL=gpt-4

# Deploy
fly deploy
```

--------------------------------

### ProjectStore Initialization and State Access

Source: https://github.com/tinykit-studio/tinykit/blob/main/claude.md

Demonstrates how to initialize the ProjectStore and access its reactive state properties and methods. This store manages project state with real-time Pocketbase subscriptions.

```typescript
import { getProjectStore } from "./project.svelte";

const store = getProjectStore();

// Reactive state
store.project; // Full project object
store.code; // frontend_code
store.messages; // agent_chat array
store.content; // content fields
store.design; // design fields
store.data_files; // data table names
store.is_processing; // true during AI generation

// Methods
await store.init();
await store.refresh();
await store.loadSnapshots();
```

--------------------------------

### Preview Production Build

Source: https://github.com/tinykit-studio/tinykit/blob/main/claude.md

Preview the production build locally. This allows you to test the optimized application before deploying it.

```bash
npm run preview
```

--------------------------------

### Build for Production

Source: https://github.com/tinykit-studio/tinykit/blob/main/claude.md

Generate a production-ready build of the application. This command optimizes the code for deployment.

```bash
npm run build
```

--------------------------------

### View Container Logs

Source: https://github.com/tinykit-studio/tinykit/blob/main/deploy/docker/README.md

Check the logs of a specific container to troubleshoot startup issues.

```bash
docker logs crud-one
```

--------------------------------

### Run Tinykit with Docker Compose

Source: https://github.com/tinykit-studio/tinykit/blob/main/deploy/docker/README.md

Use Docker Compose to easily set up and run Tinykit in detached mode.

```bash
cd deploy/docker
docker-compose up -d
```

--------------------------------

### Clone Tinykit Repository

Source: https://github.com/tinykit-studio/tinykit/blob/main/deploy/docker/README.md

Clone the Tinykit repository to your local machine to begin the deployment process.

```bash
git clone https://github.com/tinykit-studio/tinykit.git
cd tinykit
```

--------------------------------

### Pocketbase SDK for Projects and Subscriptions

Source: https://github.com/tinykit-studio/tinykit/blob/main/claude.md

Directly access Pocketbase for project data management and set up real-time subscriptions for project updates. Ensure Pocketbase is initialized and accessible.

```typescript
import { pb } from "$lib/pocketbase.svelte";

// Projects
const projects = await pb.collection("_tk_projects").getFullList();
const project = await pb.collection("_tk_projects").getOne(id);
await pb.collection("_tk_projects").update(id, { frontend_code: "..." });

// Real-time subscriptions
pb.collection("_tk_projects").subscribe(id, (e) => {
  if (e.action === "update") {
    // Handle update
  }
});
```

--------------------------------

### Deploy with Railway CLI

Source: https://github.com/tinykit-studio/tinykit/blob/main/deploy/railway/README.md

Deploy your project to Railway using the CLI after initialization and variable configuration.

```bash
railway up
```

--------------------------------

### Caddyfile Configuration

Source: https://github.com/tinykit-studio/tinykit/blob/main/deploy/docker/README.md

Define your domain and reverse proxy settings in the Caddyfile to direct traffic to the Tinykit service.

```caddy
your-domain.com {
  reverse_proxy crud-one:3000
}
```

--------------------------------

### GET/POST /api/settings

Source: https://github.com/tinykit-studio/tinykit/blob/main/claude.md

Retrieves or saves LLM configuration settings.

```APIDOC
## GET/POST /api/settings

### Description
Retrieves or saves LLM configuration settings.

### Method
GET, POST

### Endpoint
/api/settings
```

--------------------------------

### Backup Workspace Volume

Source: https://github.com/tinykit-studio/tinykit/blob/main/deploy/docker/README.md

Create a compressed backup of the workspace volume containing user projects.

```bash
docker run --rm -v crud_workspace:/data -v $(pwd):/backup alpine tar czf /backup/workspace-backup.tar.gz -C /data .
```

--------------------------------

### Update Tinykit with Docker Compose

Source: https://github.com/tinykit-studio/tinykit/blob/main/deploy/docker/README.md

Pull the latest changes, rebuild the Docker images, and restart the services using Docker Compose.

```bash
git pull
docker-compose build
docker-compose up -d
```

--------------------------------

### Load Theme Immediately in Tinykit Studio

Source: https://github.com/tinykit-studio/tinykit/blob/main/src/app.html

This JavaScript code snippet defines various color themes and applies a selected theme to the document's root element. It's designed to be executed immediately to prevent a flash of unstyled content. The theme is loaded from local storage or defaults to 'tinykit'.

```javascript
function () { const themes = { 'tinykit': { bg_primary: '#0d0d0d', bg_secondary: '#1e1e1e', bg_tertiary: '#2a2a2a', accent: '#22c55e', text_primary: '#ffffff', text_secondary: '#999999', border: '#2a2a2a' }, 'ocean': { bg_primary: '#0f172a', bg_secondary: '#1e293b', bg_tertiary: '#334155', accent: '#0ea5e9', text_primary: '#f1f5f9', text_secondary: '#94a3b8', border: '#334155' }, 'forest': { bg_primary: '#18181b', bg_secondary: '#27272a', bg_tertiary: '#3f3f46', accent: '#10b981', text_primary: '#fafafa', text_secondary: '#a1a1aa', border: '#3f3f46' }, 'sunset': { bg_primary: '#1c1917', bg_secondary: '#292524', bg_tertiary: '#44403c', accent: '#f97316', text_primary: '#fafaf9', text_secondary: '#a8a29e', border: '#44403c' }, 'nord': { bg_primary: '#2e3440', bg_secondary: '#3b4252', bg_tertiary: '#434c5e', accent: '#88c0d0', text_primary: '#eceff4', text_secondary: '#d8dee9', border: '#434c5e' }, 'dracula': { bg_primary: '#282a36', bg_secondary: '#44475a', bg_tertiary: '#6272a4', accent: '#ff79c6', text_primary: '#f8f8f2', text_secondary: '#a0a0a0', border: '#44475a' }, 'tokyo': { bg_primary: '#1a1b26', bg_secondary: '#24283b', bg_tertiary: '#414868', accent: '#7aa2f7', text_primary: '#c0caf5', text_secondary: '#9aa5ce', border: '#414868' }, 'light': { bg_primary: '#ffffff', bg_secondary: '#f8fafc', bg_tertiary: '#e2e8f0', accent: '#3b82f6', text_primary: '#0f172a', text_secondary: '#64748b', border: '#e2e8f0' }, 'monokai': { bg_primary: '#272822', bg_secondary: '#3e3d32', bg_tertiary: '#49483e', accent: '#f92672', text_primary: '#f8f8f2', text_secondary: '#75715e', border: '#49483e' }, 'gruvbox': { bg_primary: '#282828', bg_secondary: '#3c3836', bg_tertiary: '#504945', accent: '#fe8019', text_primary: '#ebdbb2', text_secondary: '#a89984', border: '#504945' }, 'solarized': { bg_primary: '#002b36', bg_secondary: '#073642', bg_tertiary: '#586e75', accent: '#268bd2', text_primary: '#fdf6e3', text_secondary: '#93a1a1', border: '#073642' }, 'material': { bg_primary: '#263238', bg_secondary: '#37474f', bg_tertiary: '#455a64', accent: '#80cbc4', text_primary: '#eceff1', text_secondary: '#b0bec5', border: '#37474f' }, 'ayu': { bg_primary: '#0a0e14', bg_secondary: '#0d1017', bg_tertiary: '#1f2430', accent: '#ffb454', text_primary: '#b3b1ad', text_secondary: '#626a73', border: '#1f2430' }, 'onedark': { bg_primary: '#282c34', bg_secondary: '#21252b', bg_tertiary: '#383e4a', accent: '#61afef', text_primary: '#abb2bf', text_secondary: '#5c6370', border: '#383e4a' }, 'catppuccin': { bg_primary: '#1e1e2e', bg_secondary: '#181825', bg_tertiary: '#313244', accent: '#f5c2e7', text_primary: '#cdd6f4', text_secondary: '#6c7086', border: '#313244' }, 'rosepine': { bg_primary: '#191724', bg_secondary: '#1f1d2e', bg_tertiary: '#26233a', accent: '#ebbcba', text_primary: '#e0def4', text_secondary: '#908caa', border: '#26233a' }, 'midnight': { bg_primary: '#0c0f14', bg_secondary: '#141820', bg_tertiary: '#1c222d', accent: '#d4a574', text_primary: '#e8e4df', text_secondary: '#8a8a8a', border: '#252b38' }, 'aurora': { bg_primary: '#080b10', bg_secondary: '#0e1219', bg_tertiary: '#161c26', accent: '#56d4bc', text_primary: '#d4dae4', text_secondary: '#6b7a8f', border: '#1e2633' }, 'ember': { bg_primary: '#151010', bg_secondary: '#1e1717', bg_tertiary: '#2a2121', accent: '#e07850', text_primary: '#ede8e6', text_secondary: '#9a8f8c', border: '#362c2c' }, 'slate': { bg_primary: '#1a1d23', bg_secondary: '#22262e', bg_tertiary: '#2c323c', accent: '#5eb3d5', text_primary: '#e2e6ec', text_secondary: '#8892a2', border: '#363d4a' } } const savedId = localStorage.getItem('builder-theme') || 'tinykit' const theme = themes[savedId] || themes['tinykit'] const root = document.documentElement root.style.setProperty('--builder-bg-primary', theme.bg_primary) root.style.setProperty('--builder-bg-secondary', theme.bg_secondary) root.style.setProperty('--builder-bg-tertiary', theme.bg_tertiary) root.style.setProperty('--builder-accent', theme.accent) root.style.setProperty('--builder-text-primary', theme.text_primary) root.style.setProperty('--builder-text-secondary', theme.text_secondary) root.style.setProperty('--builder-border', theme.border) }()
```

--------------------------------

### Backup PocketBase Volume

Source: https://github.com/tinykit-studio/tinykit/blob/main/deploy/docker/README.md

Create a compressed backup of the PocketBase database volume.

```bash
docker run --rm -v crud_pb_data:/data -v $(pwd):/backup alpine tar czf /backup/pocketbase-backup.tar.gz -C /data .
```

--------------------------------

### TinyKit Repository Structure

Source: https://github.com/tinykit-studio/tinykit/blob/main/claude.md

This snippet displays the directory and file structure of the TinyKit project, illustrating the organization of source code, scripts, and configuration files.

```tree
tinykit/
├── src/
│   ├── routes/
│   │   ├── login/              # Login page
│   │   │   └── +page.svelte
│   │   ├── setup/              # First-time setup wizard
│   │   │   └── +page.svelte
│   │   ├── tinykit/            # Main admin interface
│   │   │   ├── +layout.svelte  # Auth guard
│   │   │   ├── +page.svelte    # Redirect to dashboard
│   │   │   ├── dashboard/      # Projects list
│   │   │   ├── studio/         # Project editor (main UI)
│   │   │   │   ├── +page.svelte
│   │   │   │   ├── project.svelte.ts  # ProjectStore class
│   │   │   │   ├── panels/     # Tab panels
│   │   │   │   │   ├── agent/AgentPanel.svelte
│   │   │   │   │   ├── code/CodePanel.svelte
│   │   │   │   │   ├── content/ContentPanel.svelte
│   │   │   │   │   ├── design/DesignPanel.svelte
│   │   │   │   │   ├── data/DataPanel.svelte
│   │   │   │   │   └── history/HistoryPanel.svelte
│   │   │   │   └── components/ # UI components
│   │   │   │       ├── Header.svelte
│   │   │   │       ├── VibeZone.svelte
│   │   │   │       ├── CodeEditor.svelte
│   │   │   │       └── vibes/  # VibeZone games
│   │   │   ├── new/            # New project page
│   │   │   ├── settings/       # LLM settings
│   │   │   ├── [id]/           # Legacy redirect
│   │   │   ├── lib/            # Local utilities (api.svelte.ts, storage.ts)
│   │   │   ├── types.ts        # Shared TypeScript types
│   │   │   └── context.ts      # Svelte context helpers
│   │   ├── api/
│   │   │   ├── projects/[id]/
│   │   │   │   ├── agent/+server.ts   # LLM streaming endpoint
│   │   │   │   ├── build/+server.ts   # Svelte compilation
│   │   │   │   ├── export/+server.ts  # Project export
│   │   │   │   └── templates/+server.ts
│   │   │   ├── templates/      # Starter templates
│   │   │   ├── settings/       # LLM settings CRUD
│   │   │   ├── setup/          # Setup endpoint
│   │   │   └── proxy/          # External URL proxy
│   │   ├── _tk/                # Internal data endpoints
│   │   │   ├── data/           # Project data CRUD
│   │   │   └── realtime/       # SSE for realtime updates
│   │   ├── +layout.svelte      # Root layout
│   │   ├── +server.ts          # Root route (serves production apps)
│   │   └── [...path]/+server.ts # Catch-all for production app assets
│   ├── lib/
│   │   ├── pocketbase.svelte.ts  # PB client singleton + auth
│   │   ├── services/
│   │   │   └── project.svelte.ts # Project CRUD via SDK
│   │   ├── stores/
│   │   │   ├── project.svelte.ts # Reactive project store
│   │   │   └── vibe_zone.svelte.ts
│   │   ├── components/         # Shared UI components
│   │   │   ├── ui/             # shadcn-svelte components
│   │   │   └── Preview.svelte  # Live preview iframe
│   │   ├── compiler/           # In-browser Svelte compiler
│   │   ├── server/             # Server-side utilities
│   │   │   ├── pb.ts           # Server PB client
│   │   │   └── data-security.ts
│   │   ├── ai/                 # AI agent implementation
│   │   │   ├── sdk-agent.ts    # Main agent with tools
│   │   │   ├── index.ts
│   │   │   └── types.ts
│   │   ├── templates/          # Starter templates
│   │   ├── themes.ts           # App themes
│   │   ├── builder_themes.ts   # Builder UI themes
│   │   └── utils.ts            # Utility functions
│   ├── hooks.server.ts         # Pocketbase proxy + domain resolution
│   ├── app.html                # HTML template
│   └── app.css                 # Global styles with Tailwind
├── scripts/
│   └── download-pocketbase.js  # Downloads PB binary for platform
├── pocketbase/
│   ├── pocketbase             # Binary (downloaded)
│   ├── pb_data/               # Database & files
│   └── pb_migrations/         # Collection migrations
├── static/                    # Static assets
├── .env.example               # Environment template
├── package.json
├── svelte.config.js
├── vite.config.ts
├── tailwind.config.js
└── claude.md                  # This file

```

--------------------------------

### View Railway Deployment Logs

Source: https://github.com/tinykit-studio/tinykit/blob/main/deploy/railway/README.md

Access deployment logs for your Railway service either through the CLI or the Railway dashboard.

```bash
railway logs
```

--------------------------------

### Configure Caddy for Reverse Proxy

Source: https://github.com/tinykit-studio/tinykit/blob/main/deploy/docker/README.md

Add Caddy as a service to your docker-compose.yml to handle HTTPS and reverse proxying to your Tinykit application.

```dockerfile
# Add to docker-compose.yml
services:
  caddy:
    image: caddy:latest
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - ./Caddyfile:/etc/caddy/Caddyfile
      - caddy_data:/data
      - caddy_config:/config
    restart: unless-stopped

volumes:
  caddy_data:
  caddy_config:
```

--------------------------------

### Push to GitHub for Railway Deployment

Source: https://github.com/tinykit-studio/tinykit/blob/main/deploy/railway/README.md

Stage, commit, and push your tinykit project to GitHub to prepare for deployment on Railway.

```bash
git add .
git commit -m "Prepare for Railway deployment"
git push origin master
```

--------------------------------

### POST /api/projects/[id]/build

Source: https://github.com/tinykit-studio/tinykit/blob/main/claude.md

Compiles Svelte code to standalone HTML using Svelte 5 and uploads the result to the `published_html` file field.

```APIDOC
## POST /api/projects/[id]/build

### Description
Compiles Svelte code to standalone HTML using Svelte 5 and uploads the result to the `published_html` file field.

### Method
POST

### Endpoint
/api/projects/[id]/build

### Parameters
#### Path Parameters
- **id** (string) - Required - The ID of the project.
```

--------------------------------

### Project Service SDK

Source: https://github.com/tinykit-studio/tinykit/blob/main/claude.md

Provides SDK-based CRUD operations for managing projects.

```APIDOC
## Project Service SDK

Provides SDK-based CRUD operations for managing projects.

### Methods

- `project_service.list()`: Retrieves a list of all projects.
- `project_service.get(id)`: Retrieves a specific project by its ID.
- `project_service.create({ name, domain })`: Creates a new project with the given name and domain.
- `project_service.update(id, { frontend_code: "..." })`: Updates a project by its ID, allowing modification of fields like `frontend_code`.
- `project_service.delete(id)`: Deletes a project by its ID.
```

--------------------------------

### Configure Environment Variables for Railway

Source: https://github.com/tinykit-studio/tinykit/blob/main/deploy/railway/README.md

Set essential environment variables for your Railway deployment, including AI provider details and server configuration.

```bash
LLM_PROVIDER=openai
LLM_API_KEY=sk-your-api-key-here
LLM_MODEL=gpt-4

HOST=0.0.0.0
WORKSPACE_DIR=/app/workspace
```

--------------------------------

### Pocketbase Direct Access SDK

Source: https://github.com/tinykit-studio/tinykit/blob/main/claude.md

Provides direct access to Pocketbase collections for data operations and real-time subscriptions.

```APIDOC
## Pocketbase Direct Access SDK

Provides direct access to Pocketbase collections for data operations and real-time subscriptions.

### Operations

- **Projects Collection (`_tk_projects`)**:
  - `pb.collection("_tk_projects").getFullList()`: Retrieves all projects.
  - `pb.collection("_tk_projects").getOne(id)`: Retrieves a single project by ID.
  - `pb.collection("_tk_projects").update(id, data)`: Updates a project by ID with new data.

- **Real-time Subscriptions**:
  - `pb.collection(collectionName).subscribe(id, callback)`: Subscribes to real-time events for a specific record or collection. The callback receives an event object `e` with properties like `action` (e.g., 'update').
```

--------------------------------

### POST /api/projects/[id]/agent

Source: https://github.com/tinykit-studio/tinykit/blob/main/claude.md

Streams an AI response for a specific project, handling LLM API key security server-side. Returns an SSE stream with text and tool calls.

```APIDOC
## POST /api/projects/[id]/agent

### Description
Streams an AI response for a specific project, handling LLM API key security server-side. Returns an SSE stream with text and tool calls.

### Method
POST

### Endpoint
/api/projects/[id]/agent

### Parameters
#### Path Parameters
- **id** (string) - Required - The ID of the project.
```

--------------------------------

### Backup Pocketbase Data on Railway

Source: https://github.com/tinykit-studio/tinykit/blob/main/deploy/railway/README.md

Access your Railway instance via SSH and use the Pocketbase CLI to create backups.

```bash
railway run bash
./pocketbase/pocketbase backup-list
./pocketbase/pocketbase backup
```

--------------------------------

### Set Environment Variables with Railway CLI

Source: https://github.com/tinykit-studio/tinykit/blob/main/deploy/railway/README.md

Configure environment variables for your Railway project using the CLI.

```bash
railway variables set LLM_PROVIDER=openai
railway variables set LLM_API_KEY=sk-...
railway variables set LLM_MODEL=gpt-4
```

--------------------------------

### Svelte 5 Prop/State Change Watching

Source: https://github.com/tinykit-studio/tinykit/blob/main/claude.md

Use `watch` from the 'runed' library to observe specific prop or state changes in Svelte 5. Import `watch` from 'runed'. Use `$effect()` only for setup/cleanup side effects.

```svelte
❌ WRONG: $effect(() => { if (target_field) doSomething() })
✅ RIGHT: watch(() => target_field, (value) => { if (value) doSomething() })
```

--------------------------------

### Troubleshoot Hot Reload Cache

Source: https://github.com/tinykit-studio/tinykit/blob/main/claude.md

Clear the SvelteKit and Vite caches to resolve issues with hot reloading not working. This command removes potentially corrupted cache files.

```bash
# Clear cache: rm -rf .svelte-kit node_modules/.vite
```

--------------------------------

### Reset Docker Compose Environment

Source: https://github.com/tinykit-studio/tinykit/blob/main/deploy/docker/README.md

Stop and remove all services, networks, and volumes defined in docker-compose.yml, then restart the services.

```bash
docker-compose down -v
docker-compose up -d
```

--------------------------------

### Pocketbase _tk_settings Collection Schema

Source: https://github.com/tinykit-studio/tinykit/blob/main/claude.md

Schema definition for the `_tk_settings` collection in Pocketbase, used for app configuration like LLM keys.

```text
- id (text, primary key) - Setting key (e.g., "llm")
- value (json) - Setting value
```

--------------------------------

### Project Service CRUD Operations

Source: https://github.com/tinykit-studio/tinykit/blob/main/claude.md

Perform Create, Read, Update, and Delete operations on projects using the project service SDK. Ensure the project service is properly imported.

```typescript
import { project_service } from "$lib/services/project.svelte";

const projects = await project_service.list();
const project = await project_service.get(id);
await project_service.create({ name, domain });
await project_service.update(id, { frontend_code: "..." });
await project_service.delete(id);
```

--------------------------------

### AI Agent Tools

Source: https://github.com/tinykit-studio/tinykit/blob/main/claude.md

Defines the available tools that can be invoked by the AI agent for various tasks.

```APIDOC
## AI Agent Tools

Defines the available tools that can be invoked by the AI agent for various tasks.

### Available Tools

- `write_code`: Write/update frontend code.
- `create_content_field`: Add CMS content fields.
- `update_content_field`: Update content field values.
- `create_design_field`: Add CSS variable design fields.
- `update_design_field`: Update design field values.
- `create_data_table`: Create new data table.
- `add_data_record`: Add record to data table.
- `update_data_record`: Update data record.
- `delete_data_record`: Delete data record.
```

--------------------------------

### POST /api/settings/validate-llm

Source: https://github.com/tinykit-studio/tinykit/blob/main/claude.md

Validates the LLM API key.

```APIDOC
## POST /api/settings/validate-llm

### Description
Validates the LLM API key.

### Method
POST

### Endpoint
/api/settings/validate-llm
```

--------------------------------

### Pocketbase _tk_projects Collection Schema

Source: https://github.com/tinykit-studio/tinykit/blob/main/claude.md

Schema definition for the `_tk_projects` collection in Pocketbase, used to store project data.

```text
- id (auto)
- name (text)
- domain (text, unique, required)
- frontend_code (text, max 10MB)
- backend_code (text, max 10MB)
- custom_instructions (text, max 1MB)
- design (json) - CSS variables array
- content (json) - Content fields array
- snapshots (json) - Time travel history
- agent_chat (json) - Conversation history
- data (json) - App data tables
- settings (json) - Project settings (vibe_zone_enabled, etc.)
- published_html (file) - Built production HTML
- created/updated (auto)
```

--------------------------------

### Tinykit Route Resolution

Source: https://github.com/tinykit-studio/tinykit/blob/main/claude.md

Defines the routing logic within the tinykit application for serving production apps, the studio, dashboard, and other utilities.

```text
- / - Serve production app for current domain (from `published_html` file)
- /tinykit/studio - Edit the project for current domain
- /tinykit/studio?id=X - Edit specific project by ID
- /tinykit/dashboard - List all projects
- /tinykit/new?domain=X - Create new project for domain
- /tinykit/settings - LLM configuration
- /setup - First-time setup wizard
```

--------------------------------

### Svelte 5 Event Handling

Source: https://github.com/tinykit-studio/tinykit/blob/main/claude.md

Use `onclick={handler}` for event handling in Svelte 5. Avoid the `on:event={handler}` syntax.

```svelte
❌ WRONG: <button on:click={handler}>Click</button>
✅ RIGHT: <button onclick={handler}>Click</button>
```

--------------------------------

### Type Check Code

Source: https://github.com/tinykit-studio/tinykit/blob/main/claude.md

Perform type checking on the codebase to catch potential TypeScript errors. This command helps maintain code quality and prevent runtime issues.

```bash
npm run check
```

--------------------------------

### Svelte 5 Reactive Variable Declaration

Source: https://github.com/tinykit-studio/tinykit/blob/main/claude.md

Use `$state()` for reactive variables in Svelte 5. Avoid the legacy `let` syntax for reactive state.

```svelte
❌ WRONG: let count = 0
✅ RIGHT: let count = $state(0)
```

--------------------------------

### Svelte 5 Component Props Declaration

Source: https://github.com/tinykit-studio/tinykit/blob/main/claude.md

Declare component props using `$props()` in Svelte 5. Do not use `export let`.

```svelte
❌ WRONG: export let title = ''
✅ RIGHT: let { title = '' } = $props()
```

--------------------------------

### Svelte 5 Computed Value Declaration

Source: https://github.com/tinykit-studio/tinykit/blob/main/claude.md

Define computed values using `$derived()` in Svelte 5. Do not use `$: ` assignments.

```svelte
❌ WRONG: $: doubled = count * 2
✅ RIGHT: let doubled = $derived(count * 2)
```

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