GitHub repo
The GitHub repo is here: https://github.com/toreaurstadboss/WeatherMCPDemo
Model Context Protocol
You can read more about the Model Context Protocol (MCP) here : https://modelcontextprotocol.io/docs/getting-started/intro In short, MCP allows you to connect AI applications such as a Large Language Model (LLM) to external systems, such as external APIs.WeatherServer.Web.Http - Http-based serverside
First off, the following Nuget libs are added to the serverside.WeatherServer.Web.Http.csproj
<ItemGroup>
<PackageReference Include="ModelContextProtocol.AspNetCore" Version="0.3.0-preview.2" />
<PackageReference Include="Swashbuckle.AspNetCore" Version="9.0.6" />
<PackageReference Include="Swashbuckle.AspNetCore.SwaggerUI" Version="9.0.6" />
<PackageReference Include="ModelContextProtocol" Version="0.3.0-preview.2" />
<PackageReference Include="Anthropic.SDK" Version="5.5.1" />
<PackageReference Include="Microsoft.Extensions.AI" Version="9.9.0" />
<PackageReference Include="Microsoft.Extensions.Hosting" Version="10.0.0-preview.6.25358.103" />
</ItemGroup>
Note that the Anthropic SDK is used to chat with the Claude LLM. This is another LLM, such as Chat GPT. Anthropic is a good choice since MCP libraries are also provided by Anthropic corporation.
The following code shows how we set up the MCP server with HttpTransport and also define which tools to support. We will focus on the Nominatim Tools and Yr Tools in this article. I have also added
another set of tools of US weather forecast and weather alerts, but that will be presented in a later article, showing also how you can use STDIO as means of communications between client/server instead of HTTP.
Lets first look at the startup file, Program.cs.
Program.cs
using Anthropic.SDK;
using Microsoft.Extensions.AI;
using System.Net.Http.Headers;
using WeatherServer.Common;
using WeatherServer.Tools;
namespace WeatherServer.Http
{
public class Program
{
public static void Main(string[] args)
{
var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
// Add MCP support
builder.Services
.AddMcpServer()
.WithHttpTransport()
.WithTools<YrTools>()
.WithTools<UnitedStatesWeatherTools>()
.WithTools<NominatimTools>();
//Add swagger support
builder.Services.AddControllers();
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();
// Configure logging
builder.Logging.ClearProviders();
builder.Logging.AddConsole(options =>
{
options.LogToStandardErrorThreshold = LogLevel.Warning;
});
builder.Logging.SetMinimumLevel(LogLevel.Debug);
// Add named Http clients that fetches more data from external APIs
builder.Services.AddHttpClient(WeatherServerApiClientNames.WeatherGovApiClientName, client =>
{
client.BaseAddress = new Uri("https://api.weather.gov");
client.DefaultRequestHeaders.UserAgent.Add(new ProductInfoHeaderValue("us-weather-democlient2-tool", "1.0"));
});
builder.Services.AddHttpClient(WeatherServerApiClientNames.YrApiClientName, client =>
{
client.BaseAddress = new Uri("https://api.met.no");
client.DefaultRequestHeaders.UserAgent.Clear();
client.DefaultRequestHeaders.UserAgent.Add(new ProductInfoHeaderValue("yrweather-mcpdemoclient2-tore-tool", "1.0"));
//client.DefaultRequestHeaders.UserAgent.ParseAdd("ToresMcpDemo/1.0 (+https://github.com/toreaurstadboss)");
});
builder.Services.AddHttpClient(WeatherServerApiClientNames.OpenStreetmapApiClientName, client =>
{
client.BaseAddress = new Uri("https://nominatim.openstreetmap.org");
client.DefaultRequestHeaders.UserAgent.Clear();
client.DefaultRequestHeaders.UserAgent.Add(new ProductInfoHeaderValue("nominatim-openstreetmap-client2-api-tool", "1.0"));
});
// Set up Anthropic client
builder.Services.AddChatClient(_ =>
new ChatClientBuilder(new AnthropicClient(new APIAuthentication(builder.Configuration["ANTHROPIC_API_KEY"])).Messages)
.UseFunctionInvocation()
.Build());
var app = builder.Build();
// Configure the HTTP request pipeline.
app.UseHttpsRedirection();
app.UseAuthorization();
app.MapControllers();
app.UseSwagger();
app.UseSwaggerUI();
app.MapMcp("/sse"); // This exposes the SSE endpoint at /sse
app.Run();
}
}
}
As noted, the ANTHROPIC_API_KEY is set up in a User Secet. You must create an account on Anthropic website and set up an API key. You can check the API key setup from here:
https://console.anthropic.com/dashboard
Also, per API a named HTTP client is setup and note the setting of the User-Agent HTTP request headers. Most APIs demand you set this to a unique request header value and will for example do not return any useful data if this user agent header is not set to a somewhat proper value, do not reuse other systems user agent header values for example. A closer look at the MCP tools for the Nominatim tool is shown next. The Nominatim API is an OpenStreetMap API that provides latitude and longitude. We will use this API to look up provided location names such as a city to look up a given latitude and longitude pair values. Yr Weather forecast service demands latititude and longitude. For now, the code assumes just latitude and longitude, specifying altitude is skipped. It is expected that Yr provides the weather at ground-level, so specifying altitude is not done.
NominatimTools.cs
namespace WeatherServer.Tools;
using System.ComponentModel;
using ModelContextProtocol.Server;
using WeatherServer.Common;
[McpServerToolType]
public sealed class NominatimTools
{
public string ToolId => "OpenStreetMap Nominatim tool";
[McpServerTool(Name = "NominatimLookupLatLongForPlace"), Description("Get latitude and longitude for a place using Nominatim service of OpenStreetMap.")]
public static async Task<string> GetLatitudeAndLongitude(
IHttpClientFactory clientFactory,
[Description("The place to get latitude and longitude for. Will use Nominatim service of OpenStreetMap")] string place)
{
var client = clientFactory.CreateClient(WeatherServerApiClientNames.OpenStreetmapApiClientName);
using var jsonDocument = await client.ReadJsonDocumentAsync($"/search?q={Uri.EscapeDataString(place)}&format=geojson&limit=1");
var features = jsonDocument.RootElement.GetProperty("features").EnumerateArray();
if (!features.Any())
{
return $"No location data found for '{place}'. Try another place to query?";
}
var feature = features.First();
var geometry = feature.GetProperty("geometry");
var geometryType = geometry.GetProperty("type").GetString();
if (string.Equals(geometryType, "point", StringComparison.OrdinalIgnoreCase))
{
var pointCoordinates = geometry.GetProperty("coordinates").EnumerateArray();
if (pointCoordinates.Any())
{
return $"Latitude: {pointCoordinates.ElementAt(0)}, Longitude: {pointCoordinates.ElementAt(1)}";
}
}
return $"No location data found for '{place}'. Try another place to query?";
}
}
Pay notice to the use of the [McpServerTool] attribute and also the description attribute value. You can in written english provide instructions and even user stories here that MCP library will utilize.
This is shown in the next tool, which will use the NominatimTool tool to look up the latitude. You can make a tool call another tool with MCP, which is practical in some cases.
YtTools.cs
namespace WeatherServer.Tools;
using Microsoft.Extensions.Logging;
using ModelContextProtocol.Server;
using System;
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;
using System.Diagnostics;
using System.Globalization;
using System.Text;
using System.Text.Json;
using WeatherServer.Common;
using WeatherServer.Models;
[McpServerToolType]
public sealed class YrTools
{
public string ToolId => "Yr tool";
[McpServerTool(Name = "YrWeatherCurrentWeather")]
[Description(
$@"""
Description of this tool method:
Retrieves the current weather conditions for a specified location using the YrTools CurrentWeather API.
Usage Instructions:
1. Use the 'NominatimLookupLatLongForPlace' tool to resolve the latitude and longitude of the provided location.
2. Pass the resolved coordinates from the tool above and pass them into to this method.
3. If coordinates cannot be resolved, use latitude = 0 and longitude = 0. In this case, the method will return a message indicating no results were found.
4. In case the place passed in is for a place in United States, use instead the tool 'UsWeatherForecastLocation'.
5. This method is to be used when asked about the current weather right now.
6. Use the system clock to check the date of today.
Response Requirements:
- It is very important that the corret url is used, longitude and latitude here will be provided . $""weatherapi/locationforecast/2.0/compact?lat={{latitude}}&lon={{longitude}}""
- Always include the latitude and longitude used.
- Always inform about which url was used to get the data here.
- Inform about the time when the weather is.
- Always include the 'time' field from the result to indicate when the weather data is valid.
- Clearly state that the data was retrieved using 'YrWeatherCurrentWeather'.
- Do not modify or reformat the result; return it exactly as received.
- Do not show the data in Json format, instead sum it up using a dashed list.
- Inform the time the weather is for
- Append the raw json data also
- If the weather time has passed current time by say two days, inform that you could not retrieve weather conditions for now. Look at the 'time' value you got and compare it with today. This is probably due to API usage conditions are limits the service.
""")]
public static async Task<string> GetCurrentWeatherForecast(
IHttpClientFactory clientFactory,
ILogger<YrTools> logger,
[Description("Provide current weather. State the location, latitude and longitude used. Return precisely the data given. Return ALL the data you were given.")] string location, decimal latitude, decimal longitude)
{
if (latitude == 0 && longitude == 0)
{
return $"No current weather data found for '{location}'. Try another location to query?";
}
var client = clientFactory.CreateClient(WeatherServerApiClientNames.YrApiClientName);
string url = $"weatherapi/locationforecast/2.0/compact?lat={latitude.ToString(CultureInfo.InvariantCulture)}&lon={longitude.ToString(CultureInfo.InvariantCulture)}";
logger.LogWarning($"Accessing Yr Current Weather with url: {url} with client base address {client.BaseAddress}");
using var jsonDocument = await client.ReadJsonDocumentAsync(url);
var timeseries = jsonDocument.RootElement.GetProperty("properties").GetProperty("timeseries").EnumerateArray();
if (!timeseries.Any())
{
return $"No current weather data found for '{location}'. Try another place to query?";
}
var currentWeatherInfos = GetInformationForTimeSeries(timeseries, onlyFirst: true);
var sb = new StringBuilder();
foreach (var info in currentWeatherInfos)
{
sb.AppendLine(info.ToString());
}
return sb.ToString();
}
[McpServerTool(Name = "YrWeatherTenDayForecast")]
[Description(
$@"""
Description of this tool method:
Retrieves the ten days forecast weather for a specified location using the YrTools Forecast API.
Usage Instructions:
1. Use the 'NominatimLookupLatLongForPlace' tool to resolve the latitude and longitude of the provided location.
2. Pass the resolved coordinates from the tool above and pass them into to this method.
3. If coordinates cannot be resolved, use latitude = 0 and longitude = 0. In this case, the method will return a message indicating no results were found.
4. In case the place passed in is for a place in United States, use instead the tool 'UsWeatherForecastLocation'.
5. Usually, only ten days forecast will be available, but output all data you get here. In case you are asked to provide even further into the future weather information and
there are no available data for that, inform about that in the output.
6. In case asked for a forecast weather, use this method. In case asked about current weather, use instead tool 'YrWeatherCurrentWeather'
7. Check the current day with the system clock. Forecast should be the following days from the current day.
Response Requirements:
- It is very important that the corret url is used, longitude and latitude here will be provided . $""weatherapi/locationforecast/2.0/compact?lat={{latitude}}&lon={{longitude}}""
- Always include the latitude and longitude used.
- Always include the 'time' field from the result to indicate when the weather data is valid.
- Clearly state that the data was retrieved using 'YrWeatherTenDayForecast'.
- Any information about the weather must precisely give the scalar values provided. However, you are allowed to do a qualitative summary of the weather in 4-5 sentences first. Also,
the time series is a bit long for a possible 10 day forecast hour by hour. Therefore sum up the trends such as maximum and minimum temperature and precipitation and wind patterns in the summary.
Plus also give some precise examples of the weather.
- Inform about the start and end time of the forecast. In case asked for forecast further into the future and there is no data available, inform that only data is available
until the given end time.
- If the weather time has passed current time by say two days, inform that you could not retrieve weather conditions for now. Look at the 'time' value you got and compare it with today. This is probably due to API usage conditions are limits the service.
""")]
public static async Task<string> GetTenDaysWeatherForecast(
IHttpClientFactory clientFactory,
ILogger<YrTools> logger,
[Description("Provide ten day forecast weather. State the location, latitude and longitude used. Return the data given. Return ALL the data you were given.")] string location, decimal latitude, decimal longitude)
{
if (latitude == 0 && longitude == 0)
{
return $"No current weather data found for '{location}'. Try another location to query?";
}
var client = clientFactory.CreateClient(WeatherServerApiClientNames.YrApiClientName);
var url = $"/weatherapi/locationforecast/2.0/compact?lat={latitude.ToString(CultureInfo.InvariantCulture)}&lon={longitude.ToString(CultureInfo.InvariantCulture)}";
logger.LogWarning($"Accessing Yr Current Weather with url: {url} with client base address {client.BaseAddress}");
using var jsonDocument = await client.ReadJsonDocumentAsync(url);
var timeseries = jsonDocument.RootElement.GetProperty("properties").GetProperty("timeseries").EnumerateArray();
if (!timeseries.Any())
{
return $"No current weather data found for '{location}'. Try another place to query?";
}
var currentWeatherInfos = GetInformationForTimeSeries(timeseries, onlyFirst: false);
var sb = new StringBuilder();
foreach (var info in currentWeatherInfos)
{
sb.AppendLine(info.ToString());
}
return sb.ToString();
}
private static List<YrWeatherInfoItem> GetInformationForTimeSeries(JsonElement.ArrayEnumerator timeseries, bool onlyFirst)
{
var result = new List<YrWeatherInfoItem>();
foreach (var timeseriesItem in timeseries)
{
var currentWeather = timeseriesItem;
var currentWeatherData = currentWeather.GetProperty("data");
var instant = currentWeatherData.GetProperty("instant");
string? nextOneHourWeatherSymbol = null;
double? nextOneHourPrecipitationAmount = null;
if (currentWeatherData.TryGetProperty("next_1_hours", out JsonElement nextOneHours))
{
nextOneHourWeatherSymbol = nextOneHours.GetProperty("summary").GetProperty("symbol_code").GetString();
nextOneHourPrecipitationAmount = nextOneHours.GetProperty("details").GetProperty("precipitation_amount").GetDouble();
}
string? nextSixHourWeatherSymbol = null;
double? nextSixHourPrecipitationAmount = null;
if (currentWeatherData.TryGetProperty("next_6_hours", out JsonElement nextSixHours))
{
nextSixHourWeatherSymbol = nextSixHours.GetProperty("summary").GetProperty("symbol_code").GetString();
nextSixHourPrecipitationAmount = nextSixHours.GetProperty("details").GetProperty("precipitation_amount").GetDouble();
}
string? nextTwelveHourWeatherSymbol = null;
if (currentWeatherData.TryGetProperty("next_12_hours", out JsonElement nextTwelveHours))
{
nextTwelveHourWeatherSymbol = nextTwelveHours.GetProperty("summary").GetProperty("symbol_code").GetString();
}
string timeRaw = currentWeather.GetProperty("time").GetString()!;
string format = "yyyy-MM-ddTHH:mm:ssZ";
DateTime parsedDate = DateTime.Parse(timeRaw, CultureInfo.InvariantCulture, DateTimeStyles.AdjustToUniversal);
var instantDetails = instant.GetProperty("details");
var airPressureAtSeaLevel = instantDetails.GetProperty("air_pressure_at_sea_level");
var airTemperature = instantDetails.GetProperty("air_temperature");
var cloudAreaFraction = instantDetails.GetProperty("cloud_area_fraction");
var relativeHumidity = instantDetails.GetProperty("relative_humidity");
var windFromDirection = instantDetails.GetProperty("wind_from_direction");
var windSpeed = instantDetails.GetProperty("wind_speed");
var weatherItem = new YrWeatherInfoItem
{
AirPressureAtSeaLevel = airPressureAtSeaLevel.GetDouble(),
AirTemperature = airTemperature.GetDouble(),
CloudAreaFraction = cloudAreaFraction.GetDouble(),
RelativeHumidity = relativeHumidity.GetDouble(),
WindFromDirection = windFromDirection.GetDouble(),
WindSpeed = windSpeed.GetDouble(),
Time = parsedDate,
NextHourPrecipitationAmount = nextOneHourPrecipitationAmount,
NextHourWeatherSymbol = nextOneHourWeatherSymbol,
NextSixHoursPrecipitationAmount = nextSixHourPrecipitationAmount,
NextSixHoursWeatherSymbol = nextOneHourWeatherSymbol,
NextTwelveHoursWeatherSymbol = nextTwelveHourWeatherSymbol
};
result.Add(weatherItem);
if (onlyFirst)
{
break;
}
}
return result;
}
}
I ended up with specifically creating a string representation of the model object, as just returning json data internally did not work optimally.
WeatherInfoItem.cs
using System.Text.Json.Serialization;
namespace WeatherServer.Models
{
public class YrWeatherInfoItem
{
[JsonPropertyName("time")]
public DateTime? Time { get; set; }
[JsonPropertyName("data.instant.details.air_pressure_at_sea_level")]
public double? AirPressureAtSeaLevel { get; set; }
[JsonPropertyName("data.instant.details.air_temperature")]
public double? AirTemperature { get; set; }
[JsonPropertyName("data.instant.details.cloud_area_fraction")]
public double? CloudAreaFraction { get; set; }
[JsonPropertyName("data.instant.details.relative_humidity")]
public double? RelativeHumidity { get; set; }
[JsonPropertyName("data.instant.details.wind_from_direction")]
public double? WindFromDirection { get; set; }
[JsonPropertyName("data.instant.details.wind_speed")]
public double? WindSpeed { get; set; }
[JsonPropertyName("data.next_1_hours.summary.symbol_code")]
public string? NextHourWeatherSymbol { get; set; }
[JsonPropertyName("data.next_1_hours.summary.precipitation_amount")]
public double? NextHourPrecipitationAmount { get; set; }
[JsonPropertyName("data.next_6_hours.summary.symbol_code")]
public string? NextSixHoursWeatherSymbol { get; set; }
[JsonPropertyName("data.next6_hours.summary.precipitation_amount")]
public double? NextSixHoursPrecipitationAmount { get; set; }
[JsonPropertyName("data.next_12_hours.summary.symbol_code")]
public string? NextTwelveHoursWeatherSymbol { get; set; }
//[JsonPropertyName("data.next12_hours.summary.precipitation_amount")]
//public double? NextTwelveHoursPrecipitationAmount { get; set; }
public override string ToString()
{
return
$@"""
Time = {Time},
AirpressureAtSeaLevel = {AirPressureAtSeaLevel},
AirTemperature = {AirTemperature},
CloudAreaFraction = {CloudAreaFraction},
RelativeHumidity = {RelativeHumidity},
WindFromDirection = {WindFromDirection},
WindSpeed = {WindSpeed}
NextHourWeatherSymbol = {NextHourWeatherSymbol}
NextHourPrecipitationAmount = {NextHourPrecipitationAmount}
NextSixHoursWeatherSymbol = {NextSixHoursWeatherSymbol}
NextSixHoursPrecipitationAmount = {NextSixHoursPrecipitationAmount}
NextTwelveHoursWeatherSymbol = {NextTwelveHoursWeatherSymbol}
""";
} //tostring override
}
}
Note that the code in the Github repo has no explicit calls between the YrWeatherTools and NominatimTool, this is actually set up in the verbose description shown at the top of the methods here.
Next up, the controller that will be the endpoint that clients will connect to. The connection will be done over HTTP and SSE - Server Side Events - are used to stream the resulting response.
Encoding is set to UTF-8 and the Claude model is shown in the code. The MaxOutputtokens set to 1000 can of course be adjusted, it seemed sufficient when I tested it. Note the use of the ListToolsAsync call to fetch all the tools (and the spread operator passing in the tools).
ChatController.cs
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.AI;
using ModelContextProtocol.Client;
using System.ComponentModel.DataAnnotations;
using System.Text;
namespace WeatherServer.Http.Controllers
{
[ApiController]
[Route("[controller]")]
public class ChatController : ControllerBase
{
public class ChatRequest
{
[Required]
public string Message { get; set; } = string.Empty;
}
private readonly ILogger<ChatController> _logger;
private readonly IChatClient _chatClient; public ChatController(ILogger<ChatController> logger, IChatClient chatClient)
{
_logger = logger;
_chatClient = chatClient;
}
[HttpPost(Name = "Chat")]
[Produces("text/plain")]
public async Task Chat([FromBody] ChatRequest chatRequest)
{
//TODO : Add support for 'chat history' to gradually build context here - repetively provide more info and context to the Claude LLM.
Response.ContentType = "text/plain";
Response.Headers.Append("Cache-Control", "no-cache");
if (string.IsNullOrWhiteSpace(chatRequest.Message))
{
var error = Encoding.UTF8.GetBytes("Please provide your message.");
await Response.Body.WriteAsync(error);
await Response.Body.FlushAsync();
return;
}
// Create MCP client connecting to our MCP server
var mcpClient = await McpClientFactory.CreateAsync(
new SseClientTransport(
new SseClientTransportOptions
{
Endpoint = new Uri("https://localhost:7145/sse")
}
)
);
// Get available tools from the MCP server
var tools = await mcpClient.ListToolsAsync();
// Set up the chat messages
var messages = new List<ChatMessage>
{
new ChatMessage(ChatRole.System, "You are a helpful assistant.")
};
messages.Add(new(ChatRole.User, chatRequest.Message));
// Get streaming response and collect updates
List<ChatResponseUpdate> updates = [];
await foreach (var update in _chatClient.GetStreamingResponseAsync(
messages,
new ChatOptions
{
ModelId = "claude-3-haiku-20240307",
MaxOutputTokens = 1000,
Tools = [.. tools]
}
))
{
var text = update.ToString();
var bytes = Encoding.UTF8.GetBytes(text);
await Response.Body.WriteAsync(bytes);
await Response.Body.FlushAsync();
}
}
}
}
WeatherServer.Web.Mvc.Client - Http-based clientside
Let us next see how to consume the http-based serverside from a http client. Anthropic is also used for the client and the same model is set up to be used. User secrets are once more set up to hide away the API key being used against Anthropic AI service.Program.cs
using Anthropic.SDK;
using Microsoft.Extensions.AI;
using ModelContextProtocol.Client;
namespace WeatherClient.Mvc
{
public class Program
{
public static void Main(string[] args)
{
var builder = WebApplication.CreateBuilder(args);
// Add logging configuration
builder.Logging.AddConsole(options =>
{
options.LogToStandardErrorThreshold = LogLevel.Trace;
});
//builder.Logging.SetMinimumLevel(LogLevel.Trace);
var logger = builder.Services.BuildServiceProvider().GetRequiredService<ILogger<Program>>(); // Get logger
builder.Configuration
.AddEnvironmentVariables()
.AddUserSecrets<Program>();
// Set up Swagger
builder.Services.AddSwaggerGen();
builder.Services.AddEndpointsApiExplorer();
// Set up Anthropic client
builder.Services.AddChatClient(_ =>
new ChatClientBuilder(new AnthropicClient(new APIAuthentication(builder.Configuration["ANTHROPIC_API_KEY"])).Messages)
.UseFunctionInvocation()
.Build());
// Add services to the container.
builder.Services.AddControllersWithViews();
var app = builder.Build();
// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
app.UseExceptionHandler("/Home/Error");
// The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
app.UseAuthorization();
app.MapControllerRoute(
name: "default",
pattern: "{controller=Chat}/{action=Index}/{id?}");
// add swagger ui
app.UseSwagger();
app.UseSwaggerUI();
app.Run();
}
}
}
The chat controller of the client will also be a similar chat controller as the ChatController serverside. The difference between the client and the server is that it is the server that holds the MCP server-side tools.
Please note that the chat client on the client side does for now not support HISTORY, i.e. it is not saving context from previous queries. Adding a history would require to save the messages list in a static list for example, preferably for a web client scenario you would provide some unique key for the client session id to separate the possibly multiple users using several clients. For now, the demo is kept simple and avoids taking this in consideration.
Chatcontroller.cs
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.AI;
using ModelContextProtocol.Client;
using System.ComponentModel.DataAnnotations;
using System.Text;
namespace WeatherClient.Mvc.Controllers
{
[ApiController]
[Route("[controller]")]
public class ChatController : Controller
{
public class ChatRequest
{
[Required]
public string Message { get; set; } = string.Empty;
}
private readonly ILogger<ChatController> _logger;
private readonly IChatClient _chatClient; public ChatController(ILogger<ChatController> logger, IChatClient chatClient)
{
_logger = logger;
_chatClient = chatClient;
}
[HttpGet]
public IActionResult Index()
{
return View("Index");
}
[HttpPost(Name = "Chat")]
[Produces("text/plain")]
public async Task Chat([FromBody] ChatRequest chatRequest)
{
//TODO : Add support for 'chat history' to gradually build context here - repetively provide more info and context to the Claude LLM.
Response.ContentType = "text/plain";
Response.Headers.Append("Cache-Control", "no-cache");
if (string.IsNullOrWhiteSpace(chatRequest.Message))
{
var error = Encoding.UTF8.GetBytes("Please provide your message.");
await Response.Body.WriteAsync(error);
await Response.Body.FlushAsync();
return;
}
// Create MCP client connecting to our MCP server
var mcpClient = await McpClientFactory.CreateAsync(
new SseClientTransport(
new SseClientTransportOptions
{
Endpoint = new Uri("https://localhost:7145/sse")
}
)
);
// Get available tools from the MCP server
var tools = await mcpClient.ListToolsAsync();
// Set up the chat messages
var messages = new List<ChatMessage>
{
new ChatMessage(ChatRole.System, "You are a helpful assistant.")
};
messages.Add(new(ChatRole.User, chatRequest.Message));
// Get streaming response and collect updates
List<ChatResponseUpdate> updates = [];
await foreach (var update in _chatClient.GetStreamingResponseAsync(
messages,
new ChatOptions{
ModelId = "claude-3-haiku-20240307",
MaxOutputTokens = 1000,
Tools = [.. tools]
}
))
{
var text = update.ToString();
var bytes = Encoding.UTF8.GetBytes(text);
await Response.Body.WriteAsync(bytes);
await Response.Body.FlushAsync();
}
}
}
}
A short notice abot the file .mcp/client.json, it is presented below. It is used by VsCode and other systems to identiy meta information about the MCP client available in the project.
client.json
{
"id": "weather-client",
"displayName": "Weather MCP Client",
"entryPoint": "dotnet run --project WeatherClient",
"protocol": "stdio"
}
Let's look at the UI for the chat interface next :
@{
ViewData["Title"] = "Chat with Claude";
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>@ViewData["Title"]</title>
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<style>
body {
font-family: 'Roboto', sans-serif;
padding-top: 2rem;
}
.chat-box {
resize: none;
height: 150px;
}
.response-box {
height: 400px;
resize: vertical;
background-color: #ffffff;
color: #0d3b66; /* Dark blue */
font-family: 'Roboto', sans-serif;
font-size: 1.2rem;
font-weight:600;
padding: 1rem;
border: 1px solid #ccc;
border-radius: 0.5rem;
overflow-y: auto;
}
#response[readonly] {
background-color: white; /* or any color you prefer */
color: black; /* ensure text is visible */
border: 1px solid #ccc; /* optional: keep border styling */
}
</style>
</head>
<body>
<div class="container">
<h1 class="mb-4">WeatherServices - Chat with Claude</h1>
<h4 class="mb-5">Supported services: US Weather Service, Yr Weather Service, Nominatim OpenStreetMaps API LatLong</h4>
<form id="chatForm">
<div class="mb-3">
<label for="message" class="form-label">Your Question e.g. what is the weather this day at my location (insert your location here)</label>
<textarea class="form-control chat-box" id="message" placeholder="Type your question here..."></textarea>
</div>
<button type="submit" class="btn btn-primary">Send</button>
<div class="mt-3" id="progressContainer" style="display: none;">
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 100%"></div>
</div>
</div>
</form>
<div class="mt-4">
<label for="response" class="form-label">Response</label>
<textarea class="form-control response-box" id="response" readonly></textarea>
<div class="mt-2 text-muted" id="duration"></div>
</div>
</div>
<script>
document.getElementById("chatForm").addEventListener("submit", async function (e) {
e.preventDefault();
const message = document.getElementById("message").value;
const responseBox = document.getElementById("response");
const durationBox = document.getElementById("duration");
const progressContainer = document.getElementById("progressContainer");
responseBox.value = "";
durationBox.textContent = "";
progressContainer.style.display = "block"; // Show progress bar
const startTime = performance.now();
const res = await fetch("/Chat", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({ message })
});
const reader = res.body.getReader();
const decoder = new TextDecoder("utf-8");
let buffer = "";
while (true) {
const { done, value } = await reader.read();
if (done) break;
const chunk = decoder.decode(value, { stream: true });
buffer += chunk;
for (let char of chunk) {
// Remove the square if present
responseBox.value = responseBox.value.replace(/■$/, '');
// Add next character and square
responseBox.value += char + '■';
responseBox.scrollTop = responseBox.scrollHeight;
await new Promise(resolve => setTimeout(resolve, 5)); // Typing speed
}
}
// Remove the square after typing is done
responseBox.value = responseBox.value.replace(/■$/, '');
const endTime = performance.now();
durationBox.textContent = `Response time: ${(endTime - startTime).toFixed(2)} ms`;
progressContainer.style.display = "none"; // Hide progress bar
});
</script>
</body>
</html>
The user interface looks like this :
