How I Built an LLM Chat UI Better Than ChatGPT (As a Backend Engineer)

Dhruvin Rupesh Soni — Mon, 26 Jan 2026 04:30:00 +0000

📖 Table of Contents

The Frustration That Started It All
The Original Vision
Tech Stack Decision
Architecture: Context API vs Redux
Security: Non-Negotiable Principles
Multi-Provider Abstraction
Feature Breakdown (20 Features)
Lessons Learned
Try It Yourself

🤔 The Frustration That Started It All {#the-frustration}

When ChatGPT launched, I tried every LLM chat UI I could find.

Each had brilliant features—but they were scattered:

Gemini had beautiful inline editing
ChatGPT had useful archiving
Copilot had smooth keyboard shortcuts

I wanted them all. In one place.

So I scribbled 20 features on a list and thought:

"This will take half an hour."

Six months later, I shipped Samvada Studio with:

✅ 35+ features
✅ 6 LLM providers
✅ 15,000 lines of documentation
✅ 100% local-first, security-first architecture

Here's the complete technical story.

📝 The Original Vision{#the-vision}

This is the actual list I wrote (typos and all):

[Insert screenshot of THE_BEGINNING.md from your repo]

Let me break down how I implemented each feature.

Feature 1: Inline Editing (Gemini-Inspired)

Gemini lets you edit AI responses directly. Brilliant UX—you're iterating in place, no copy-paste needed.

My Implementation:

// PromptResponseItem.tsx
const [isEditing, setIsEditing] = useState(false);
const [editedContent, setEditedContent] = useState(response.content);

const handleSave = () => {
  dispatch({
    type: 'UPDATE_RESPONSE',
    payload: {
      chatId,
      pnrId,
      responseId: response.id,
      newContent: editedContent
    }
  });
  setIsEditing(false);
};

return (
  <div>
    {isEditing ? (
      <textarea
        value={editedContent}
        onChange={(e) => setEditedContent(e.target.value)}
        className="w-full p-2 border rounded"
      />
    ) : (
      <ReactMarkdown>{response.content}</ReactMarkdown>
    )}
    <button onClick={() => setIsEditing(!isEditing)}>
      {isEditing ? '💾' : '✏️'}
    </button>
  </div>
);

Key Decision: Use controlled components for immediate state updates.

Feature 2: Archive System (ChatGPT-Inspired)

ChatGPT's archive feature is perfect for decluttering. I implemented it with a simple boolean flag.

// ChatContext.tsx
interface Chat {
  id: string;
  title: string;
  isArchived: boolean; // Simple!
  prompts: PromptResponse[];
}

// Toggle archive
const archiveChat = (chatId: string) => {
  dispatch({
    type: 'TOGGLE_ARCHIVE',
    payload: { chatId }
  });
};

Sidebar filter:

const visibleChats = showArchived 
  ? chats 
  : chats.filter(chat => !chat.isArchived);

[Continue with remaining 18 features...]

🛠️ Tech Stack Decision {#tech-stack}

As a backend engineer, I had zero React experience. Here's why I chose what I chose:

React 18 + TypeScript

Why React?

Component-based architecture (maps to my OOP brain)
Huge ecosystem (solutions exist for everything)
PWA support (I wanted installable app)
Job market relevance (learning investment pays off)

Why TypeScript?

// This catches bugs BEFORE runtime
interface PromptResponse {
  id: string;
  prompt: Message;
  responses: Message[];
  timestamp: number;
  // If I forget a field, TypeScript yells at me
}

// ❌ This won't compile:
const pnr: PromptResponse = {
  id: '123',
  prompt: { content: 'Hello' }
  // Missing: responses, timestamp
};

Type safety = fewer bugs = happier users.

Vite

Why not Create React App?

Metric	Vite	CRA
Cold start	0.5s	15s
Hot reload	50ms	2s
Production build	6s	60s

Vite is 10x faster. Life's too short for slow builds.

Tailwind CSS

Why not styled-components?

// ❌ styled-components: Create separate component
const Button = styled.button`
  padding: 0.5rem 1rem;
  background: blue;
  color: white;
`;

// ✅ Tailwind: Inline, fast, no context switching
<button className="px-4 py-2 bg-blue-500 text-white">
  Click me
</button>

Tailwind = rapid prototyping. Dark mode is built-in:

<div className="bg-white dark:bg-gray-900">
  {/* Automatic theme support */}
</div>

🏗️ Architecture: Context API vs Redux {#architecture}

Everyone said "use Redux for complex state."

I said no. Here's why.

The State Structure

interface AppState {
  chats: Chat[];
  contextPanels: ContextPanel[];
  settings: Settings;
  templates: PromptTemplate[];
  folders: Folder[];
}

For this, Redux is overkill. Context API + useReducer gives me:

Actions are typed:

type ChatAction =
  | { type: 'ADD_CHAT'; payload: Chat }
  | { type: 'DELETE_CHAT'; payload: { chatId: string } }
  | { type: 'UPDATE_RESPONSE'; payload: UpdateResponsePayload }
  | { type: 'TOGGLE_ARCHIVE'; payload: { chatId: string } };

Reducer is predictable:

function chatReducer(state: AppState, action: ChatAction): AppState {
  switch (action.type) {
    case 'ADD_CHAT':
      return {
        ...state,
        chats: [...state.chats, action.payload]
      };

    case 'DELETE_CHAT':
      return {
        ...state,
        chats: state.chats.filter(c => c.id !== action.payload.chatId)
      };

    // ... other cases

    default:
      return state;
  }
}

No boilerplate:

No action creators
No thunks
No middleware
No devtools setup

Just dispatch and done.

When to use Redux:

App with 100+ components
Complex async logic
Time-travel debugging needed

For most apps? Context API is enough.

🔐 Security: Non-Negotiable Principles {#security}

Most LLM UIs store API keys in localStorage.

This is dangerous.

The Problem with localStorage

// ❌ Common approach (INSECURE)
localStorage.setItem('openai_api_key', apiKey);

Risks:

XSS attacks: Malicious script can read localStorage
Browser extensions: Any extension can access it
Dev tools: Anyone with physical access can view
Syncing: May sync across devices unintentionally

My Solution: In-Memory Only

// ✅ Secure approach
const [providers, setProviders] = useState<LLMProvider[]>([]);

interface LLMProvider {
  type: 'openai' | 'anthropic' | 'google';
  endpoint: string;
  apiKey: string; // In component state, never persisted
  models: string[];
}

When user closes tab: API key is gone. They re-enter next session.

Trade-off: Convenience vs Security. I chose security.

HTTPS Enforcement

function validateEndpoint(endpoint: string, type: ProviderType): boolean {
  // Exception: localhost for Ollama (local model)
  if (type === 'ollama' && endpoint.includes('localhost')) {
    return true;
  }

  // All cloud providers: HTTPS required
  if (!endpoint.startsWith('https://')) {
    throw new Error('HTTPS required for security');
  }

  return true;
}

Why: API keys in HTTP = visible to anyone on network.

Input Sanitization

function sanitizePrompt(input: string): string {
  return input
    .replace(/\u0000/g, '') // Remove null bytes
    .replace(/[\x00-\x1F\x7F]/g, '') // Remove control chars
    .trim();
}

Every user input goes through sanitization. Every. Single. Time.

🔌 Multi-Provider Abstraction {#multi-provider}

Supporting 6 LLM providers sounds complex. But with the right abstraction, it's trivial.

The Provider Interface

interface LLMProvider {
  type: 'openai' | 'anthropic' | 'google' | 'ollama' | 'azure' | 'custom';
  name: string;
  endpoint: string;
  apiKey: string;
  models: string[];
  defaultModel: string;
}

The Call Function

async function callLLM(
  provider: LLMProvider,
  prompt: string,
  history: Message[]
): Promise<LLMResponse> {

  // Validate first
  validateEndpoint(provider.endpoint, provider.type);

  // Route based on type
  switch (provider.type) {
    case 'openai':
      return await callOpenAI(provider, prompt, history);

    case 'anthropic':
      return await callAnthropic(provider, prompt, history);

    case 'google':
      return await callGoogle(provider, prompt, history);

    // ... other providers
  }
}

Adding a New Provider (20 Minutes)

Add type to union (1 min):

type ProviderType = 'openai' | 'anthropic' | 'newProvider';

Add case to switch (1 min):

case 'newProvider':
  return await callNewProvider(provider, prompt, history);

Implement API call (15 min):

async function callNewProvider(
  provider: LLMProvider,
  prompt: string,
  history: Message[]
): Promise<LLMResponse> {
  const response = await fetch(provider.endpoint, {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${provider.apiKey}`,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      model: provider.defaultModel,
      messages: [...history, { role: 'user', content: prompt }]
    })
  });

  const data = await response.json();
  return {
    content: data.choices[0].message.content,
    tokens: data.usage.total_tokens
  };
}

Test (3 min):

npm run dev
# Add new provider in Admin
# Test connection
# Send a prompt

Done! That's the power of standardization.

✨ Feature Breakdown {#features}

Command Palette (Ctrl+K)

Inspired by VS Code. Uses fuzzy search:

const commands: Command[] = [
  { name: 'New Chat', action: createChat, shortcut: 'Ctrl+N' },
  { name: 'Global Search', action: openSearch, shortcut: 'Ctrl+Shift+F' },
  { name: 'Export Chat', action: openExport, shortcut: 'Ctrl+Shift+E' },
  // ... 20+ commands
];

const filteredCommands = commands.filter(cmd =>
  cmd.name.toLowerCase().includes(query.toLowerCase())
);

Voice Input (Ctrl+M)

Uses Web Speech API (built into browsers!):

const recognition = new (
  window.SpeechRecognition || window.webkitSpeechRecognition
)();

recognition.continuous = true;
recognition.interimResults = true;
recognition.lang = 'en-US';

recognition.onresult = (event) => {
  const transcript = Array.from(event.results)
    .map(result => result[0].transcript)
    .join('');

  setPromptText(transcript);
};

recognition.start();

No external library needed!

Token Counter

Live estimation as you type:

function estimateTokens(text: string): number {
  // Rough estimate: 1 token ≈ 4 characters
  // More accurate: Use tiktoken library
  return Math.ceil(text.length / 4);
}

function estimateCost(tokens: number, provider: ProviderType): number {
  const pricing = {
    'openai': 0.03 / 1000, // $0.03 per 1K tokens (GPT-4)
    'anthropic': 0.015 / 1000, // $0.015 per 1K tokens (Claude)
    'google': 0.00025 / 1000 // $0.00025 per 1K tokens (Gemini)
  };

  return tokens * (pricing[provider] || 0);
}

🎓 Lessons Learned {#lessons}

Technical Lessons

1. TypeScript Catches Bugs Before Users Do

// ❌ Without TypeScript:
function updateChat(id, title) {
  // Oops, I passed a number instead of string
  // Bug discovered in production
}

// ✅ With TypeScript:
function updateChat(id: string, title: string) {
  // Compiler error if I pass wrong types
}

2. Context API is Enough for Most Apps

I was scared of state management. Everyone said "use Redux."

For Samvada Studio (35+ features, complex state), Context API was plenty.

When to use Redux:

App with 100+ components sharing state
Complex async logic (sagas, thunks)
Need time-travel debugging

Otherwise: Context API + useReducer.

3. Web APIs Are Amazing

No need for heavy libraries:

Speech Recognition: Built-in browser API
Text-to-Speech: Built-in browser API
PWA: Service workers + manifest.json
LocalStorage: Built-in, simple, works everywhere

4. Documentation is Marketing

I wrote 15,000+ lines of docs. People noticed.

Comments on GitHub:

"The documentation is incredible!"
"Finally, someone who explains the WHY"
"I learned more from your docs than the code"

Good docs = trust = users = contributors.

5. Security Upfront, Not Later

I could've stored API keys in localStorage (easy). But I knew it was wrong.

Doing security after is 10x harder. Do it first.

Product Lessons

1. Steal Like an Artist

I didn't invent new UX patterns. I studied the best:

Gemini's inline editing → Copied
ChatGPT's archiving → Copied
Copilot's command palette → Copied

Result: Familiar UX, zero learning curve.

2. Quality > Speed

My original timeline: "Half an hour."

Reality: 6 months.

But every feature is polished. Every edge case handled. Every interaction smooth.

Fast and buggy or slow and excellent? I chose excellent.

3. Users Want Keyboard Shortcuts

Power users LOVE keyboards:

Ctrl+K: Command Palette
Ctrl+M: Voice Input
Ctrl+.: Text-to-Speech
Ctrl+Enter: Send Message

Adding shortcuts was trivial. User satisfaction? Massive.

Life Lessons

1. Backend Engineers Can Do Frontend

I was intimidated by React. "That's not my world."

But I learned:

Components = Objects with render methods
Props = Constructor parameters
State = Class fields
Hooks = Utility functions

It's all just programming.

2. Frustration = Fuel

I was annoyed with existing LLM UIs. That annoyance drove me to build something better.

What's annoying you right now? That might be your next project.

3. Preserve Your Origin Story

I almost deleted my original feature list. "It's messy, incomplete, unprofessional."

But I kept it. Now it's in the repo as THE_BEGINNING.md.

People love origin stories. They're relatable, human, inspiring.

Don't hide your beginnings. Celebrate them.

🚀 Try It Yourself {#try-it}

Samvada Studio is open source and free.

Quick Start

# Clone the repo
git clone https://github.com/dhruvinrsoni/samvada-studio.git
cd samvada-studio

# Install dependencies
npm install

# Start development server
npm run dev

# Open http://localhost:5173

What You Get

✅ 35+ power-user features
✅ 6 LLM providers (OpenAI, Anthropic, Google, Ollama, Azure, Custom)
✅ 100% local-first (your data stays with you)
✅ Security-first (API keys in memory only)
✅ Comprehensive docs (15,000+ lines)

Perfect For

Developers who need keyboard-first interfaces
Prompt engineers who test multiple providers
Researchers who need organized conversations
Content pros who value privacy

🤝 Contributing

Found a bug? Have a feature idea?

Open an issue: github.com/dhruvinrsoni/samvada-studio/issues

Submit a PR: We have comprehensive contributing guidelines

Feature 21 is open! What should the next feature be?

🎯 Conclusion

What started as "a half-hour project" became 6 months of learning, building, and polishing.

Was it worth it? Absolutely.

I went from zero React knowledge to shipping a production-ready app.

I learned about security, architecture, and what makes great UX.

And I built something I use every single day.

Your frustration might be the start of your next project.

What are you waiting for?

Questions? Drop them in the comments. I'll answer every one.

Found this helpful? Give Samvada Studio a ⭐ on GitHub!

🔗 GitHub: github.com/dhruvinrsoni/samvada-studio

🐦 Twitter: @dhruvinrsoni
💼 LinkedIn: @dhruvinrsoni

Tags: #opensource #react #typescript #llm #webdevelopment #buildinpublic

Forem: Dhruvin Rupesh Soni