Capitol AI Vue Components

This library provides a set of reusable Vue components and utilities for building AI-powered applications using the Capitol.ai platform.

Installation

npm install @capitol.ai/vue

Usage

Import and use components from the library in your Vue application:

<template>
  <CapitolAiWrapper>
    <CreateStory v-if="!storyId" @submit="handleOnSubmit" />
    <EditorStory v-else :storyId="storyId" />
  </CapitolAiWrapper>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { CapitolAiWrapper, CreateStory, EditorStory } from '@capitol.ai/vue';
  const storyId = ref<string | null>(null);
  const handleOnSubmit = (id: string) => storyId.value = id;
</script>

Available Components

CapitolAiWrapper

Provides context and configuration for Capitol.ai components.

Props:

• default slot: Vue components to be wrapped.

CreateStory

Component for creating new AI-generated stories.

Props:

• callbackOnSubmit: (storyId: string) => void - Function called with the new story ID when a story is created.
• enablePrompts: boolean (default: true) - Whether to show prompt suggestions.
• enableSources: boolean (default: true) - Whether to enable source inputs.
• pageTitle: string (default: "Create Powerful Content") - The title displayed at the top of the create story component, guiding users on the purpose of the page.
• placeholderPrompt: string (default: "Describe what you want to create") - The text shown in the prompt input field, providing users with an example of what to write or the type of content they can create.
• pageTitleBlock: Vue.Component - Custom component to render as the page title block.
• promptFooter: Vue.Component - Custom component to render as the footer of the prompt section.
• sidebarHeaderContent: Vue.Component - Custom component to render as the header of sidebar.
• sidebarFooterContent: Vue.Component - Custom component to render as the footer of sidebar.
• sidebarSettings: object - Configuration for sidebar blocks:

  {
    enabledTextBlock?: boolean;
    enabledDataSourcesBlock?: boolean;
    enabledImageBlock?: boolean;
    enabledChartBlock?: boolean;
    enabledQuoteBlock?: boolean;
    enabledMetricBlock?: boolean;
    enabledTableBlock?: boolean;
    enabledTweetBlock?: boolean;
    enabledModelSelector?: boolean;
    enabledPrompt?: boolean;
    enabledCustomInstructions?: boolean;
    enabledDeepAnalysis?: boolean;
  }

  All properties default to true if not specified.

Example Usage

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

<template>
  <CreateStory 
    v-if="!state.storyId"
    :callbackOnSubmit="handleOnSubmit"
    placeholderPrompt="Describe what you want to create for your story"
  >
    <template v-slot:node:pageTitleBlock>
      <div :style="{ textAlign: 'center' }">
        <h1 :style="{ fontSize: '2rem', fontWeight: 'bold', marginBottom: '1rem' }">Create Powerful Content with Capitol AI</h1>
        <p :style="{ fontSize: '1rem', marginBottom: '1rem' }">Capitol AI is a tool that allows you to create powerful content with the help of AI.</p>
      </div>
    </template>
    <template v-slot:node:promptFooter>
      <div :style="{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: '1rem' }">
        <button @click="handleClick">Click action example</button>
        <p>Powered by<a href="https://capitol.ai" style="margin-left: 4px;">Capitol AI</a></p>
      </div>
    </template>
  </CreateStory>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { CreateStory } from '@capitol.ai/vue';
  const storyId = ref<string | null>(null);
  const handleOnSubmit = (id: string) => storyId.value = id;
  const handleClick = () => alert('Click action example');
</script>

Explanation

• The ExampleUsage component demonstrates how to implement the CreateStory component.
• It includes a callback function to handle the submission of a new story, along with customizable props for prompts, sidebar settings, and UI elements.

EditorStory

Component for editing and interacting with existing stories.

Props:

• storyId: string - The ID of the story to edit.
• enableDocRemix: boolean (default: true) - Whether to enable document remixing.
• enableHistory: boolean - Whether to enable history functionality.
• enableExportToGoogle: boolean - Whether to enable exporting to Google.
• enableDownload: boolean - Whether to enable downloading.
• enabledShare: boolean - Whether to enable sharing functionality.
• enableHeaderMenu: boolean - Whether to enable the header menu.
• sidebarHeaderContent: Vue.Component - Custom component to render as the header of sidebar.
• sidebarFooterContent: Vue.Component - Custom component to render as the footer of sidebar.
• headerContent: Vue.Component - Custom component to render next to the story name.
• citationsDisclaimer: Vue.Component - Custom component to citation disclaimer.
• sidebarSettings: object - Configuration for sidebar blocks:

  {
    enabledTextBlock?: boolean;
    enabledDataSourcesBlock?: boolean;
    enabledImageBlock?: boolean;
    enabledChartBlock?: boolean;
    enabledQuoteBlock?: boolean;
    enabledMetricBlock?: boolean;
    enabledTableBlock?: boolean;
    enabledTweetBlock?: boolean;
    enabledModelSelector?: boolean;
    enabledPrompt?: boolean;
    enabledCustomInstructions?: boolean;
    enabledDeepAnalysis?: boolean;
  }

  All properties default to true if not specified.

Example Usage

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

<template>
  <EditorStory v-if="state.storyId" :storyId="state.storyId" />
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { EditorStory } from '@capitol.ai/vue';
  const storyId = ref<string | null>(null);
</script>

Explanation

• The Editor component demonstrates how to implement the EditorStory component.
• It retrieves the storyId from the URL parameters and passes it to the EditorStory along with customizable props for sidebar settings and functionality options.

Proxy Configuration

To handle Capitol.ai API requests, you need to configure a proxy in your Vue project. If you're using Vite, add the following to your vite.config.ts:

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      '/proxy/api/capitolai': {
        target: 'http://localhost:8000/api/v1',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/proxy\/api\/capitolai/, ''),
      },
    },
  },
});

Styles Customization (Optional)

If you want to customize the appearance of the Capitol.ai Vue components, you can add CSS variables to your project's styles. Here are the available variables and their default values:

:root {
  --capitol-accent-color: #1D76F3;
  --capitol-font-family: 'Akkurat Pro';
  --capitol-border-radius: 8px;
  --capitol-prompt-background-color: #FFFFFF;
  --capitol-sidebar-background-color: #FFFFFF;
  --capitol-story-background-color: #FFFFFF;
}

To apply custom styles, add these variables to your project's CSS file (e.g., App.css or index.css) and modify the values as needed:

:root {
  --capitol-accent-color: #00a86b;
  --capitol-font-family: 'Roboto', sans-serif;
  /* Add other variables you want to customize */
}

This example changes the accent color to green and the font to Roboto. You can adjust any of the variables to match your application's design.

Note: Customization is entirely optional. The components will use their default styles if you don't specify these variables.

ClassNames for Customization (Optional)

Capitol.ai Vue components provide several predefined class names that you can use to customize their styles. Below is a list of available class names along with a brief description of their purpose:

• capitol-config-sidebar: The main container for the configuration sidebar.
• capitol-config-sidebar__scrollable: A scrollable area within the configuration sidebar.
• capitol-config-sidebar__divider: A divider element within the configuration sidebar.
• capitol-config-sidebar__format-list: The list of formats available in the configuration sidebar.
• capitol-config-sidebar__footer: The footer area of the configuration sidebar.
• capitol-config-sidebar__item: An individual item within the configuration sidebar.
• capitol-config-sidebar__header: The header area of the configuration sidebar.
• capitol-prompt-container: The container for the prompt input area.
• capitol-suggestions: The container for suggestion elements.
• capitol-suggestions__title: The title element for the suggestions block.
• capitol-suggestions__options: The container for individual suggestion options.
• capitol-suggestion: The container element for an individual suggestion.
• capitol-suggestion__title: The title element for the suggestion.
• capitol-suggestion__icon: The icon associated with each suggestion.

Example of Customizing Styles

You can target these class names in your CSS to apply custom styles. For example:

.capitol-config-sidebar {
  background-color: #f8f9fa;
}

.capitol-suggestions__title {
  font-weight: bold;
  color: #1D76F3;
}

.capitol-config-sidebar__footer {
  padding: 10px;
  text-align: center;
}

Feel free to modify these styles to match your application's design!

Proprietary License

Copyright (c) 2024 Capitol AI. All rights reserved.

1. Definitions: “Software” refers to the Capitol AI Vue Components, including all source code, object code, documentation, and related materials provided by Capitol AI.

2. License Grant: Subject to the terms of this agreement, Capitol AI grants you a non-exclusive, non-transferable, limited license to use the Software solely for your internal, non-commercial purposes.

3. Restrictions: You may not: a) Modify, adapt, alter, translate, or create derivative works of the Software b) Reverse engineer, decompile, disassemble, or otherwise attempt to derive the source code of the Software c) Redistribute, sublicense, rent, lease, or sell the Software d) Remove or alter any proprietary notices or labels on the Software e) Use the Software for any commercial purpose without explicit written consent from Capitol AI

4. Commercial Use: Any use of the Software for commercial purposes, including but not limited to selling products or services that utilize the Software, is strictly prohibited without explicit written consent from Capitol AI. To obtain consent for commercial use, please contact Capitol AI directly.

5. Ownership: Capitol AI retains all right, title, and interest in and to the Software, including all intellectual property rights therein.

6. Termination: This license is effective until terminated. Capitol AI may terminate this license at any time if you fail to comply with any term of this agreement.

7. Disclaimer of Warranty: THE SOFTWARE IS PROVIDED “AS IS” WITHOUT WARRANTY OF ANY KIND. CAPITOL AI DISCLAIMS ALL WARRANTIES, WHETHER EXPRESS, IMPLIED, OR STATUTORY.

8. Limitation of Liability: IN NO EVENT SHALL CAPITOL AI BE LIABLE FOR ANY SPECIAL, INCIDENTAL, INDIRECT, OR CONSEQUENTIAL DAMAGES WHATSOEVER ARISING OUT OF THE USE OF OR INABILITY TO USE THE SOFTWARE.

9. Governing Law: This agreement shall be governed by and construed in accordance with the laws of Delaware without regard to its conflict of law provisions.

By using the Software, you acknowledge that you have read this agreement, understand it, and agree to be bound by its terms and conditions.