Skip to content

Commit d8e4807

Browse files
kmuthukumarmkmkmuthukumarmkm
authored
Merge pull request #4615 from syncfusion-content/988747-SmartComponents
988747: Drafted UG for SmartPaste and SmartTextArea.
2 parents 6c251c0 + 95fa9fc commit d8e4807

22 files changed

+2832
-0
lines changed

‎ej2-asp-core-mvc/smart-paste/EJ2_ASP.NETCORE/annotation.md‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
---
2+
layout: post
3+
title: Annotations in ##Platform_Name## Smart Paste Button Control | Syncfusion
4+
description: Learn how to use annotations with the ##Platform_Name## Smart Paste Button control of Syncfusion Essential JS 2 and more details.
5+
platform: ej2-asp-core-mvc
6+
control: Annotations
7+
publishingplatform: ##Platform_Name##
8+
documentation: ug
9+
---
10+
11+
# Annotations in ASP.NET Core Smart Paste Button Control
12+
13+
The Syncfusion ASP.NET Core Smart Paste Button control leverages AI to intelligently parse clipboard content and populate form fields, enhancing user productivity. By default, the control analyzes form fields (e.g., `<input>`, `<select>`, `<textarea>`) using associated `<label>`, `name`, `id`, or adjacent text to generate descriptions for the AI model (OpenAI or Azure OpenAI). These descriptions guide the AI in mapping clipboard data to the correct fields. For greater control, you can override this behavior by using the `data-smartpaste-description` attribute to provide custom instructions for specific fields, ensuring precise data parsing (e.g., enforcing a date format).
14+
15+
## Annotating Form Fields
16+
17+
Use the `data-smartpaste-description` attribute to provide custom instructions for specific form fields, overriding the default AI-generated descriptions. This is particularly useful for fields requiring specific formats, such as dates or custom data types. The example below demonstrates annotating a Full Name field to enforce all the characters in UpperCase within a `form`, which maps form fields to clipboard data processed by the AI.
18+
19+
{% tabs %}
20+
{% highlight cshtml tabtitle="CSHTML" %}
21+
22+
<h1>Contact Form</h1>
23+
<form action="/submit" method="post">
24+
<div class="mb-2">
25+
<label for="name" class="form-label">Full Name</label>
26+
<input type="text" class="form-control" id="name" name="name" required data-smartpaste-description="All characters must be uppercase.">
27+
</div>
28+
<div class="mb-2">
29+
<label for="email" class="form-label">Email</label>
30+
<input type="email" class="form-control" id="email" name="email" required>
31+
</div>
32+
<div class="mb-2">
33+
<label for="phone" class="form-label">Phone Number</label>
34+
<input type="tel" class="form-control" id="phone" name="phone">
35+
</div>
36+
<div class="mb-2">
37+
<label for="message" class="form-label">Message</label>
38+
<textarea class="form-control" id="message" name="message" rows="4"></textarea>
39+
</div>
40+
<div class="mb-2 form-check">
41+
<input type="checkbox" class="form-check-input" id="newsletter" name="newsletter" checked>
42+
<label class="form-check-label" for="newsletter">Subscribe to newsletter</label>
43+
</div>
44+
<div class="mb-2">
45+
<label class="form-label">Preferred Contact Method</label>
46+
<div class="form-check">
47+
<input type="radio" class="form-check-input" id="email-contact" name="contact" value="email">
48+
<label class="form-check-label" for="email-contact">Email</label>
49+
</div>
50+
<div class="form-check">
51+
<input type="radio" class="form-check-input" id="phone-contact" name="contact" value="phone">
52+
<label class="form-check-label" for="phone-contact">Phone</label>
53+
</div>
54+
</div>
55+
<div class="mb-2">
56+
<label for="country" class="form-label">Country</label>
57+
<select class="form-select" id="country" name="country">
58+
<option value="">Select Country</option>
59+
<option value="United States">United States</option>
60+
<option value="Canada">Canada</option>
61+
<option value="United Kingdom">United Kingdom</option>
62+
</select>
63+
</div>
64+
<button type="submit" class="btn btn-primary">Submit</button>
65+
<button type="reset" class="btn btn-secondary">Reset</button>
66+
<ejs-smartpaste id="smartPasteBtn" content="Smart Paste" cssClass="e-primary" iconCss="e-icons e-paste"></ejs-smartpaste>
67+
</form>
68+
69+
<br />
70+
<div>
71+
I am John Doe from the United States. My email is johndoe@example.com, and my phone number is 555-123-4567. I’d like to inquire about your services and have a detailed discussion regarding your product offerings. Please contact me via email. I’m happy to subscribe to your newsletter for updates. Thank you!
72+
</div>
73+
74+
{% endhighlight %}
75+
{% endtabs %}
76+
77+
![Syncfusion ASP.NET Core Smart Paste Button with Annotation](../images/SmartPaste_Annotation.gif)

‎ej2-asp-core-mvc/smart-paste/EJ2_ASP.NETCORE/claude-service.md‎

Lines changed: 252 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,252 @@
1+
---
2+
layout: post
3+
title: Claude AI in ##Platform_Name## Smart Paste Button Control | Syncfusion
4+
description: Learn how to implement a custom AI service using Claude AI with ##Platform_Name## Smart Paste Button control of Syncfusion Essential JS 2 and more details.
5+
platform: ej2-asp-core-mvc
6+
control: Claude AI
7+
publishingplatform: ##Platform_Name##
8+
documentation: ug
9+
---
10+
11+
# Claude AI Integration with ASP.NET Core Smart Paste Button
12+
13+
The Syncfusion ASP.NET Core SmartPaste Button control enables AI-powered, context-aware content pasting into forms, typically using OpenAI or Azure OpenAI. This guide explains how to integrate the Anthropic Claude AI service with the Smart Paste Button using the `IChatInferenceService` interface, enabling custom AI-driven responses in a ASP.NET Core App.
14+
15+
## Setting Up Claude
16+
17+
1. **Create an Anthropic Account**
18+
Visit [Anthropic Console](https://console.anthropic.com), sign up, and complete the verification process.
19+
2. **Obtain an API Key**
20+
Navigate to [API Keys](https://console.anthropic.com/settings/keys) and click "Create Key."
21+
3. **Review Model Specifications**
22+
Refer to [Claude Models Documentation](https://docs.anthropic.com/claude/docs/models-overview) for details on available models.
23+
24+
## Create a Claude AI Service
25+
26+
Create a service class to manage interactions with the Claude API, including authentication and response processing for the Smart Paste Button.
27+
28+
1. Create a `Services` folder in your project.
29+
2. Add a new file named `ClaudeAIService.cs` in the `Services` folder.
30+
3. Implement the service as shown below, storing the API key securely in a configuration file or environment variable (e.g., `appsettings.json`).
31+
32+
```csharp
33+
using Microsoft.Extensions.AI;
34+
using System.Net;
35+
using System.Text;
36+
using System.Text.Json;
37+
38+
public class ClaudeAIService
39+
{
40+
private readonly string _apiKey;
41+
private readonly string _modelName = "claude-3-5-sonnet-20241022"; // Example model
42+
private readonly string _endpoint = "https://api.anthropic.com/v1/messages";
43+
private static readonly HttpClient HttpClient = new(new SocketsHttpHandler
44+
{
45+
PooledConnectionLifetime = TimeSpan.FromMinutes(30),
46+
EnableMultipleHttp2Connections = true
47+
})
48+
{
49+
DefaultRequestVersion = HttpVersion.Version20 // Fallback to HTTP/2 for compatibility
50+
};
51+
private static readonly JsonSerializerOptions JsonOptions = new()
52+
{
53+
PropertyNamingPolicy = JsonNamingPolicy.CamelCase
54+
};
55+
56+
public ClaudeAIService(IConfiguration configuration)
57+
{
58+
_apiKey = configuration["Claude:ApiKey"] ?? throw new ArgumentNullException("Claude API key is missing.");
59+
if (!HttpClient.DefaultRequestHeaders.Contains("x-api-key"))
60+
{
61+
HttpClient.DefaultRequestHeaders.Clear();
62+
HttpClient.DefaultRequestHeaders.Add("x-api-key", _apiKey);
63+
HttpClient.DefaultRequestHeaders.Add("anthropic-version", "2023-06-01"); // Check latest version in Claude API docs
64+
}
65+
}
66+
67+
public async Task<string> CompleteAsync(IList<ChatMessage> chatMessages)
68+
{
69+
var requestBody = new ClaudeChatRequest
70+
{
71+
Model = _modelName,
72+
Max_tokens = 1000, // Maximum tokens in response
73+
Messages = chatMessages.Select(m => new ClaudeMessage
74+
{
75+
Role = m.Role == ChatRole.User ? "user" : "assistant",
76+
Content = m.Text
77+
}).ToList(),
78+
Stop_sequences = new List<string> { "END_INSERTION", "NEED_INFO", "END_RESPONSE" } // Configurable stop sequences
79+
};
80+
81+
var content = new StringContent(JsonSerializer.Serialize(requestBody, JsonOptions), Encoding.UTF8, "application/json");
82+
83+
try
84+
{
85+
var response = await HttpClient.PostAsync(_endpoint, content);
86+
response.EnsureSuccessStatusCode();
87+
var responseString = await response.Content.ReadAsStringAsync();
88+
var responseObject = JsonSerializer.Deserialize<ClaudeChatResponse>(responseString, JsonOptions);
89+
return responseObject?.Content?.FirstOrDefault()?.Text ?? "No response from Claude model.";
90+
}
91+
catch (Exception ex) when (ex is HttpRequestException || ex is JsonException)
92+
{
93+
throw new InvalidOperationException("Failed to communicate with Claude API.", ex);
94+
}
95+
}
96+
}
97+
```
98+
99+
N> Store the Claude API key in `appsettings.json` (e.g., `{ "Claude": { "ApiKey": "your-api-key" } }`) or as an environment variable to ensure security. Verify the `anthropic-version` header in [Claude API Documentation](https://docs.anthropic.com/claude/docs) for the latest version.
100+
101+
## Define Request and Response Models
102+
103+
Define C# classes to match the Claude API’s JSON request and response format.
104+
105+
1. Create a new file named `ClaudeModels.cs` in the `Services` folder.
106+
2. Add the following model classes:
107+
108+
```csharp
109+
public class ClaudeChatRequest
110+
{
111+
public string Model { get; set; }
112+
public int Max_tokens { get; set; }
113+
public List<ClaudeMessage> Messages { get; set; }
114+
public List<string> Stop_sequences { get; set; }
115+
}
116+
117+
public class ClaudeMessage
118+
{
119+
public string Role { get; set; }
120+
public string Content { get; set; }
121+
}
122+
123+
public class ClaudeChatResponse
124+
{
125+
public List<ClaudeContentBlock> Content { get; set; }
126+
}
127+
128+
public class ClaudeContentBlock
129+
{
130+
public string Text { get; set; }
131+
}
132+
```
133+
134+
## Create a Custom AI Service
135+
136+
Implement the `IChatInferenceService` interface to connect the Smart Paste Button to the Claude service, acting as a bridge for AI-generated responses.
137+
138+
1. Create a new file named `ClaudeInferenceService.cs` in the `Services` folder.
139+
2. Add the following implementation:
140+
141+
```csharp
142+
using Syncfusion.EJ2.AI;
143+
using System.Threading.Tasks;
144+
145+
public class ClaudeInferenceService : IChatInferenceService
146+
{
147+
private readonly ClaudeAIService _claudeService;
148+
149+
public ClaudeInferenceService(ClaudeAIService claudeService)
150+
{
151+
_claudeService = claudeService;
152+
}
153+
154+
public async Task<string> GenerateResponseAsync(ChatParameters options)
155+
{
156+
return await _claudeService.CompleteAsync(options.Messages);
157+
}
158+
}
159+
```
160+
161+
## Configure the ASP.NET Core App
162+
163+
Register the Claude service and `IChatInferenceService` implementation in the dependency injection container.
164+
165+
Update the **~/Program.cs** file as follows:
166+
167+
```csharp
168+
using Syncfusion.EJ2;
169+
using Syncfusion.EJ2.AI;
170+
171+
builder.Services.AddRazorPages();
172+
builder.Services.AddSyncfusionSmartComponents();
173+
builder.Services.AddSingleton<ClaudeAIService>();
174+
builder.Services.AddSingleton<IChatInferenceService, ClaudeInferenceService>();
175+
176+
var app = builder.Build();
177+
// ...
178+
```
179+
180+
## Add the Smart Paste Button
181+
182+
Add the Smart Paste Button to a form in the **~/Pages/Index.cshtml** file to test the Claude AI integration.
183+
184+
{% tabs %}
185+
{% highlight cshtml tabtitle="CSHTML" %}
186+
187+
<h1>Contact Form</h1>
188+
<form action="/submit" method="post">
189+
<div class="mb-2">
190+
<label for="name" class="form-label">Full Name</label>
191+
<input type="text" class="form-control" id="name" name="name" required>
192+
</div>
193+
<div class="mb-2">
194+
<label for="email" class="form-label">Email</label>
195+
<input type="email" class="form-control" id="email" name="email" required>
196+
</div>
197+
<div class="mb-2">
198+
<label for="phone" class="form-label">Phone Number</label>
199+
<input type="tel" class="form-control" id="phone" name="phone">
200+
</div>
201+
<div class="mb-2">
202+
<label for="message" class="form-label">Message</label>
203+
<textarea class="form-control" id="message" name="message" rows="4"></textarea>
204+
</div>
205+
<div class="mb-2 form-check">
206+
<input type="checkbox" class="form-check-input" id="newsletter" name="newsletter" checked>
207+
<label class="form-check-label" for="newsletter">Subscribe to newsletter</label>
208+
</div>
209+
<div class="mb-2">
210+
<label class="form-label">Preferred Contact Method</label>
211+
<div class="form-check">
212+
<input type="radio" class="form-check-input" id="email-contact" name="contact" value="email">
213+
<label class="form-check-label" for="email-contact">Email</label>
214+
</div>
215+
<div class="form-check">
216+
<input type="radio" class="form-check-input" id="phone-contact" name="contact" value="phone">
217+
<label class="form-check-label" for="phone-contact">Phone</label>
218+
</div>
219+
</div>
220+
<div class="mb-2">
221+
<label for="country" class="form-label">Country</label>
222+
<select class="form-select" id="country" name="country">
223+
<option value="">Select Country</option>
224+
<option value="United States">United States</option>
225+
<option value="Canada">Canada</option>
226+
<option value="United Kingdom">United Kingdom</option>
227+
</select>
228+
</div>
229+
<button type="submit" class="btn btn-primary">Submit</button>
230+
<button type="reset" class="btn btn-secondary">Reset</button>
231+
<ejs-smartpaste id="smartPasteBtn" content="Smart Paste" cssClass="e-primary" iconCss="e-icons e-paste"></ejs-smartpaste>
232+
</form>
233+
234+
<br />
235+
<div>
236+
I am John Doe from the United States. My email is johndoe@example.com, and my phone number is 555-123-4567. I’d like to inquire about your services and have a detailed discussion regarding your product offerings. Please contact me via email. I’m happy to subscribe to your newsletter for updates. Thank you!
237+
</div>
238+
239+
{% endhighlight %}
240+
{% endtabs %}
241+
242+
Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to run the app. Then, the Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET Core
243+
Smart Paste Button control will be rendered in the default web browser.
244+
245+
![ASP.NET Core Smart Paste Button Control](../images/SmartPaste.gif)
246+
247+
## Troubleshooting
248+
249+
If the Claude AI integration does not work, try the following:
250+
- **No Suggestions Displayed**: Verify that the Claude API key and model name are correct in the configuration. Check the `ClaudeAIService` implementation for errors.
251+
- **HTTP Request Failures**: Ensure a stable internet connection and that the Claude API endpoint (`https://api.anthropic.com/v1/messages`) is accessible. Test with HTTP/2 if compatibility issues arise.
252+
- **Service Registration Errors**: Confirm that `ClaudeAIService` and `ClaudeInferenceService` are registered in **Program.cs**.

0 commit comments

Comments
 (0)