### Initialize and Run Development Environment

Source: https://github.com/billlzzz26/visual-story-extension/blob/main/packages/craft-blog-cms/README.md

Commands to install dependencies, configure environment variables, and start the development server.

```bash
npm install
cp .env.example .env.local
npm run dev
```

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

### Install project dependencies

Source: https://github.com/billlzzz26/visual-story-extension/blob/main/QWEN.md

Run this command to ensure all required packages are installed, typically required if the server fails to start.

```bash
npm install
```

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

### Example: Everything Test Server

Source: https://github.com/billlzzz26/visual-story-extension/blob/main/reference/kilo-cli-use-mcp.md

Configuration example for adding the test MCP server for development.

```APIDOC
## Example: Everything Test Server

Add the test MCP server for development:

### Request Body Example
```json
{
  "mcp": {
    "mcp_everything": {
      "type": "local",
      "command": ["npx", "-y", "@modelcontextprotocol/server-everything"]
    }
  }
}
```
```

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

### Install Kilo CLI

Source: https://github.com/billlzzz26/visual-story-extension/blob/main/github/README.md

Run this command in the terminal to initiate the KiloConnect installation and workflow setup.

```bash
kilo github install
```

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

### Test Installation with Simple Story

Source: https://github.com/billlzzz26/visual-story-extension/blob/main/reference/docs/quick-start.md

Perform a basic story analysis to verify that the extension is installed and linked correctly with the Gemini CLI.

```bash
# Test with a simple story
gemini story analyze "Once upon a time, a brave knight embarked on a quest to save the kingdom."
```

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

### Copy dashboard example to vsp-ui

Source: https://github.com/billlzzz26/visual-story-extension/blob/main/TODO.md

Copies the existing dashboard example directory to a new directory named 'vsp-ui'.

```bash
cp -r examples/dashboard examples/vsp-ui
```

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

### Example: Context7 MCP Server

Source: https://github.com/billlzzz26/visual-story-extension/blob/main/reference/kilo-cli-use-mcp.md

Configuration example for adding the Context7 MCP server for documentation search.

```APIDOC
## Example: Context7

Add the [Context7](https://github.com/upstash/context7) MCP server for documentation search:

### Request Body Example
```json
{
  "mcp": {
    "context7": {
      "type": "remote",
      "url": "https://mcp.context7.com/mcp"
    }
  }
}
```
```

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

### Example: Figma Desktop MCP Server

Source: https://github.com/billlzzz26/visual-story-extension/blob/main/reference/kilo-cli-use-mcp.md

Configuration example for connecting to the Figma Desktop app's MCP server.

```APIDOC
## Example: Figma Desktop

Connect to the Figma Desktop app's MCP server:

### Request Body Example
```json
{
  "mcp": {
    "Figma Desktop": {
      "type": "remote",
      "url": "http://127.0.0.1:3845/mcp"
    }
  }
}
```
```

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

### Install and Configure Visual Story Planner

Source: https://context7.com/billlzzz26/visual-story-extension/llms.txt

Commands to initialize the extension directory, install necessary dependencies, build the project, and link it to the Gemini CLI.

```bash
gemini extensions new story-planner mcp-server
cd story-planner
npm install @modelcontextprotocol/sdk zod fs-extra
npm install -D typescript @types/node @types/fs-extra esbuild vitest
npm run build
gemini extensions link .
gemini story analyze "Test story text"
```

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

### Install Dependencies

Source: https://github.com/billlzzz26/visual-story-extension/blob/main/reference/docs/quick-start.md

Run this command to install project dependencies if you encounter a 'Cannot find module' error.

```bash
pnpm install
```

```bash
npm install
```

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

### Install Vercel CLI

Source: https://github.com/billlzzz26/visual-story-extension/blob/main/VERCEL_DEPLOYMENT.md

Install the Vercel CLI globally to manage deployments.

```bash
npm install -g vercel
```

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

### Start MCP Server in bl1nk package

Source: https://github.com/billlzzz26/visual-story-extension/blob/main/QWEN.md

Navigates to the bl1nk package directory, builds the project, and starts the MCP server. This is a typical workflow for running the server locally.

```bash
cd packages/bl1nk
npm run build
npm start
```

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

### Create .env.example for vsp-ui

Source: https://github.com/billlzzz26/visual-story-extension/blob/main/TODO.md

Sets up an example environment file for 'vsp-ui', omitting database credentials and only including the port configuration.

```env
PORT=3001
# Other environment variables can be added here
```

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

### Install Project Dependencies

Source: https://github.com/billlzzz26/visual-story-extension/blob/main/reference/docs/quick-start.md

Install the necessary project dependencies using either pnpm or npm. This step is crucial before building the project.

```bash
# Install production dependencies
pnpm install

# Or with npm
npm install
```

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

### Install Dependencies with pnpm

Source: https://github.com/billlzzz26/visual-story-extension/blob/main/QWEN.md

Use this command to install all project dependencies. Ensure Node.js 18+ and pnpm are installed.

```bash
pnpm install
```

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

### Run Vercel Dev Server

Source: https://github.com/billlzzz26/visual-story-extension/blob/main/VERCEL_DEPLOYMENT.md

Start the local development server.

```bash
npm run vercel:dev
```

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

### Configure Everything Test Server

Source: https://github.com/billlzzz26/visual-story-extension/blob/main/reference/kilo-cli-use-mcp.md

Example configuration for the development test MCP server.

```json
{
  "mcp": {
    "mcp_everything": {
      "type": "local",
      "command": ["npx", "-y", "@modelcontextprotocol/server-everything"]
    }
  }
}
```

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

### Start and Resume Kilo Code Session Workflow

Source: https://github.com/billlzzz26/visual-story-extension/blob/main/reference/kilo-cli-ref.md

Illustrates the workflow for starting a Kilo Code session and later resuming it using the --continue flag.

```bash
# Start a session
kilo
# > "Create a REST API"
# ... work on the task ...
# Exit with /exit

# Later, resume the same session
kilo --continue
# Conversation history is restored, ready to continue
```

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

### Configure Context7 MCP Server

Source: https://github.com/billlzzz26/visual-story-extension/blob/main/reference/kilo-cli-use-mcp.md

Example configuration for the Context7 documentation search MCP server.

```json
{
  "mcp": {
    "context7": {
      "type": "remote",
      "url": "https://mcp.context7.com/mcp"
    }
  }
}
```

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

### MCP Configuration Format

Source: https://github.com/billlzzz26/visual-story-extension/blob/main/reference/kilo-cli-use-mcp.md

Example of how to structure the MCP server configuration within the kilo.json file.

```APIDOC
## MCP Configuration Format

Add MCP servers under the `mcp` key in your config file. Each server has a unique name that you can reference in prompts.

### Request Body Example
```json
{
  "mcp": {
    "my-server": {
      "type": "local",
      "command": ["npx", "-y", "my-mcp-command"],
      "enabled": true
    }
  }
}
```

You can disable a server by setting `enabled` to `false` without removing it from your config.
```

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

### Run the MCP Server with pnpm

Source: https://github.com/billlzzz26/visual-story-extension/blob/main/QWEN.md

Starts the Model Context Protocol (MCP) server. This command should be run after the project has been built.

```bash
pnpm run start
```

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

### Configure Figma Desktop MCP Server

Source: https://github.com/billlzzz26/visual-story-extension/blob/main/reference/kilo-cli-use-mcp.md

Example configuration for connecting to the Figma Desktop application's MCP server.

```json
{
  "mcp": {
    "Figma Desktop": {
      "type": "remote",
      "url": "http://127.0.0.1:3845/mcp"
    }
  }
}
```

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

### Fix prestart script in package.json

Source: https://github.com/billlzzz26/visual-story-extension/blob/main/TODO.md

Corrects the 'prestart' script to ensure both the server and plugin are built before starting.

```json
{
  "scripts": {
    "prestart": "npm run build"
  }
}
```

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

### Initialize and Verify Kilo CLI

Source: https://github.com/billlzzz26/visual-story-extension/blob/main/reference/kilo-cli-ref.md

Commands to launch the terminal user interface, verify the installed version, and access help documentation.

```bash
# Start the TUI
kilo

# Check the version
kilo --version

# Get help
kilo --help
```

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

### Tool Registration Flow

Source: https://github.com/billlzzz26/visual-story-extension/blob/main/docs/ARCHITECTURE.md

Describes the sequence of events when the server starts and registers its tools.

```APIDOC
## Tool Registration Flow

```
1. Server starts (src/index.ts)
   ↓
2. Create McpServer instance
   ↓
3. Register GRANULAR_TOOLS (11 tools)
   For each tool:
   a. Look up schema in Schemas
   b. Register with server.tool(name, description, schema.shape, executor)
   c. Executor: executeGranularTool(toolName, args)
   ↓
4. Register BL1NK_VISUAL_TOOLS (4 legacy tools)
   For each tool:
   a. Register with empty schema
   b. Executor: executeStoryTool(toolName, args)
   ↓
5. Register searchEntriesTool (standalone)
   a. Uses its own inputSchema
   b. Executor: searchEntriesTool.execute(args)
   ↓
6. Connect to StdioServerTransport
   ↓
7. Server ready — tools available to MCP clients
```
```

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

### Tool Registration Flow

Source: https://github.com/billlzzz26/visual-story-extension/blob/main/docs/ARCHITECTURE.md

Details the sequence of steps involved in starting the server and registering various tools, including granular tools, legacy tools, and standalone tools, with the MCP server.

```text
1. Server starts (src/index.ts)
   ↓
2. Create McpServer instance
   ↓
3. Register GRANULAR_TOOLS (11 tools)
   For each tool:
   a. Look up schema in Schemas
   b. Register with server.tool(name, description, schema.shape, executor)
   c. Executor: executeGranularTool(toolName, args)
   ↓
4. Register BL1NK_VISUAL_TOOLS (4 legacy tools)
   For each tool:
   a. Register with empty schema
   b. Executor: executeStoryTool(toolName, args)
   ↓
5. Register searchEntriesTool (standalone)
   a. Uses its own inputSchema
   b. Executor: searchEntriesTool.execute(args)
   ↓
6. Connect to StdioServerTransport
   ↓
7. Server ready — tools available to MCP clients
```

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

### Run Tauri Desktop App in Development

Source: https://github.com/billlzzz26/visual-story-extension/blob/main/QWEN.md

Starts the Tauri desktop application in development mode. This command is used for building and running the cross-platform desktop application.

```bash
cd packages/tauri-app
npm run tauri:dev
```

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

### Story Analysis Input Example

Source: https://github.com/billlzzz26/visual-story-extension/blob/main/reference/evaluation.md

Sample story input used to test the StoryGraph generation functionality.

```text
Title: The Lost Kingdom
Character: Princess Aria, role: protagonist
Aria is brave and determined to save her kingdom.
Character: Dark Lord, role: antagonist
The Dark Lord seeks to rule through fear.
Event: Princess discovers the ancient map
Event: Journey through the forbidden forest
Event: Meeting the wise wizard
Event: Finding the hidden key
Event: Confronting the Dark Lord
Event: Restoring peace to the kingdom
```

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

### Dialogue with Action Beats Example

Source: https://github.com/billlzzz26/visual-story-extension/blob/main/skills/character-voice/SKILL.md

Shows how to integrate action beats (physical actions) within dialogue to break up speech and add visual detail. Aim to include an action beat every 3-4 lines of dialogue.

```text
"มันไม่ใช่สิ่งที่ฉันต้องการ" หล่อนดันแก้วออก
เขาเดินไปมาในห้อง "งั้นคุณต้องการอะไร?"
"ฉัน—" มือของหล่อนกำขอบโต๊ะแน่น "ไม่รู้"
```

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

### Interactive Command Approval Example

Source: https://github.com/billlzzz26/visual-story-extension/blob/main/reference/kilo-cli-ref.md

Shows the hierarchical options presented to the user for command approval in interactive mode. Selecting an 'Always run' option adds the command pattern to the auto-approval list.

```text
[!] Action Required:
> ✓ Run Command (y)
  ✓ Always run git (1)
  ✓ Always run git status (2)
  ✓ Always run git status --short --branch (3)
  ✗ Reject (n)
```

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

### GitHub Actions CI/CD Integration

Source: https://github.com/billlzzz26/visual-story-extension/blob/main/reference/kilo-cli-ref.md

Example of how to integrate Kilo Code into a GitHub Actions workflow to run a task in autonomous mode.

```yaml
# GitHub Actions example
- name: Run Kilo Code
  run: |
    kilo run "Implement the new feature" --auto
```

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

### Restrict Specific Actions in External Directories

Source: https://github.com/billlzzz26/visual-story-extension/blob/main/reference/kilo-cli-ref.md

Combine external directory access with specific tool restrictions. This example allows reads but denies edits in a personal project directory.

```json
{
  "$schema": "https://app.kilo.ai/config.json",
  "permission": {
    "external_directory": {
      "~/projects/personal/**": "allow"
    },
    "edit": {
      "~/projects/personal/**": "deny"
    }
  }
}
```

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

### Run bundled server

Source: https://github.com/billlzzz26/visual-story-extension/blob/main/AGENTS.md

Executes the bundled server application.

```bash
npm run start
```

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

### Build and Development Commands

Source: https://github.com/billlzzz26/visual-story-extension/blob/main/CLAUDE.md

Common npm scripts for building, testing, and running the project. Use `npm run check` for linting and formatting.

```bash
npm run build          # esbuild → dist/index.js
```

```bash
npm run build:tsc      # Type-check only (no emit)
```

```bash
npm run dev            # Watch-mode rebuild
```

```bash
npm run start          # Run bundled server
```

```bash
npm test               # Run all vitest tests
```

```bash
npm run test -- -t "test name"  # Single test
```

```bash
npm run check          # Biome lint + format (auto-fix)
```

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

### Upgrade Kilo CLI

Source: https://github.com/billlzzz26/visual-story-extension/blob/main/reference/kilo-cli-ref.md

Methods to update the Kilo CLI installation using the built-in command or npm.

```bash
kilo upgrade
```

```bash
npm update -g @kilocode/cli
```

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

### Watch-mode esbuild rebuild

Source: https://github.com/billlzzz26/visual-story-extension/blob/main/AGENTS.md

Starts esbuild in watch mode, automatically rebuilding the project when files change.

```bash
npm run dev
```

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

### Emotional Description Polish Example

Source: https://github.com/billlzzz26/visual-story-extension/blob/main/agents/prose-artisan.md

Shows how to deepen an expression of sadness by incorporating a classical quote that resonates with the emotion.

```text
Original: He felt very sad.
Polished: This scene, this moment, seemed like a lifetime ago. Waves of sorrow surged through his heart - truly "these feelings could have become memories, only at the time we were already lost."
```

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

### Initialize and Manage Notebook Artifacts in TypeScript

Source: https://github.com/billlzzz26/visual-story-extension/blob/main/packages/bl1nk/notebook/README.md

Demonstrates initializing the NotebookExecutionRuntime and performing CRUD operations on documents. Requires a configured notebookService instance.

```typescript
import { NotebookExecutionRuntime } from './executor.js';

// Initialize with your notebook service
const runtime = new NotebookExecutionRuntime(notebookService);

// Generate all artifacts from StoryGraph
const results = await runtime.generateArtifacts(storyGraph, {
  topicId: 'my-story-topic',
  taskId: 'analysis-task-123' // optional
});

// Individual document operations
await runtime.createDocument({
  title: 'Character Analysis',
  content: '# Characters\n\n...',
  type: 'markdown'
}, { topicId: 'topic-123' });

await runtime.getDocument({ id: 'doc-123' });
await runtime.updateDocument({ id: 'doc-123', content: 'New content' });
await runtime.deleteDocument({ id: 'doc-123' });
```

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

### Deploy to Vercel

Source: https://github.com/billlzzz26/visual-story-extension/blob/main/VERCEL_DEPLOYMENT.md

Deploy the project to production.

```bash
vercel --prod
```

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

### Biome format (write)

Source: https://github.com/billlzzz26/visual-story-extension/blob/main/AGENTS.md

Formats the project code using Biome, writing the formatted changes back to the files.

```bash
npm run format
```

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

### Running Evaluation Commands

Source: https://github.com/billlzzz26/visual-story-extension/blob/main/reference/evaluation.md

Commands for building the project, executing tests, and checking code coverage.

```bash
npm run build
npm test
```

```bash
npm test -- --coverage
```

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

### StoryGraph JSON Structure Example

Source: https://github.com/billlzzz26/visual-story-extension/blob/main/reference/docs/quick-start.md

This JSON structure represents the analyzed story, including metadata, characters, events, conflicts, and relationships.

```json
{
  "meta": {
    "title": "Story Title",
    "genre": "Fantasy",
    "createdAt": "2024-02-19T...",
    "updatedAt": "2024-02-19T...",
    "version": "1.0.0"
  },
  "characters": [
    {
      "id": "c_1",
      "name": "Harry",
      "role": "protagonist",
      "traits": ["brave", "magical"],
      "arc": {
        "start": "Ordinary life",
        "midpoint": "Discovery",
        "end": "Hero",
        "transformation": "Grows from orphan to hero"
      }
    }
  ],
  "events": [
    {
      "id": "e_1",
      "label": "Harry discovers magic",
      "act": 1,
      "importance": "inciting"
    }
  ],
  "conflicts": [...],
  "relationships": [...] 
}
```

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

### Philosophical Expression Polish Example

Source: https://github.com/billlzzz26/visual-story-extension/blob/main/agents/prose-artisan.md

Enhances a statement about the cultivation path by adding a philosophical quote that reflects its arduous and lengthy nature.

```text
Original: The path of cultivation is very long.
Polished: Three thousand paths of the Great Dao, all lead to the same destination. The road of cultivation stretches endlessly - it is simply "the road ahead is long and far, I shall seek high and low."
```

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

### Landscape Description Polish Example

Source: https://github.com/billlzzz26/visual-story-extension/blob/main/agents/prose-artisan.md

Demonstrates enhancing a simple landscape description with more evocative and detailed imagery, adding a classical feel.

```text
Original: Clouds and mist swirled around the mountain, cranes flew past.
Polished: Peaks lay hidden in the cloud sea, ethereal and misty, when suddenly a crane broke through the fog, descending gracefully like a startled swan.
```

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

### Character Description Polish Example

Source: https://github.com/billlzzz26/visual-story-extension/blob/main/agents/prose-artisan.md

Illustrates transforming a basic character beauty description into a more profound and ethereal portrayal using classical prose.

```text
Original: She was stunningly beautiful with an otherworldly air.
Polished: Her graceful bearing was like an immortal descended to mortal realm, with a naturally cold and ethereal aura between her brows that made one dare not gaze directly.
```

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

### Set All Permissions at Once

Source: https://github.com/billlzzz26/visual-story-extension/blob/main/reference/kilo-cli-ref.md

A simplified way to set a uniform permission level for all tools.

```json
{
  "$schema": "https://app.kilo.ai/config.json",
  "permission": "allow"
}
```

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

### Recommended Command Directory Structure

Source: https://github.com/billlzzz26/visual-story-extension/blob/main/commands/AUDIT_REPORT.md

The target directory structure for command files after cleanup.

```text
commands/
├── story/
│   ├── analyze.md      ← Convert from analyze.toml
│   ├── export.md       ← Convert from export.toml
│   ├── validate.md     ← Convert from validate.toml
│   └── audit.md        ← Simplify from audit.toml
└── README.md           ← Document available commands
```

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

### MCP Server Tool Registration

Source: https://github.com/billlzzz26/visual-story-extension/blob/main/CLAUDE.md

Example of registering a tool with the MCP server. Note the use of `zodSchema.shape` instead of a full `z.object()` for input schemas.

```typescript
server.tool(name, description, zodSchema.shape, handler)
```

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

### Get Story Refinement Suggestions

Source: https://github.com/billlzzz26/visual-story-extension/blob/main/reference/docs/quick-start.md

Obtain suggestions for refining your story elements, including options to focus on specific elements like characters or a particular character.

```bash
# Refine all elements
gemini story refine

# Focus on characters
gemini story refine --element characters

# Focus on specific character
gemini story refine --element characters --focus-character "Harry"
```

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

### View Vercel Logs

Source: https://github.com/billlzzz26/visual-story-extension/blob/main/VERCEL_DEPLOYMENT.md

Command to view deployment logs.

```bash
vercel logs
```

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

### Project File Structure

Source: https://github.com/billlzzz26/visual-story-extension/blob/main/SPEC.md

Directory tree for the visual story extension project.

```text
examples/vsp-ui/
├── app/
│   ├── layout.tsx
│   ├── page.tsx                      ← Main dashboard (Providers + DashboardContent)
│   └── api/
│       └── generate/
│           └── route.ts              ← Phase 2: AI generation endpoint
├── components/
│   ├── registry/
│   │   └── index.tsx                 ← defineRegistry() รวม all components
│   ├── story/
│   │   ├── StatCard.tsx
│   │   ├── ActDistributionChart.tsx
│   │   ├── StoryTimeline.tsx
│   │   ├── CharacterCard.tsx
│   │   ├── ConflictCard.tsx
│   │   ├── MermaidViewer.tsx
│   │   ├── HealthCheck.tsx
│   │   ├── ValidationPanel.tsx
│   │   └── ToolCard.tsx
│   └── ui/                           ← shadcn/radix primitives
│       ├── badge.tsx
│       ├── card.tsx
│       ├── button.tsx
│       └── collapsible.tsx
├── lib/
│   ├── catalog.ts                    ← defineCatalog() StoryGraph catalog
│   ├── mock-data.ts                  ← Hero's Journey demo data
│   └── mcp-tools.ts                  ← Tool list + metadata
├── types/
│   └── story.ts                      ← Mirror types จาก bl1nk-visual-mcp
├── .env.example
├── next.config.ts
├── package.json
└── tailwind.config.ts
```

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

### Local MCP Server Configuration

Source: https://github.com/billlzzz26/visual-story-extension/blob/main/reference/kilo-cli-use-mcp.md

Configuration details and options for setting up a local MCP server.

```APIDOC
## Local MCP Server Configuration

Local MCP servers run on your machine and communicate via standard input/output. Set `type` to `"local"`.

### Request Body Example
```json
{
  "mcp": {
    "my-local-server": {
      "type": "local",
      "command": ["npx", "-y", "my-mcp-command"],
      "enabled": true,
      "environment": {
        "API_KEY": "your_api_key"
      }
    }
  }
}
```

#### Local Server Options

| Option        | Type    | Required | Description                                                          |
| ------------- | ------- | -------- | -------------------------------------------------------------------- |
| `type`        | String  | Yes      | Must be `"local"`.                                                   |
| `command`     | Array   | Yes      | Command and arguments to run the MCP server.                         |
| `environment` | Object  | No       | Environment variables to set when running the server.                |
| `enabled`     | Boolean | No       | Enable or disable the MCP server on startup.                         |
| `timeout`     | Number  | No       | Timeout in ms for fetching tools from the MCP server. Default: 5000. |
```

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

### Dialogue Interruption Example

Source: https://github.com/billlzzz26/visual-story-extension/blob/main/skills/character-voice/SKILL.md

Demonstrates the use of an em-dash (—) to indicate interruptions in dialogue. This technique is useful for showing emotional peaks, power struggles, or characters avoiding a topic.

```text
"ฟังนะ ฉันรู้ว่าคุณ—"
"คุณไม่รู้อะไรเลยเกี่ยวกับฉัน"
```

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

### Silence as Dialogue Example

Source: https://github.com/billlzzz26/visual-story-extension/blob/main/skills/character-voice/SKILL.md

Illustrates how silence can be used effectively in dialogue to communicate unspoken emotions or thoughts. This technique is powerful when words fail to express the depth of a character's feelings.

```text
"คุณรักฉันไหม?"
เขาก้มลงมองรองเท้า
```

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

### Tauri production build

Source: https://github.com/billlzzz26/visual-story-extension/blob/main/AGENTS.md

Builds the Tauri application for production deployment.

```bash
npm run tauri:build
```

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

### Create New Gemini Extension

Source: https://github.com/billlzzz26/visual-story-extension/blob/main/reference/docs/quick-start.md

Use this command to create a new Gemini extension for your story planner project. Navigate into the created directory afterward.

```bash
# Create new Gemini extension
gemini extensions new story-planner mcp-server
cd story-planner
```

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

### Project Structure

Source: https://github.com/billlzzz26/visual-story-extension/blob/main/GEMINI.md

Overview of the project's directory structure, highlighting key packages and their contents.

```tree
visual-story-extension/
├── packages/bl1nk/
│   ├── src/index.ts          # MCP server entry, tool registration
│   ├── tools/
│   │   ├── index.ts          # Tool definitions (GRANULAR_TOOLS + BL1NK_VISUAL_TOOLS)
│   │   ├── execute.ts        # Tool executors
│   │   └── search-entries.ts # Standalone search tool
│   ├── exporters/            # Export modules
│   │   ├── mermaid.ts        # Mermaid diagram export
│   │   ├── canvas.ts         # Canvas JSON export
│   │   ├── dashboard.ts      # HTML dashboard export
│   │   ├── markdown.ts       # Markdown document export
│   │   └── mcp-ui-dashboard.ts # MCP-UI dashboard export
│   ├── analyzer.ts           # Story analysis engine
│   ├── validators.ts         # Validation engine (50+ rules)
│   ├── exa-search.ts         # External search integration
│   └── types.ts              # Core type definitions
├── packages/tauri-app/       # Desktop app (React + Vite + Tauri)
├── packages/github-sync/     # GitHub webhook → Notion sync
├── docs/                     # Documentation
│   ├── ARCHITECTURE.md           # System architecture + dataflow
│   ├── TOOL_MAPPING.md           # Complete tool mapping
└── AGENTS.md                 # Root agent instructions
```

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

### Run Kilo Code in Autonomous Mode

Source: https://github.com/billlzzz26/visual-story-extension/blob/main/reference/kilo-cli-ref.md

Executes Kilo Code in non-interactive autonomous mode, suitable for CI/CD pipelines. A message can be provided to guide the AI's autonomous decision-making.

```bash
kilo run --auto "Implement feature X"
```

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

### Bundle with esbuild

Source: https://github.com/billlzzz26/visual-story-extension/blob/main/AGENTS.md

Bundles the project using esbuild. The output is saved to dist/server.js.

```bash
npm run build
```

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

### Final Work Review Prompt

Source: https://github.com/billlzzz26/visual-story-extension/blob/main/agents/xianxia-story.md

After completing the creative work, use this prompt to solicit user feedback on satisfaction levels. It offers options for finalization, minor adjustments, major revisions, or starting over.

```text
Work Complete! Please review and let me know:
A. Very satisfied, ready to finalize
B. Overall good, but some details need adjustment (please specify)
C. Direction is off, needs major revision (please explain)
D. Completely unsatisfied, start over
```

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

### Add vsp-ui to pnpm-workspace.yaml

Source: https://github.com/billlzzz26/visual-story-extension/blob/main/TODO.md

Includes the new 'vsp-ui' directory in the pnpm workspace configuration to manage it as part of the monorepo.

```yaml
packages:
  - 'examples/dashboard'
  - 'examples/vsp-ui'
  # Other packages...
```

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

### Creative Requirements Confirmation Prompt

Source: https://github.com/billlzzz26/visual-story-extension/blob/main/agents/xianxia-story.md

Use this prompt to confirm understanding of user's creative requirements before starting content generation. It lists key story elements for user verification or modification.

```text
Creative Requirements Confirmation:
- Story Type: [type]
- Core Theme: [theme]
- Emotional Tone: [tone]
- Expected Length: [word count]
- Special Requirements: [requirements]

Please confirm if this understanding is correct, or provide modifications?
```

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

### Global Tool Permissions

Source: https://github.com/billlzzz26/visual-story-extension/blob/main/reference/kilo-cli-ref.md

Set default permissions for all tools and override specific ones. Use 'ask', 'allow', or 'deny'.

```json
{
  "$schema": "https://app.kilo.ai/config.json",
  "permission": {
    "*": "ask",
    "bash": "allow",
    "edit": "deny"
  }
}
```

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

### On-the-nose vs. Subtext Dialogue Example

Source: https://github.com/billlzzz26/visual-story-extension/blob/main/skills/character-voice/SKILL.md

Illustrates direct, on-the-nose dialogue versus dialogue using subtext to convey underlying emotions or intentions. Use subtext to add depth and realism to conversations.

```text
"ฉันโกรธคุณนะ เพราะคุณโกหกฉัน"
```

```text
"การประชุมเมื่อคืนเป็นยังไงบ้าง?"
"ก็ดี"
"ค่ะ ฉันเชื่ออย่างนั้น"
```

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

### Structured Logging with Kilo Code SDK

Source: https://github.com/billlzzz26/visual-story-extension/blob/main/CLAUDE.md

Demonstrates structured logging using `client.app.log()` from the `@kilocode/sdk`. Ensure the `extra` field is used for additional context.

```typescript
client.app.log({ body: { service, level, message, extra } })
```

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

### API Key Configuration with Environment Variables

Source: https://github.com/billlzzz26/visual-story-extension/blob/main/reference/kilo-cli-ref.md

Securely configure API keys for providers by referencing environment variables within the configuration file.

```json
{
  "provider": {
    "openai": {
      "options": {
        "apiKey": "{env:OPENAI_API_KEY}"
      }
    }
  }
}
```

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

### Environment Variable Overrides for Kilo Code

Source: https://github.com/billlzzz26/visual-story-extension/blob/main/reference/kilo-cli-ref.md

Demonstrates how to override Kilo Code configuration values using environment variables. Specific variables exist for the provider and its fields.

```text
- `KILO_PROVIDER`: Override the active provider ID
- For `kilocode` provider: `KILOCODE_<FIELD_NAME>` (e.g., `KILOCODE_MODEL` → `kilocodeModel`)
- For other providers: `KILO_<FIELD_NAME>` (e.g., `KILO_API_KEY` → `apiKey`)
```

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

### Configure Local MCP Server

Source: https://github.com/billlzzz26/visual-story-extension/blob/main/reference/kilo-cli-use-mcp.md

Local servers communicate via standard input/output. You can provide environment variables using the environment object.

```json
{
  "mcp": {
    "my-local-server": {
      "type": "local",
      "command": ["npx", "-y", "my-mcp-command"],
      "enabled": true,
      "environment": {
        "API_KEY": "your_api_key"
      }
    }
  }
}
```

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

### Biome lint and format with auto-fix

Source: https://github.com/billlzzz26/visual-story-extension/blob/main/AGENTS.md

Lints and formats the project code using Biome, automatically applying fixes where possible.

```bash
npm run check
```

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

### Configure MCP Server in kilo.json

Source: https://github.com/billlzzz26/visual-story-extension/blob/main/reference/kilo-cli-use-mcp.md

Define an MCP server under the mcp key in your configuration file. Use the enabled property to toggle servers without removing them.

```json
{
  "mcp": {
    "my-server": {
      "type": "local",
      "command": ["npx", "-y", "my-mcp-command"],
      "enabled": true
    }
  }
}
```

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

### Granular Tool Permissions by Input

Source: https://github.com/billlzzz26/visual-story-extension/blob/main/reference/kilo-cli-ref.md

Apply different actions based on the tool's input using pattern matching. The last matching rule takes precedence.

```json
{
  "$schema": "https://app.kilo.ai/config.json",
  "permission": {
    "bash": {
      "*": "ask",
      "git *": "allow",
      "npm *": "allow",
      "rm *": "deny",
      "grep *": "allow"
    },
    "edit": {
      "*": "deny",
      "packages/web/src/content/docs/*.mdx": "allow"
    }
  }
}
```

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

### Link Vercel Project

Source: https://github.com/billlzzz26/visual-story-extension/blob/main/VERCEL_DEPLOYMENT.md

Link the local directory to a Vercel project.

```bash
vercel link
```

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

### Link Local Extension

Source: https://github.com/billlzzz26/visual-story-extension/blob/main/reference/docs/quick-start.md

Use this command to link your local extension if it's not recognized by the Gemini CLI.

```bash
gemini extensions link .
```

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

### Global CLI Options

Source: https://github.com/billlzzz26/visual-story-extension/blob/main/reference/kilo-cli-ref.md

Global flags available for Kilo CLI commands to control logging and help output.

```APIDOC
## Global Options

### Description
Flags that can be applied to most Kilo CLI commands.

### Flags
- **--help, -h** - Show help
- **--version, -v** - Show version number
- **--print-logs** - Print logs to stderr
- **--log-level** - Log level: DEBUG, INFO, WARN, ERROR
```