Connecting Ollama with .NET & React
Build Full-Stack Local AI Apps:Secure, Private, and Scalable Full-Stack AI Architecture

Learn how to build modern local AI applications using Ollama with a .NET backend and React frontend. Stream real-time model responses, maintain data privacy, and eliminate cloud dependencies.

Oct 13th, 2025

Moltech Solutions Inc.

End-to-End Integration

Seamlessly connect Ollama’s local inference with .NET APIs and React UIs.

On-Prem Data Security

Keep all sensitive data on local infrastructure without cloud exposure.

Real-Time AI Streaming

Deliver live token-by-token responses with low-latency interaction.

Reading Progress0%

Quick Actions

Popular Tags

#Ollama#.NET#React#Local AI#Full-stack AI#On-prem AI#AI streaming#Hybrid AI integration#Moltech AI services

Connecting Ollama with .NET & React Cover Image

Connecting Ollama with .NET & React: Build Full-Stack Local AI Apps

Modern users expect apps to do more than just display data — they expect them to think a little. Summarize notes, answer questions, adapt as you type.

A few months ago, we started exploring how to make that possible without relying on cloud APIs. Turns out, you can — with Ollama, .NET, and React working together.

This guide walks through how to build a local AI app step-by-step. We'll use Ollama to host models, .NET for the backend API, and React for a live, streaming frontend. You'll see how to get it running locally — no OpenAI key, no data leaving your laptop. (In our internal tests, a mid-range GPU handled this setup surprisingly well once caching warmed up.)

What Is an AI App, Really?

What Is an AI App, Really? At its core, an AI app is just a regular application that can think a little. Instead of following only hard-coded rules, it uses predictive or generative models to make smart decisions or create new content on the fly.

You've already seen them in action — chat assistants that summarize meetings, tools that recommend what to watch next, systems that flag fraud, or apps that write short summaries for you. What makes them “AI-powered” is that they learn from data and use patterns to infer answers instead of relying entirely on fixed logic.

Most AI apps, no matter how advanced, follow a pretty similar pattern:

Capture intent — the user asks or inputs something (text, voice, image, or file).
Invoke a model — local or cloud-based, usually through an API call.
Stream results — responses appear gradually for a faster, more natural feel.
Add context — connect the model with relevant business data or documents.
Make it reliable — add error handling, logging, and security so it scales safely.

In simple terms: an AI app listens, thinks, and responds — just like a human assistant, but built from data and code.

Why Choose Ollama + .NET + React ?

Ollama

Local inference & offline capability: Keep data in your environment.
Predictable cost: Avoid per-token cloud fees for internal tools or prototypes.
Control & portability: Run the same models on a laptop, GPU server, or Docker container.

.NET Backend

High throughput: Handles streaming responses efficiently.
Enterprise-ready: Built-in authentication, dependency injection, observability, and testing.
Cross-platform: Linux, Windows, or containers.

React Frontend

Fast UI updates: Perfect for token-by-token streaming and chat interfaces.
Component model: Encapsulate chat, prompts, and settings cleanly.
Ecosystem: Hooks, state management, and UI kits ready to use.

Architecture Overview

We'll build a minimal full-stack AI app:

Components:

React frontend:Chat input and real-time token display.
.NET backend:Authentication, request validation, streaming proxy, and business logic.
Ollama server:Local LLM hosting (e.g., Llama 3.1).

Data flow:

React sends chat requests to the .NET API.
.NET forwards messages to Ollama's /api/chat endpoint with streaming enabled.
Ollama streams tokens; .NET relays them to the browser.
Frontend renders tokens as they arrive.

Tip:

Treat Ollama as a replaceable inference provider behind a clean API boundary. You can swap models or hosting without touching the frontend or business logic.

Example App — Local Meeting Notes Summarizer

Let's build something practical to see everything in action — a local meeting assistant. You'll paste your meeting transcript, and the app will let you ask questions like:

“Summarize key decisions.”
“List all action items.”
“Draft a short follow-up email.”

This simple use case shows how streaming, prompt control, and local inference come together. Everything happens locally — no external API calls, no data leaving your computer.

Step 1 — Install and Run Ollama

Before we code anything, we need Ollama running — this is the local LLM engine that hosts models like Llama 3.

For Mac or Linux

1
2
3

brew install ollama
ollama serve
ollama pull llama3.1:8b-instruct

The first command installs Ollama. The second starts the Ollama service (by default on port 11434). The last one downloads the model (llama3.1:8b-instruct) which we'll use in this example.

Tip: The first time you run ollama pull, it may take a few minutes depending on your internet speed and hardware.

For Docker (optional)

If you prefer to run Ollama in a container, use:

1
2

docker run -d -p 11434:11434 -v ollama:/root/.ollama \
--name ollama ollama/ollama:latest

This runs Ollama in the background (-d), maps the correct port, and saves model data in a volume so you don't have to re-download it.

Test the setup

You can confirm Ollama is running by checking:

curl http://localhost:11434/api/tags

If you see a JSON response, you're good to go.

Step 2 — Create the .NET AI Backend

Now we'll create a small .NET 8 API that talks to Ollama. This API will accept a message from the frontend, send it to Ollama, and then stream the model's response back to the browser in real time.

Initialize a minimal API

1
2

dotnet new web -n OllamaApi
cd OllamaApi

Replace your Program.cs with the following code:

using System.Net.Http.Json;
using System.Text.Json;
using System.Text.Json.Nodes;

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddCors(o => o.AddDefaultPolicy(p =>
    p.WithOrigins("http://localhost:5173")
        .AllowAnyHeader()
        .AllowAnyMethod()
        .AllowCredentials()
));

builder.Services.AddHttpClient("ollama", c =>
{
    c.BaseAddress = new Uri("http://localhost:11434");
    c.Timeout = Timeout.InfiniteTimeSpan; // for streaming
});

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

app.MapPost("/api/chat", async (HttpContext ctx, ChatRequest req, IHttpClientFactory httpFactory) =>
{
    var client = httpFactory.CreateClient("ollama");

    var body = new
    {
        model = string.IsNullOrWhiteSpace(req.Model) ? "llama3.1:8b-instruct" : req.Model,
        messages = req.Messages,
        stream = true,
        options = new { temperature = 0.2, num_ctx = 4096, keep_alive = "5m" }
    };

    var httpReq = new HttpRequestMessage(HttpMethod.Post, "/api/chat")
    {
        Content = JsonContent.Create(body)
    };

    var httpRes = await client.SendAsync(httpReq, HttpCompletionOption.ResponseHeadersRead, ctx.RequestAborted);
    httpRes.EnsureSuccessStatusCode();

    ctx.Response.Headers.ContentType = "text/event-stream";

    await using var stream = await httpRes.Content.ReadAsStreamAsync(ctx.RequestAborted);
    using var reader = new StreamReader(stream);

    while (!reader.EndOfStream)
    {
        var line = await reader.ReadLineAsync();
        if (string.IsNullOrWhiteSpace(line)) continue;

        var node = JsonNode.Parse(line);
        var token = node?["message"]?["content"]?.GetValue<string>();

        if (!string.IsNullOrEmpty(token))
        {
            await ctx.Response.WriteAsync($"data: {token}\n\n", ctx.RequestAborted);
            await ctx.Response.Body.FlushAsync(ctx.RequestAborted);
        }

        if (node?["done"]?.GetValue<bool>() ?? false) break;
    }
});

app.Run();

record ChatRequest(string? Model, List<ChatMessage> Messages);
record ChatMessage(string Role, string Content);

What's Happening Here ?

We enable CORS so the frontend (React) can call this API.
We configure an HTTP client pointing to Ollama's local endpoint (http://localhost:11434).
When a POST request comes to /api/chat, the backend:
- Sends the user's message to Ollama.
- Reads each token Ollama generates.
- Streams those tokens to the browser using Server-Sent Events (SSE).

The response type text/event-stream allows the frontend to display text in real time as it's being generated — just like ChatGPT typing. Options like temperature and num_ctx can be tuned to adjust creativity or context size. For summarization tasks, keeping temperature low (0.1–0.3) gives more consistent results.

Step 3 — Build the React Frontend (Streaming UI)

Finally, let's build a React interface that connects to our API and shows live model responses.

Initialize React with Vite

1
2
3

npm create vite@latest react-ollama -- --template react
cd react-ollama
npm i

This sets up a modern, fast React environment with ES modules and instant reload.

Create the Chat Component

This component:

Sends your input to the backend.
Listens for streamed tokens.
Updates the UI as text arrives.

import { useState, useRef } from "react";

export default function Chat() {
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState("");
  const [streamingAnswer, setStreamingAnswer] = useState("");
  const answerRef = useRef("");

  const send = async () => {
    const payload = {
      model: "llama3.1:8b-instruct",
      messages: [
        ...messages,
        { role: "system", content: "You are a helpful meeting assistant." },
        { role: "user", content: input }
      ]
    };

    setStreamingAnswer("");
    answerRef.current = "";

    const res = await fetch("http://localhost:5189/api/chat", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(payload)
    });

    const reader = res.body.getReader();
    const decoder = new TextDecoder();

    while (true) {
      const { value, done } = await reader.read();
      if (done) break;

      const chunk = decoder.decode(value, { stream: true });
      chunk.split("\n\n").forEach(line => {
        if (line.startsWith("data: ")) {
          const token = line.slice(6);
          answerRef.current += token;
          setStreamingAnswer(answerRef.current);
        }
      });
    }

    setMessages(prev => [
      ...prev,
      { role: "user", content: input },
      { role: "assistant", content: answerRef.current }
    ]);
    setInput("");
  };

  return (
    <div style={{ maxWidth: 720, margin: "2rem auto", fontFamily: "sans-serif" }}>
      <h2>Local Meeting Assistant</h2>
      <div style={{ border: "1px solid #ddd", padding: 16, borderRadius: 8, minHeight: 240 }}>
        {messages.map((m, i) => (
          <div key={i} style={{ marginBottom: 8 }}>
            <strong>{m.role}:</strong> {m.content}
          </div>
        ))}
        {streamingAnswer && (
          <div style={{ marginTop: 8, opacity: 0.9 }}>
            <strong>assistant:</strong> {streamingAnswer}
          </div>
        )}
      </div>
      <textarea
        rows={4}
        style={{ width: "100%", marginTop: 12 }}
        placeholder="Paste your notes or ask a question..."
        value={input}
        onChange={(e) => setInput(e.target.value)}
      />
      <button onClick={send} style={{ marginTop: 12 }}>Ask</button>
    </div>
  );
}

Explanation

The send() function posts the user's input to your .NET API. The backend streams the AI's answer token-by-token. React updates the display immediately with each token, so you see the model “thinking” in real time.

Before running the app:

Make sure ports align: React (5173) and .NET API (5189).
Update the CORS rule in your .NET project to include http://localhost:5173.

Example query: Paste your meeting transcript and ask: “Summarize today's engineering sync in bullet points.” Within a second or two, you'll start seeing the AI's summary appear line by line.

Testing the Flow

Before connecting everything, let's make sure both Ollama and your .NET API are working as expected. These quick checks help confirm your setup and rule out any networking or configuration issues.

Step 1: Sanity-Check Ollama

Run the following commands in your terminal:

# List available models

curl http://localhost:11434/api/tags

This should return a JSON list of models currently available in your local Ollama instance. If you see something like:

{"models":[{"name":"llama3.1:8b-instruct"}]}

— perfect, Ollama is up and running.

Now, let's test a simple prompt directly through the Ollama API:

1
2
3

curl -X POST http://localhost:11434/api/chat \
-H "Content-Type: application/json" \
-d '{"model":"llama3.1:8b-instruct","messages":[{"role":"user","content":"Hello"}],"stream":false}'

If everything is set up correctly, Ollama will respond with JSON similar to this:

{
"model": "llama3.1:8b-instruct",
"response": "Hello! How can I help you today?",
"done": true
}

That confirms Ollama can receive prompts and generate text locally.

Step 2: Test the .NET API

Next, let's verify that your .NET backend is talking to Ollama properly. In a new terminal window, run:

1
2
3

curl -N -X POST http://localhost:5189/api/chat \
-H "Content-Type: application/json" \
-d '{"messages":[{"role":"user","content":"Give me three meeting action items based on: finalize budget, email vendor, schedule training."}]}'

Here's what's happening:

-N keeps the connection open so you can see streamed output.
The payload sends one user message asking for meeting action items.

If it's working, you'll see a stream of responses like:

1
2
3

data: Finalize project budget approval with finance.
data: Send updated proposal email to the vendor.
data: Schedule internal training session next week.

Each data: line represents a new chunk of text sent by the model in real time.

What to Look For

If you see tokens streaming like above — success! If it hangs with no output, check:

that both servers are running (ollama serve and dotnet run),
the ports match (11434 for Ollama, 5189 for .NET),
and that your CORS policy in .NET includes your React origin.

Once both commands work, your stack is ready — you can open the React app and start chatting with your local AI assistant.

React AI Frontend Tips for Better UX

Stream partial tokens to reduce perceived latency.
Provide a stop button that aborts the fetch stream using an AbortController.
Keep a transcript, but summarize or collapse older turns.
Capture feedback (e.g., thumbs up/down) for prompt tuning and quality improvement.

Model Selection Notes

Instruction-following chat and summarization:

llama3.1:8b-instruct: Balanced quality and speed on consumer GPUs and modern CPUs—strong default.
Smaller footprints: 7B models with Q4 quantization; expect lower tokens/sec on CPUs.
Creative writing or multilingual tasks: Experiment with other instruction-tuned models available via Ollama.

LetA's understand what common pitfalls to use this and solutions

CORS issues: Forgetting to allow your React origin is a frequent blocker.
Enable CORS explicitly and handle credentials carefully in production.
Streaming mismatches: Ollama's /api/chat returns line-delimited JSON when stream=true.
If forwarding via SSE, parse and flush frequently to prevent buffering delays.
Overheating the model: High temperatures may look creative but reduce accuracy.
For enterprise Q&A and summarization, start with temperature between 0.1 - 0.3.
Context length limits: Large transcripts can exceed num_ctx. Summarize or chunk inputs first, then ask targeted questions.
For very large inputs, consider “map-reduce” summarization.
State management: Avoid keeping long conversation histories indefinitely. Prune or summarize earlier turns to maintain sharp responses and low latency.
Memory & concurrency: Larger models require sufficient RAM and VRAM.
If performance drops under load, scale Ollama horizontally, add a queue, or pin model instances with keep_alive while capping concurrent sessions.

Conclusion

Connecting Ollama with .NET and React provides a pragmatic blueprint for building full-stack local AI apps that are fast, private, and cost-efficient. You've seen how to:

Set up a Local Inference API
Stream real-time responses to a React UI
Keep the architecture modular to swap models or providers later

Start with a meeting assistant example, then extend it with retrieval, authentication, and production-grade observability.

If you'd like support designing or shipping your next AI-powered UI, our team can help with architecture, implementation, and model strategy. Explore our services at /services/ai-strategy and /services/full-stack-development and let's build something intelligent, together.

Ready to optimize your AI strategy? Partner with Moltech Solution for hybrid AI deployments, private LLM benchmarking, and expert guidance to get the best of local and cloud AI—secure, fast, and cost-efficient

Let's Connect

Frequently Asked Questions

Do you have Questions for Connecting Ollama with .NET & React — Common Questions ?

Let's connect and discuss your project. We're here to help bring your vision to life!

Let's Connect

Using Ollama for local AI inference eliminates per-token cloud fees, offering predictable fixed costs and reducing expenses for heavy or internal workloads compared to cloud-based solutions.

Ollama runs models locally, keeping all data on-premises or on-device without external calls. The .NET backend adds an abstraction layer for authentication, authorization, and auditing to maintain enterprise-grade security.

Yes, .NET’s asynchronous I/O and modular architecture support high throughput and scaling. Ollama can be deployed on GPU servers or containers and scaled horizontally for concurrent sessions.

Developers can rapidly build and test full-stack AI apps locally without cloud setup or API keys. The blog’s step-by-step guide and minimal API examples enable quick prototyping and iteration.

The architecture is modular, with clearly defined API contracts and an interface-first approach allowing you to swap inference providers or extend features like retrieval, authentication, and multi-tenant support easily.

Streaming allows tokens to appear in the UI as they are generated, reducing perceived latency and making AI-powered chat interfaces more responsive and natural for users.

It suits startups, SMBs, and enterprises alike, especially when data privacy, offline capability, cost control, and rapid iteration are priorities. It also avoids vendor lock-in for growing companies.

Our services include custom software development, AI solutions consulting, and technology modernization to ensure seamless integration, scalable architecture, and ongoing support tailored to your business needs.