Syncfusion Smart Components & Samples

https://github.com/syncfusion/smart-ai-samples
Admin
Syncfusion Smart Components are AI-integrated UI components and samples that offer intelligent...
Tokens:22,326
Snippets:100
Trust Score:10
Update:1 year ago
Show doc for...
Tokens:
Raw
### Run Development Server with npm

Source: https://github.com/syncfusion/smart-ai-samples/blob/master/typescript/README.md

Starts the application development server using the 'npm run start' command. This command compiles the project and serves it, typically in a default web browser.

```bash
npm run start
```

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

### Clone Smart AI Samples Repository

Source: https://github.com/syncfusion/smart-ai-samples/blob/master/typescript/README.md

Clones the smart-ai-samples GitHub repository to your local machine. This is the initial step to get the project structure.

```bash
git clone https://github.com/syncfusion/smart-ai-samples.git

cd smart-ai-samples/typescript
```

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

### Configure Stability AI API Key (C# Example)

Source: https://github.com/syncfusion/smart-ai-samples/blob/master/typescript/README.md

Provides a C# example for configuring the API key for Stability AI, which is used for AI Image processing. This shows how the key might be stored in a C# application.

```csharp
// Stability AI APIKEY
public string ApiKey = "your-api-key";
```

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

### Install Project Dependencies

Source: https://github.com/syncfusion/smart-ai-samples/blob/master/react/README.md

Installs all the required Node.js packages for the project, as defined in the package.json file. This command should be run after cloning the repository.

```bash
npm install
```

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

### Register Syncfusion License Key

Source: https://github.com/syncfusion/smart-ai-samples/blob/master/typescript/README.md

Activates the Syncfusion license key by running an npx command. This requires creating a syncfusion-license.txt file in the project root with the license key.

```bash
npx syncfusion-license activate
```

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

### Install Ollama NuGet Packages for Blazor

Source: https://github.com/syncfusion/smart-ai-samples/blob/master/blazor/README.md

Installs the necessary NuGet packages for integrating Ollama with Blazor applications. These packages include core AI libraries and Ollama-specific integrations.

```powershell
Install-Package Microsoft.Extensions.AI
Install-Package OllamaSharp 

```

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

### Run Development Server

Source: https://github.com/syncfusion/smart-ai-samples/blob/master/react/README.md

Starts the application development server using an npm script. This command compiles the code and launches the application in the default web browser, allowing for real-time development.

```bash
npm run dev
```

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

### Install OpenAI NuGet Packages for Blazor

Source: https://github.com/syncfusion/smart-ai-samples/blob/master/blazor/README.md

Installs the necessary NuGet packages for integrating OpenAI with Blazor applications. These packages provide the core libraries for AI functionalities.

```powershell
Install-Package Microsoft.Extensions.AI
Install-Package Microsoft.Extensions.AI.OpenAI
```

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

### Install Azure OpenAI NuGet Packages for Blazor

Source: https://github.com/syncfusion/smart-ai-samples/blob/master/blazor/README.md

Installs the necessary NuGet packages for integrating Azure OpenAI with Blazor applications. These packages include core AI libraries and Azure-specific integrations.

```powershell
Install-Package Microsoft.Extensions.AI
Install-Package Microsoft.Extensions.AI.OpenAI
Install-Package Azure.AI.OpenAI
```

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

### Configure Azure OpenAI and Gemini AI Models

Source: https://github.com/syncfusion/smart-ai-samples/blob/master/typescript/README.md

Demonstrates how to configure AI service credentials in the ai-models.ts file for both Azure OpenAI and Google Gemini. It shows placeholder values for resource names, API keys, and model names.

```typescript
// for Azure Open AI service
const azure = createAzure({
    resourceName: 'YOUR_RESOURCE_NAME',
    apiKey: 'YOUR_API_KEY',
});
const aiModel = azure('YOUR_MODEL_NAME');
// for gemini model
const google = createGoogleGenerativeAI({
    baseURL: "https://generativelanguage.googleapis.com/v1beta",
    apiKey: "API_KEY"
});
const aiModel = google('YOUR_MODEL_NAME');
```

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

### Configure Stability AI API Key for Image Editor

Source: https://github.com/syncfusion/smart-ai-samples/blob/master/typescript/README.md

Sets up the API key for Stability AI, a third-party service used for AI Image processing in the Image Editor component. The key is added as a bearer token.

```typescript
const apiKey= `Bearer YOUR_API_KEY`;
```

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

### Configure OpenAI Service in Blazor Server App

Source: https://github.com/syncfusion/smart-ai-samples/blob/master/blazor/README.md

Configures the OpenAI service for Blazor Server applications. Requires installing Microsoft.Extensions.AI and Microsoft.Extensions.AI.OpenAI NuGet packages. It injects the OpenAI inference service into the application.

```csharp
using Syncfusion.Blazor.SmartComponents;
using Syncfusion.Blazor.AI;
using Microsoft.Extensions.AI;
using OpenAI;
var builder = WebApplication.CreateBuilder(args);

....

builder.Services.AddSyncfusionBlazor();

string openAIApiKey = "API-KEY";
string openAIModel = "OPENAI_MODEL";
OpenAIClient openAIClient = new OpenAIClient(openAIApiKey);
IChatClient openAIChatClient = openAIClient.GetChatClient(openAIModel).AsIChatClient();
builder.Services.AddChatClient(openAIChatClient);

builder.Services.AddSyncfusionSmartComponents()
.InjectOpenAIInference();

var app = builder.Build();
....
```

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

### Configure Ollama Service in Blazor Server App

Source: https://github.com/syncfusion/smart-ai-samples/blob/master/blazor/README.md

Configures the Ollama service for Blazor Server applications, allowing the use of self-hosted AI models. Requires installing Microsoft.Extensions.AI and OllamaSharp NuGet packages. It injects the Ollama chat client.

```csharp
using Syncfusion.Blazor.SmartComponents;
using Syncfusion.Blazor.AI;
using Microsoft.Extensions.AI;
using OllamaSharp;

var builder = WebApplication.CreateBuilder(args);

....

builder.Services.AddSyncfusionBlazor();

string ModelName = "MODEL_NAME";
IChatClient chatClient = new OllamaApiClient("http://localhost:11434", ModelName);
builder.Services.AddChatClient(chatClient);

builder.Services.AddSyncfusionSmartComponents()
.InjectOpenAIInference();

var app = builder.Build();
....

```

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

### Configure Azure OpenAI Service in Blazor Server App

Source: https://github.com/syncfusion/smart-ai-samples/blob/master/blazor/README.md

Configures the Azure OpenAI service for Blazor Server applications. Requires installing Microsoft.Extensions.AI, Microsoft.Extensions.AI.OpenAI, and Azure.AI.OpenAI NuGet packages. It injects the Azure OpenAI inference service.

```csharp
using Syncfusion.Blazor.SmartComponents;
using Syncfusion.Blazor.AI;
using Azure.AI.OpenAI;
using Microsoft.Extensions.AI;
using System.ClientModel;

var builder = WebApplication.CreateBuilder(args);

....

builder.Services.AddSyncfusionBlazor();

string azureOpenAIKey = "AZURE_OPENAI_KEY";
string azureOpenAIEndpoint = "AZURE_OPENAI_ENDPOINT";
string azureOpenAIModel = "AZURE_OPENAI_MODEL";
AzureOpenAIClient azureOpenAIClient = new AzureOpenAIClient(
     new Uri(azureOpenAIEndpoint),
     new ApiKeyCredential(azureOpenAIKey)
);
IChatClient azureOpenAIChatClient = azureOpenAIClient.GetChatClient(azureOpenAIModel).AsIChatClient();
builder.Services.AddChatClient(azureOpenAIChatClient);

builder.Services.AddSyncfusionSmartComponents()
.InjectOpenAIInference();

var app = builder.Build();
....

```

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

### Use Open Iconic Standalone Icon Font

Source: https://github.com/syncfusion/smart-ai-samples/blob/master/blazor/SyncfusionAISamples/wwwroot/open-iconic/README.md

This example shows how to use Open Iconic's icon font on its own, without a specific framework. It requires linking the default stylesheet and using span elements with the 'oi' class and a 'data-glyph' attribute to specify the icon.

```html
<link href="/open-iconic/font/css/open-iconic.css" rel="stylesheet">
<span class="oi" data-glyph="icon-name" title="icon name" aria-hidden="true"></span>
```

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

### Implementing SmartTextArea in Vue.js

Source: https://github.com/syncfusion/smart-ai-samples/blob/master/vue/src/ai-components/ai-smart-textarea/Readme.md

This snippet demonstrates how to integrate the Syncfusion SmartTextArea component into a Vue.js application. It includes template setup, component registration, and property configuration for placeholder, label type, resize mode, dimensions, user role, predefined phrases, and AI suggestion handling. The `aiSuggestionHandler` is configured to call an asynchronous function for fetching AI suggestions.

```html
<template>
    <div id="app">
      <ejs-smarttextarea
        id="default"
        :placeholder="placeholder"
        :floatLabelType="floatLabelType"
        :resizeMode="resizeMode"
        :rows="rows"
        :cols="cols"
        :userRole="userRole"
        :userPhrases="userPhrases"
        :aiSuggestionHandler="serverAIRequest"
      ></ejs-smarttextarea>
    </div>
</template>
```

```typescript
import { Component, Vue } from 'vue-property-decorator';
import { SmartTextAreaComponent } from '@syncfusion/ej2-vue-inputs';

@Component({
    components: {
      'ejs-smarttextarea': SmartTextAreaComponent
    }
})
export default class App extends Vue {
    public placeholder: string = 'Enter your queries here';
    public floatLabelType: string = 'Auto';
    public resizeMode: string = 'Both';
    public rows: number = 3;
    public cols: number = 35;
    public userRole: string = 'Employee communicating with internal team';
    public userPhrases: string[] = [
      "Please find the attached report.",
      "Let's schedule a meeting to discuss this further.",
      "Can you provide an update on this task?",
      "I appreciate your prompt response.",
      "Let's collaborate on this project to ensure timely delivery."
    ];

    public serverAIRequest = async (settings: any) => {
      let output = '';
      try {
        const response = await (window as any).AzureAIRequest(settings) as string;
        output = response;
      } catch (error) {
        console.error("Error:", error);
      }
      return output;
    }
}
```

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

### Annotate Form Fields for SmartPasteButton

Source: https://github.com/syncfusion/smart-ai-samples/blob/master/react/src/ai-components/smartpaste/Readme.md

These HTML examples illustrate how to use the `data-smartpaste-description` attribute on form elements (`<input>`, `<textarea>`) to provide custom descriptions for the AI. This helps the language model generate more accurate and relevant content for the fields.

```html
<input data-smartpaste-description="The user's vehicle registration number, formatted as XYZ-123" />

<textarea data-smartpaste-description="The job description should start with JOB TITLE in all caps, followed by a paragraph of text"></textarea>

<input type="checkbox" data-smartpaste-description="Check if the product description indicates suitability for children; otherwise, uncheck" />
```

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

### CSS: Reset and Basic Body Styling

Source: https://github.com/syncfusion/smart-ai-samples/blob/master/typescript/src/index.html

This snippet resets default margin and padding for all elements and sets the font family for the body. It ensures a consistent starting point for styling across different browsers.

```css
/* Reset default margin and padding for all elements */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: Arial, sans-serif; }
```

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

### HTML: Custom Form Field Descriptions for Smart Paste

Source: https://github.com/syncfusion/smart-ai-samples/blob/master/blazor/SyncfusionAISamples/Components/Pages/SmartPaste/Readme.md

Demonstrates how to use the `data-smartpaste-description` attribute in HTML to provide custom descriptions for form fields. These descriptions guide the language model in generating accurate field values. This is useful for input, textarea, and checkbox elements.

```html
<input data-smartpaste-description="The user&#39;s vehicle registration number, formatted as XYZ-123" />

<textarea data-smartpaste-description="The job description should start with JOB TITLE in all caps, followed by a paragraph of text"></textarea>

<input type="checkbox" data-smartpaste-description="Check if the product description indicates suitability for children; otherwise, uncheck" />
```

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

### Clone Git Repository

Source: https://github.com/syncfusion/smart-ai-samples/blob/master/react/README.md

Clones the smart-ai-samples repository and navigates into the React directory. This is the initial step to set up the project locally.

```bash
git clone https://github.com/syncfusion/smart-ai-samples.git
cd smart-ai-samples/react
```

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

### Configure AI Models (Azure OpenAI and Gemini)

Source: https://github.com/syncfusion/smart-ai-samples/blob/master/angular/README.md

This code demonstrates how to configure AI models for the project, specifically supporting both Azure OpenAI and Gemini. It shows how to create instances for each service using their respective SDKs and placeholders for credentials like resource name, API key, and model name. This configuration is done in the `./src/app/ai-models/ai-models.ts` file.

```typescript
const azure = createAzure({
    resourceName: 'YOUR_RESOURCE_NAME',
    apiKey: 'YOUR_API_KEY',
});
const aiModel = azure('YOUR_MODEL_NAME');
// for gemini model
const google = createGoogleGenerativeAI({
    baseURL: "https://generativelanguage.googleapis.com/v1beta",
    apiKey: "API_KEY"
});
const aiModel = google('YOUR_MODEL_NAME');

```

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

### Initialize SmartTextArea with User Phrases

Source: https://github.com/syncfusion/smart-ai-samples/blob/master/react/src/ai-components/smarttextarea/Readme.md

Demonstrates how to initialize a SmartTextArea component, defining custom user phrases for AI suggestions and setting the suggestion display behavior.

```typescript
let textareaObj: SmartTextArea = new SmartTextArea({
    placeholder: 'Enter your queries here',
    floatLabelType: 'Auto',
    resizeMode: 'Both',
    rows: 3,
    cols: 35,
    userRole: 'Employee communicating with internal team',
    UserPhrases: [
        "Please find the attached report.",
        "Let's schedule a meeting to discuss this further.",
        "Can you provide an update on this task?",
        "I appreciate your prompt response.",
        "Let's collaborate on this project to ensure timely delivery."
    ],
    aiSuggestionHandler: serverAIRequest,
    showSuggestionOnPopup: 'Enable'
});
```

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

### Configure Azure OpenAI and Gemini Models

Source: https://github.com/syncfusion/smart-ai-samples/blob/master/vue/README.md

This code illustrates how to configure AI models using the Vercel AI SDK for both Azure OpenAI and Gemini. It shows how to instantiate the clients with resource details and API keys, and then select a model. Replace placeholders with your actual credentials and model names.

```typescript
const azure = createAzure({
    resourceName: 'YOUR_RESOURCE_NAME',
    apiKey: 'YOUR_API_KEY',
});
const aiModel = azure('YOUR_MODEL_NAME');
// for gemini model
const google = createGoogleGenerativeAI({
    baseURL: "https://generativelanguage.googleapis.com/v1beta",
    apiKey: "API_KEY"
});
const aiModel = google('YOUR_MODEL_NAME');
```

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

### Configure Azure OpenAI and Gemini Models

Source: https://github.com/syncfusion/smart-ai-samples/blob/master/react/README.md

Configures AI services for the project, supporting both Azure OpenAI and Gemini models. Replace placeholder values with your actual credentials and model names. The Azure endpoint format is provided for reference.

```typescript
const azure = createAzure({
    resourceName: 'YOUR_RESOURCE_NAME',
    apiKey: 'YOUR_API_KEY',
});
const aiModel = azure('YOUR_MODEL_NAME');

// for gemini model
const google = createGoogleGenerativeAI({
    baseURL: "https://generativelanguage.googleapis.com/v1beta",
    apiKey: "API_KEY"
});
const aiModel = google('YOUR_MODEL_NAME');

// Azure endpoint example: https://{resource_name}.openai.azure.com/
```

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

### Configure Stability AI API Key for Image Editor

Source: https://github.com/syncfusion/smart-ai-samples/blob/master/react/README.md

Sets up the API key for Stability AI, used for AI image processing in the Image Editor component. Obtain an API key from Stability AI and replace the placeholder in the specified file.

```typescript
const apiKey = `Bearer YOUR_API_KEY`;
```

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

### Register Syncfusion License Key

Source: https://github.com/syncfusion/smart-ai-samples/blob/master/react/README.md

Registers the Syncfusion license key in the main.tsx file. This is a mandatory step before using Syncfusion components in the React application. Replace the placeholder with your actual license key.

```typescript
import { registerLicense } from '@syncfusion/ej2-base';
import { createRoot } from 'react-dom/client';
import { StrictMode } from 'react';
import { RouterProvider } from 'react-router-dom';

// Registering Syncfusion license key
registerLicense('Replace your generated license key here');

// Assuming routerEle is defined elsewhere
// createRoot(document.getElementById('root')!).render(
//   <StrictMode>
//     <RouterProvider router={routerEle} />
//   </StrictMode>
// );
```

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

### Generate Content using Azure AI Chat Request

Source: https://github.com/syncfusion/smart-ai-samples/blob/master/angular/src/app/document-editor/smart-editor/smart-editor.component copy.txt

This function repeatedly calls the Azure AI Chat API to generate content. It attempts to get unique responses up to 3 times, storing them in 'this.outList'. The first generated response is then used to update the 'this.editableDiv'.

```typescript
async onGenerate(options: AzureAIRequestOptions): Promise<void> {
    this.outList = [];
    for (let i = 0; i < 3; i++) {
      const response = await getAzureChatAIRequest(options);
      if (response && this.outList.indexOf(response) === -1) {
        this.outList.push(response);
      } else {
        i--;
      }
    }
    if (this.outList.length > 0) {
      this.editableDiv.nativeElement.innerHTML = this.outList[0];
      this.updateIndex();
    }
  }
```

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

### Use Open Iconic with Foundation

Source: https://github.com/syncfusion/smart-ai-samples/blob/master/blazor/SyncfusionAISamples/wwwroot/open-iconic/README.md

This code demonstrates integrating Open Iconic icons with the Foundation framework. Similar to Bootstrap, it involves linking a Foundation-specific stylesheet and using span elements with 'fi' and 'fi-icon-name' classes.

```html
<link href="/open-iconic/font/css/open-iconic-foundation.css" rel="stylesheet">
<span class="fi-icon-name" title="icon name" aria-hidden="true"></span>
```

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

### Configure Stability AI for Image Editor

Source: https://github.com/syncfusion/smart-ai-samples/blob/master/angular/README.md

This snippet shows how to configure the API key for Stability AI, used for AI image processing in the Image Editor feature. The API key is formatted as a Bearer token and should be placed in the `./src/app/ai-models/stability-model.ts` file. Obtain your API key from the Stability AI platform.

```typescript
const apiKey = `Bearer YOUR_API_KEY`;

```

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

### Handle AI Translation Request - TypeScript

Source: https://github.com/syncfusion/smart-ai-samples/blob/master/angular/src/app/document-editor/smart-editor/smart-editor.component copy.txt

Prepares and initiates an AI translation request. It displays a spinner, captures the text from 'questionDiv', and sets up the 'AzureAIRequestOptions' object with messages for the AI model, including system instructions and the user's text. This function relies on external 'showSpinner' and 'hideSpinner' utilities.

```TypeScript
async onTranslateClick() {
    showSpinner(document.getElementById('dialog') as HTMLElement);
    let text: string = this.questionDiv.nativeElement.innerText;
    const options: AzureAIRequestOptions = {
      messages: [

```

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

### Image Editor Toolbar and Sidebar Integration

Source: https://github.com/syncfusion/smart-ai-samples/blob/master/angular/src/app/image-editor/smart-editor/dd.txt

This Angular snippet shows the integration of a toolbar and a sidebar for the Image Editor. The toolbar is configured with items and an event handler for click events. The sidebar is set to a 'Push' type, targeting the main content area, and contains a tree view for navigation. Event bindings for 'ToolbarClicked', 'onFileOpened', 'onCreated', and 'OnSelect' are included.

```html
<div id="sidebar-wrapper" class="control-section">
    <div>
        <ejs-toolbar [cssClass]="'defaultToolbar'" id="defaultToolbar" [height]="'50px'" [items]="items"
            (clicked)="ToolbarClicked($event)">
            <ng-template #template let-data>
                <div *ngIf="data.cssClass === 'e-folder'" class="e-folder">
                    <div class="e-folder-name">AI Image Editor</div>
                </div>
            </ng-template>
        </ejs-toolbar>
    </div>
    <div class="maincontent">
        <div id="controlWrapper">
            <ejs-imageeditor #imageEditor id="imageEditor" [height]="'400px'" [width]="'100%'"
                (fileOpened)="onFileOpened()" (created)="onCreated()">
            </ejs-imageeditor>
        </div>
    </div>
    <div>
        <ejs-sidebar #sidebar id="imageediorsideBar" width="200px" target=".maincontent" position='Left' , type='Push'>
            <ejs-treeview #treeView id="defaultTree" cssClass="image-editor-tree"
                [fields]="{ dataSource: treeData, id: 'id', text: 'name', selected: 'selected', parentID: 'pid', hasChildren: 'hasChild', expanded: 'expanded' }"
                (nodeSelected)="OnSelect($event)">
            </ejs-treeview>
        </ejs-sidebar>
    </div>
</div>
```

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

### Use Open Iconic SVGs

Source: https://github.com/syncfusion/smart-ai-samples/blob/master/blazor/SyncfusionAISamples/wwwroot/open-iconic/README.md

This snippet demonstrates how to use Open Iconic's SVG files directly. It's a straightforward method, treating SVGs like any other image. Ensure to include an 'alt' attribute for accessibility.

```html
<img src="/open-iconic/svg/icon-name.svg" alt="icon name">
```

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

### Use Open Iconic SVG Sprite

Source: https://github.com/syncfusion/smart-ai-samples/blob/master/blazor/SyncfusionAISamples/wwwroot/open-iconic/README.md

This section shows how to utilize Open Iconic's SVG sprite for efficient icon loading. It suggests adding a general class to the SVG and a unique class to the use tag for easier styling. Basic CSS for sizing and fill properties for coloring are also provided.

```html
<svg class="icon">
  <use xlink:href="open-iconic.svg#account-login" class="icon-account-login"></use>
</svg>
```

```css
.icon {
  width: 16px;
  height: 16px;
}

.icon-account-login {
  fill: #f00;
}
```

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

### Razor Component: Configure User Phrases with Placeholders for SmartTextArea

Source: https://github.com/syncfusion/smart-ai-samples/blob/master/blazor/SyncfusionAISamples/Components/Pages/SmartTextArea/Readme.md

This Razor component demonstrates how to configure user phrases for Syncfusion's SfSmartTextArea. It uses a placeholder `NEED_INFO` within phrases to prevent the AI from reusing specific details inappropriately, allowing the user to fill in the necessary information. This approach helps in generating more relevant and controlled AI suggestions.

```razor
@using Syncfusion.Blazor.SmartComponents
<SfSmartTextArea @bind-Value="@text" UserRole="@userRole" UserPhrases="@userPhrases" />

@code {
    string? text;

    string userRole = "Maintainer of an open-source project replying to GitHub issues";
    string[] userPhrases = [
        "Thank you for contacting us.",
        "To investigate, We will need a reproducible example as a public Git repository.",
        "Could you please post a screenshot of NEED_INFO?",
        "This sounds like a usage question. This issue tracker is intended for bugs and feature proposals. Unfortunately, we don't have the capacity to answer general usage questions and would recommend StackOverflow for a faster response.",
        "We do not accept ZIP files as reproducible examples.",
        "Bug report: File not found error occurred in NEED_INFO"
    ];
}
```

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

### Background Changer UI with Color Picker and Textbox

Source: https://github.com/syncfusion/smart-ai-samples/blob/master/angular/src/app/image-editor/smart-editor/dd.txt

This Angular code illustrates the UI for the Background Changer feature. It includes a color picker for selecting a new background color, preset color options, a textbox for custom background input (e.g., 'Waterfalls, Mountains, etc..'), and an 'Apply' button. Event bindings for 'bgRemoveBtnClick', 'change', 'beforeTileRender', and 'backgrounchanger' are shown.

```html
<div class="bg-changer">
    <div class="upper-div">
        <label>Change Background</label>
        <button ejs-button (click)="bgRemoveBtnClick()" iconCss="e-icons e-close" cssClass="e-small e-round"
            [isPrimary]="true" id="bg-change-remove-btn" aria-label="button"></button>
    </div>
    <div class="lower-div">
        <div class="col-lg-12 control-section">
            <div id="colorpicker-control">
                <span style="margin-bottom: 10px;">New Color</span>
                <br>
                <input ejs-colorpicker id="color-picker" type="color">
            </div>
        </div>
        <br><span>Preset Colors</span>
        <div class="col-xs-12 col-sm-12 col-lg-6 col-md-6">

            <input ejs-colorpicker id="circle-palette" type="color" mode="Palette" [columns]="6" [inline]="true"
                [showButtons]="false" [presetColors]="presetColors" (change)="change($event)"
                (beforeTileRender)="beforeTileRender($event)">
        </div>
        <span>Custom Background</span><br>
        <ejs-textbox #outlined id="outlined" placeholder="Example: Waterfalls, Mountains, etc.."
            cssClass=" e-outline"></ejs-textbox>
    </div>
    <button ejs-button (click)="backgrounchanger()" class="bg-change-button" id="bgChangeBtn"
        cssClass="e-primary">Apply</button>
</div>
```

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

### Register Syncfusion License Key in Vue Project

Source: https://github.com/syncfusion/smart-ai-samples/blob/master/vue/README.md

This code snippet demonstrates how to register your Syncfusion license key within a Vue.js application's main entry point. It imports the necessary function and applies the key before mounting the application. Ensure you replace 'YOUR_LICENSE_KEY' with your actual license key.

```typescript
import { createApp } from 'vue'
import App from './App.vue'
import { registerLicense } from '@syncfusion/ej2-base';

// Register your Syncfusion license key
registerLicense('YOUR_LICENSE_KEY');
createApp(App).mount('#app')
```

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

### CSS: Container and Layout Styling

Source: https://github.com/syncfusion/smart-ai-samples/blob/master/typescript/src/index.html

Sets up a flex container for main layout, defining its height to be the viewport height minus the navigation bar's height. It also styles the sidebar and the main content area.

```css
#container { display: flex; height: calc(100vh - 50px);; }
#sidebar { width: 250px; border-right: 1px solid #ccc; }
#content { flex: 1; padding: 20px; }
```

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

### Kanban Board Card Template HTML

Source: https://github.com/syncfusion/smart-ai-samples/blob/master/typescript/src/app/kanban/smart-recommendation/index.html

HTML structure for the card template used in the Kanban board to display task details like title, description, and story points.

```html
<div class="card-template"> <div class="e-card-header"> <div class="e-card-header-caption"> <div class="e-card-header-title e-tooltip-text">${Title}</div> </div> </div> <div class="e-card-content"> <div class="e-text e-tooltip-text">${Description}</div> </div> <div class="e-card-footer"> <div class="e-card-tag e-tooltip-text">${StoryPoints}</div> </div> </div>
```

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

### Register Syncfusion License Key in Angular

Source: https://github.com/syncfusion/smart-ai-samples/blob/master/angular/README.md

This snippet demonstrates how to register your Syncfusion license key in the main.ts file of an Angular project. This is a mandatory step before using Syncfusion components. It imports necessary functions and shows the correct placement for the license key.

```typescript
import {
  bootstrapApplication
} from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';
import { registerLicense } from '@syncfusion/ej2-base';

registerLicense('Replace your generated license key here');
bootstrapApplication(AppComponent, appConfig)
  .catch((err) => console.error(err));

```

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

### Configure AI Services for Blazor Smart Components

Source: https://github.com/syncfusion/smart-ai-samples/blob/master/blazor/SyncfusionAISamples/Components/Pages/SmartPaste/Readme.md

Configures Syncfusion Smart Components, including the Smart Paste Button, by injecting necessary services and setting AI credentials. It supports both cloud-based API keys and self-hosted Ollama deployments. Ensure you replace placeholders with your actual API credentials.

```csharp
builder.Services.AddSyncfusionSmartComponents()
    .ConfigureCredentials(new AIServiceCredentials("your-apiKey", "your-deploymentName", "your-endpoint"))
    .InjectOpenAIInference();
```

```csharp
builder.Services.AddSyncfusionSmartComponents()
    .ConfigureCredentials(new AIServiceCredentials { SelfHosted=true, Endpoint= new Uri("Your self-hosted end point url") ,DeploymentName = "Your model name" })
    .InjectOpenAIInference();
```

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

### Handle AI Rephrase Request - TypeScript

Source: https://github.com/syncfusion/smart-ai-samples/blob/master/angular/src/app/document-editor/smart-editor/smart-editor.component copy.txt

Initiates an AI rephrasing request using Azure OpenAI. It shows a spinner, retrieves text from 'questionDiv', constructs an options object with system and user messages specifying tone, format, and length, and then calls an 'onGenerate' method. Dependencies include spinner functions and 'AzureAIRequestOptions'.

```TypeScript
async onRewriteClick() {
    showSpinner(document.getElementById('dialog') as HTMLElement);
    let text: string = this.questionDiv.nativeElement.innerText;
    const options: AzureAIRequestOptions = {
      messages: [
        { role: "system", content: `You are a helpful assistant. Your task is to analyze the provided text and rephrase it. Please adjust the text to reflect a tone of '${this.toneValue}', formatted in '${this.formatValue}' style, and maintain a length of '${this.lengthValue}'. Always respond in proper HTML format, excluding <html>, <head>, and <body> tags.` },
        { role: "user", content: text }
      ],
      model: "gpt-4",
    };
    await this.onGenerate(options);
    hideSpinner(document.getElementById('dialog') as HTMLElement);
  }
```

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

### Initialize Document Editor with SFDT Data - TypeScript

Source: https://github.com/syncfusion/smart-ai-samples/blob/master/angular/src/app/document-editor/smart-editor/smart-editor.component copy.txt

Initializes the Syncfusion Document Editor with data in the SFDT format. It opens a document, sets its name, updates the title bar, and adds custom context menu items. Dependencies include the Document Editor and TitleBar components.

```typescript
let sfdt: string = '{"sfdt":"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"}';
          this.container.documentEditor.open(sfdt);
          this.titleBar = new TitleBar(document.getElementById('documenteditor_titlebar')!, this.container.documentEditor, true);
          this.container.documentEditor.documentName = 'Getting Started';
          this.titleBar.updateDocumentTitle();
          this.container.documentEditor.contextMenu.addCustomMenu(this.menuItems, false);
          
```

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

### Initialize Syncfusion SmartPasteButton in React

Source: https://github.com/syncfusion/smart-ai-samples/blob/master/react/src/ai-components/smartpaste/Readme.md

This TypeScript code demonstrates how to import and initialize the SmartPasteButton component in a React application. It includes setting basic properties like content and icon, and a crucial `aiAssistHandler` for AI interactions.

```ts
import { SmartPasteButton } from '@syncfusion/ej2-buttons';

// Initialize SmartPasteButton control.
let button: SmartPasteButton = new SmartPasteButton({
  content: 'Smart Paste',
  iconCss: "e-icons e-paste",
  aiAssistHandler: serverAIRequest
});
// Render initialized SmartPasteButton.
button.appendTo('#smart-paste');

const serverAIRequest = async (options: ChatOptions) => {
  let output: string | null = '';
  try {
    output = await (window as any).AzureAIRequest(options) as string;
    output = output.replace('END_RESPONSE', '')
  } catch (error) {
    console.error("Error:", error);
  }
  return output;
};
```

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

### Use Open Iconic with Bootstrap

Source: https://github.com/syncfusion/smart-ai-samples/blob/master/blazor/SyncfusionAISamples/wwwroot/open-iconic/README.md

This snippet illustrates how to integrate Open Iconic icons when using the Bootstrap framework. It requires linking a specific Bootstrap stylesheet and then using span elements with predefined 'oi' and 'oi-icon-name' classes.

```html
<link href="/open-iconic/font/css/open-iconic-bootstrap.css" rel="stylesheet">
<span class="oi oi-icon-name" title="icon name" aria-hidden="true"></span>
```

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

### Initialize Syncfusion TextBox for Filtering (JavaScript)

Source: https://github.com/syncfusion/smart-ai-samples/blob/master/angular/src/app/pivot-table/smart-pivottable/smart-pivottable.component copy.txt

This snippet demonstrates the initialization of a Syncfusion TextBox component, used for user input in filter criteria. It includes configuration for placeholder text, CSS classes, a default value, and width.

```javascript
      let filterTextBox: TextBox = new TextBox({
        placeholder: 'Enter filter category',
        cssClass: 'product-class',
        value: 'Bikes',
        width: '100%'
      });
      filterTextBox.appendTo('#filterInput');
```

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

### Handle Before Open Event - TypeScript

Source: https://github.com/syncfusion/smart-ai-samples/blob/master/angular/src/app/document-editor/smart-editor/smart-editor.component copy.txt

Sets the toolbar visibility to enable rephrasing before the dialog is opened. This ensures the rephrase functionality is ready when the user interacts with the document editor.

```typescript
onBeforeOpen(): void {
    this.onChangeToolbarVisibility(true, false, false);
  }
```

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

### Add SmartTextArea Component in TypeScript

Source: https://github.com/syncfusion/smart-ai-samples/blob/master/react/src/ai-components/smarttextarea/Readme.md

Demonstrates how to initialize and append the Syncfusion SmartTextArea component in a TypeScript application. It requires the '@syncfusion/ej2-react-inputs' package and initializes the textarea with user-defined phrases and an AI suggestion handler.

```ts
let textareaObj: SmartTextArea = new SmartTextArea({
    placeholder: 'Enter your queries here',
    floatLabelType: 'Auto',
    resizeMode: 'Both',
    rows: 3,
    cols: 35,
    userRole: 'Employee communicating with internal team',
    UserPhrases: [
        "Please find the attached report.",
        "Let's schedule a meeting to discuss this further.",
        "Can you provide an update on this task?",
        "I appreciate your prompt response.",
        "Let's collaborate on this project to ensure timely delivery."
    ],
    aiSuggestionHandler: serverAIRequest
});
textareaObj.appendTo('#default');

const serverAIRequest = async (settings: any) => {
    let output = '';
    try {
        const response = await (window as any).AzureAIRequest(settings) as string;
        output = response;
    } catch (error) {
        console.error("Error:", error);
    }
    return output;
};
```

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

### HTML for SmartTextArea Element

Source: https://github.com/syncfusion/smart-ai-samples/blob/master/react/src/ai-components/smarttextarea/Readme.md

Provides the necessary HTML structure to render the Syncfusion SmartTextArea component. It involves adding a simple textarea element with a unique ID that will be targeted by the JavaScript initialization.

```html
<!--Element to render the Smart TextArea component-->
<textarea id="default"></textarea>
```

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

### CSS: Sidebar and Title Header Styling

Source: https://github.com/syncfusion/smart-ai-samples/blob/master/typescript/src/index.html

Styles the sidebar's top position and the title header's bottom border, shadow, width, and fixed positioning to ensure it stays visible at the top.

```css
#sidebar{ top: 39px; }
#title-header{ border-bottom: 1px solid #dee2e6; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); width: 100%; position: fixed; z-index: 1000001; }
```

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

### Initialize Syncfusion MultiSelect for Field Selection (JavaScript)

Source: https://github.com/syncfusion/smart-ai-samples/blob/master/angular/src/app/pivot-table/smart-pivottable/smart-pivottable.component copy.txt

This snippet initializes a Syncfusion MultiSelect component, allowing users to select multiple fields from a predefined data source. It includes configuration for placeholder text, dimensions, filtering, data binding, and selection mode.

```javascript
      let fieldsMultiSelect: MultiSelect = new MultiSelect({
        placeholder: 'Select Fields',
        width: '150px',
        popupWidth: '180px',
        allowFiltering: true,
        dataSource: ['Country', 'Products', 'Product_Categories', 'Quarter', 'Year', 'Sold', 'Amount', 'In_Stock'], // Sample data
        mode: 'CheckBox',
        value: ['Year', 'Product_Categories', 'Sold']
      });
      fieldsMultiSelect.appendTo('#fieldsInput');
```

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

### Configure Web Service URL in React TypeScript

Source: https://github.com/syncfusion/smart-ai-samples/blob/master/react/src/ai-components/pdfviewer/Readme.md

This snippet shows how to configure the local web service URL within a React TypeScript application. It highlights the need to replace a placeholder with the actual service address. This configuration is crucial for the AI features to communicate with the backend.

```typescript
// Replace the SERVICE_URL with your local host
const SERVICE_URL: string = 'webservice_localhost/api/pdfviewer';

Example:
const SERVICE_URL: string = 'http://localhost:62870/api/pdfviewer';
```

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

### CSS: Hamburger Icon Styling

Source: https://github.com/syncfusion/smart-ai-samples/blob/master/typescript/src/index.html

Styles hamburger menu icons, defining their dimensions, cursor style, and the fill color for their rect elements. Includes styles for two variations (.hamburger and .hamburger1).

```css
.hamburger,.hamburger1 { width: 10px; height: 10px; cursor: pointer; }
.hamburger rect,.hamburger1 rect { fill: #000; width: 100%; height: 4px; rx: 2; /* Rounded corners */ }
.hamburger1 rect{ fill: #cbc2c2; }
```
Tokens:
Raw