Velin

Have you wondered how it feels if you can develop the prompts of agents and MCP servers with the power of Vue?

Develop prompts with Vue SFC or Markdown like pro.

We got a playground too, check it out:

Quick Start

Try it by running following command under your pnpm/npm project.

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

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

Features

• No longer need to fight and format with the non-supported DSL of templating language!
• Use HTML elements like <div> for block elements, <span> for inline elements.
• Directives with native Vue template syntax, v-if, v-else all works.
• Compositing other open sourced prompt component or composables over memory system.

All included...

How it feels

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

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

In Node.js

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!

In Vue / Browser

<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>

Development

Clone

git clone https://github.com/luoling8192/velin.git
cd airi

Install dependencies

corepack enable
pnpm install

Note

We would recommend to install @antfu/ni to make your script simpler.

corepack enable
npm i -g @antfu/ni

Once installed, you can

• use ni for pnpm install, npm install and yarn install.
• use nr for pnpm run, npm run and yarn run.

You don't need to care about the package manager, ni will help you choose the right one.

pnpm dev

Note

For @antfu/ni users, you can

nr dev

Build

pnpm build

Note

For @antfu/ni users, you can

nr build

License

MIT