### Install Velin Project Dependencies

Source: https://github.com/moeru-ai/velin/blob/main/README.md

Installs project dependencies using pnpm after cloning the repository. It also provides instructions for installing `@antfu/ni` for simplified package management.

```shell
corepack enable
pnpm install

# For @antfu/ni users:
# npm i -g @antfu/ni
# ni
# nr install
```

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

### Run Velin Development Server

Source: https://github.com/moeru-ai/velin/blob/main/README.md

Starts the Velin development server. This command is used to run the project locally during development. For users of `@antfu/ni`, `nr dev` can be used.

```shell
pnpm dev

# For @antfu/ni users:
# nr dev
```

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

### Install Velin for Browser or Node.js

Source: https://github.com/moeru-ai/velin/blob/main/README.md

Installs the necessary Velin packages for either browser-based development or Node.js/server-side applications. Use `@velin-dev/vue` for browser environments and `@velin-dev/core` for server-side.

```bash
# For browser users
npm i @velin-dev/vue

# For Node.js, CI, server rendering and backend users
npm i @velin-dev/core
```

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

### Vue SFC Example with Reactive Data and Conditional Rendering

Source: https://context7.com/moeru-ai/velin/llms.txt

A complete Vue Single File Component (SFC) example demonstrating conditional rendering, reactive data using `ref`, and template interpolation. This component takes a `language` prop and displays a message, a counter with conditional text, and the provided language.

```vue
<!-- Prompt.vue -->
<script setup>
import { ref } from 'vue'

const props = defineProps({
  language: String
})

const count = ref(10)
const message = ref('Hello from Vue!')
</script>

<template>
  <div>
    <h1>{{ message }}</h1>
    <p>Count: {{ count }}</p>

    <div v-if="count > 5">
      <p>count is greater than 5</p>
    </div>
    <div v-else>
      <p>count is less than or equal to 5</p>
    </div>

    <div>
      Programming language: {{ language }}
    </div>
  </div>
</template>
```

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

### Vue SFC Prompt Component Example

Source: https://github.com/moeru-ai/velin/blob/main/README.md

An example of a Vue Single File Component (SFC) that can be used with Velin. It defines a simple component with a prop and renders a greeting message.

```html
<!-- Prompt.vue -->
<script setup lang="ts">
defineProps<{ name: string }>()
</script>

<template>
  <div>
    Hello world, this is {{ name }}!
  </div>
</template>
```

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

### Markdown with Embedded Vue for Conditional Prompts

Source: https://context7.com/moeru-ai/velin/llms.txt

A Markdown example showcasing embedded Vue script blocks (`<script setup>`) that enable conditional rendering within the Markdown structure. This allows for dynamic generation of prompt sections based on reactive state, such as controlling the visibility of a system prompt.

```markdown
## Prompt Template

<script setup>
import { ref } from 'vue';
const showSystemPrompt = ref(true);
const language = ref('JavaScript');
const userQuestion = ref('How to implement a simple counter?');
</script>

<div v-if="showSystemPrompt">

## System Prompt

You are a professional code assistant, please answer the question using {{language}} language.

</div>

## User Prompt

{{userQuestion}}
```

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

### Render Markdown with Vue Syntax

Source: https://context7.com/moeru-ai/velin/llms.txt

Parses Markdown files containing embedded Vue script blocks and template syntax. It extracts script setup blocks, converts them to Vue SFCs, and renders them with full Vue reactivity support. Requires @velin-dev/core and 'vue'.

```typescript
import { readFile } from 'node:fs/promises'
import { renderMarkdownString } from '@velin-dev/core'
import { ref } from 'vue'

// Markdown file content:
// ## Prompt Template
//
// <script setup>
// import { ref } from 'vue';
// const language = ref('JavaScript');
// </script>
//
// You are a professional code assistant, please answer using {{language}}.

const markdownString = await readFile('./prompt.md', 'utf-8')

const result = await renderMarkdownString(markdownString, {
  language: ref('TypeScript')
})

console.log(result.rendered)
// Output:
// ## Prompt Template
//
// You are a professional code assistant, please answer using TypeScript.
```

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

### Render Vue SFC to Prompt Text in Node.js

Source: https://context7.com/moeru-ai/velin/llms.txt

Renders a Vue Single File Component string to plain text in Node.js. It evaluates the setup script, processes reactive data, performs SSR, and converts HTML output to markdown. Requires @velin-dev/core and 'vue'.

```typescript
import { readFile } from 'node:fs/promises'
import { renderSFCString } from '@velin-dev/core'
import { ref } from 'vue'

// Read the Vue SFC file
const source = await readFile('./Prompt.vue', 'utf-8')

// Prepare reactive props
const name = ref('Velin')
const count = ref(10)

// Render to markdown string
const result = await renderSFCString(source, { name, count })

console.log(result.rendered)
// Output:
// # Hello from Vue!
//
// Count: 10
//
// count is greater than 5

console.log(result.props)
// Output: Array of component prop definitions with types
```

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

### Clone Velin Repository

Source: https://github.com/moeru-ai/velin/blob/main/README.md

Clones the Velin project repository from GitHub and navigates into the project directory. This is the first step for local development.

```shell
git clone https://github.com/moeru-ai/velin.git
cd airi
```

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

### Build Velin Project

Source: https://github.com/moeru-ai/velin/blob/main/README.md

Builds the Velin project for production. This command compiles the project assets. For users of `@antfu/ni`, `nr build` can be used.

```shell
pnpm build

# For @antfu/ni users:
# nr build
```

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

### Use Velin Vue for Browser Prompt Rendering

Source: https://github.com/moeru-ai/velin/blob/main/README.md

Shows how to use the `@velin-dev/vue` package to integrate Velin prompts within a Vue application running in the browser. It utilizes the `usePrompt` composable and watches for prompt changes.

```vue
<script setup lang="ts">
import { usePrompt } from '@velin-dev/vue'
import { ref, watch } from 'vue'

import Prompt from './Prompt.vue'

const language = ref<string>('Velin')
const { prompt, onPrompted } = usePrompt(Prompt, { name })

watch(prompt, () => {
  console.log(prompt)
  // // Hello world, this is Velin!
})
</script>
```

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

### Render Prompt with Velin Core in Node.js

Source: https://github.com/moeru-ai/velin/blob/main/README.md

Demonstrates how to render a Vue SFC prompt string using Velin's core library in a Node.js environment. It reads the SFC from a file and passes data to the rendering context.

```typescript
import { readFile } from 'node:fs/promises'

import { renderSFCString } from '@velin-dev/core'
import { ref } from 'vue'

const source = await readFile('./Prompt.vue', 'utf-8')
const name = ref<string>('Velin')
const result = await renderSFCString(source, { name })

console.log(result)
// Hello world, this is Velin!
```

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

### Direct Component to Markdown String in Browser

Source: https://context7.com/moeru-ai/velin/llms.txt

Renders a Vue component directly to a markdown string without file I/O, suitable for programmatic prompt generation with imported Vue components in browser environments. Requires @velin-dev/core/browser and 'vue'.

```typescript
import { renderComponent } from '@velin-dev/core/browser'
import { ref } from 'vue'
import { defineComponent } from 'vue'

const PromptComponent = defineComponent({
  props: {
    task: String,
    context: String
  },
  setup(props) {
    return { props }
  },
  template: `
    <div>
      <h2>Task</h2>
      <p>{{ task }}</p>
      <h2>Context</h2>
      <p>{{ context }}</p>
    </div>
  `
})

const markdown = await renderComponent(PromptComponent, {
  task: ref('Implement authentication'),
  context: ref('The app uses JWT tokens')
})

console.log(markdown)
// Output:
// ## Task
//
// Implement authentication
//
// ## Context
//
// The app uses JWT tokens
```

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

### Reactive Prompt Rendering in Vue Applications

Source: https://context7.com/moeru-ai/velin/llms.txt

A Vue composable that automatically re-renders prompts when reactive props change. It watches reactive dependencies, triggers re-rendering, and provides a ref for the rendered prompt along with lifecycle event callbacks. Requires @velin-dev/vue and 'vue'.

```typescript
import { usePrompt } from '@velin-dev/vue'
import { ref, watch } from 'vue'
import Prompt from './Prompt.vue'

const language = ref('TypeScript')
const temperature = ref(0.7)

const { prompt, rendering, onPrompted, dispose } = usePrompt(Prompt, {
  language,
  temperature
})

// Watch for prompt changes
watch(prompt, (newPrompt) => {
  console.log('Prompt updated:', newPrompt)
  // Send to AI API
  sendToAI(newPrompt)
})

// Lifecycle callback
onPrompted(() => {
  console.log('Prompt rendered successfully')
})

// Change reactive props - automatically triggers re-render
language.value = 'Python'
temperature.value = 0.9

// Check rendering state
if (rendering.value) {
  console.log('Still rendering...')
}

// Cleanup when done
dispose()
```

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

### Extract Component Prop Definitions with resolveProps

Source: https://context7.com/moeru-ai/velin/llms.txt

Extracts and analyzes component prop definitions with type information using the `resolveProps` function from `@velin-dev/core`. It returns an array of prop metadata including name, type (string, number, boolean, array, unknown), and default values. This is useful for introspection and dynamic form generation.

```typescript
import { resolveProps, onlyRender } from '@velin-dev/core'
import { defineComponent } from 'vue'

const component = defineComponent({
  props: {
    username: String,
    age: Number,
    isActive: Boolean,
    tags: Array
  },
  template: '<div>{{username}}</div>'
})

const rendered = onlyRender(component, {})
const props = resolveProps(rendered)

console.log(props)
// Output:
// [
//   { key: 'username', title: 'username', type: 'string' },
//   { key: 'age', title: 'age', type: 'number' },
//   { key: 'isActive', title: 'isActive', type: 'boolean' },
//   { key: 'tags', title: 'tags', type: 'array' }
// ]
```

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