Skip to main content

Getting Started with the UI Library for AI Applications

The Aleph Alpha UI library provides a robust set of components for developing Pharia applications. This guide will help you get started with instrumenting your application using the UI library and demonstrate how to use one of its components.

warning

This is an alpha version of the UI library and is still experimental. The API may change without notice.

Prerequisites​

The UI library uses UnoCSS for styling, which is already instrumented for you. You can check the uno.config.ts file for the configuration:

import { getDesignSystemContentPathConfig, presetAlephAlpha } from '@aleph-alpha/config-css'
import { presetAlephAlphaIcons } from '@aleph-alpha/ds-icons'
import { defineConfig } from 'unocss'

export default defineConfig({
  ...getDesignSystemContentPathConfig('vue'),
  presets: [presetAlephAlpha(), presetAlephAlphaIcons()],
})

Step 1: Instrument the UI Library​

When you create your application using pharia-ai create, the UI library is already installed and instrumented in the application. You can find the following code in your main application file:

import AADesignSystem from '@aleph-alpha/ds-component-vue'

app.use(AADesignSystem)

Additionally, you can see the dependency in your ui/package.json file:

{
  "dependencies": {
    "@aleph-alpha/ds-components-vue": "^1.0.0",
    // ...other dependencies...
  }
}

Step 2: Using the Button Component​

Here is an example of how to use the Button component in your application:

<template>
  <div>
    <AaButton @click="handleClick">Click Me</AaButton>
  </div>
</template>

<script setup>
import { AaButton } from '@aleph-alpha/ds-components-vue'

function handleClick() {
  console.log('Button clicked!')
}
</script>

Step 3: Explore the UI Library Documentation​

For detailed information on each component and how to use them, visit the Aleph Alpha UI library documentation website. Here, you will find comprehensive guides and examples for all available components.