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:
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- 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-elseall works. - Compositing other open sourced prompt component or composables over memory system.
All included...
<!-- Prompt.vue -->
<script setup lang="ts">
defineProps<{
name: string
}>()
</script>
<template>
<div>
Hello world, this is {{ name }}!
</div>
</template>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!<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>git clone https://github.com/moeru-ai/velin.git
cd airicorepack enable
pnpm installNote
We would recommend to install @antfu/ni to make your script simpler.
corepack enable
npm i -g @antfu/niOnce installed, you can
- use
niforpnpm install,npm installandyarn install. - use
nrforpnpm run,npm runandyarn run.
You don't need to care about the package manager, ni will help you choose the right one.
pnpm devpnpm buildMIT