Min AI Assistent Direktversion

Mörkt läge

Hej! Jag är din AI-assistent. Vad kan jag hjälpa dig med idag?

Redo att chatta

Använder: Claude 3.5 Sonnet via CORS-proxy

AI Chat Demo - Direktversion

En enkel chattapplikation som använder Anthropic's Claude API för att skapa en interaktiv chatbot. Denna version är anpassad för att köras utan egen backend/server.

Funktioner

Modern responsiv design med ljust och mörkt tema
Realtidschatt med Claude AI
Lagring av chatthistorik i webbläsaren
Skicka meddelanden med Enter eller knappen
Visuell indikator när AI:n "tänker"
Direktanslutning till API via CORS-proxy

Viktigt om API-nyckeln

Denna version av applikationen kräver att du anger din egen Anthropic API-nyckel i webbläsaren. Nyckeln lagras säkert i webbläsarens lokala lagring och skickas aldrig till någon annan server än Anthropic's API-tjänst.

Observera: Det rekommenderas inte att använda denna typ av implementering för applikationer där många olika användare kommer att använda applikationen, eftersom API-nyckeln kan exponeras.

CORS & Direktversion - Förklaring

Vad är "Direktversion" och hur skiljer den sig från originalversionen?

I originalversionen av denna applikation användes en egen Node.js-server (backend) som fungerade som en "proxy" mellan din webbläsare och Anthropic's API. Denna direktversion eliminerar behovet av en Node.js-server och använder istället en enkel PHP-proxy för att hantera API-anropen.

Varför behövs en proxy?

CORS (Cross-Origin Resource Sharing) är en säkerhetsmekanism i webbläsare som förhindrar JavaScript från att göra förfrågningar till domäner som skiljer sig från den som serverar webbplatsen.

När du försöker anropa Anthropic's API direkt från en webbläsare möter du CORS-begränsningar eftersom:

Din webbplats servas från kentlundgren.se
Men API-anropet går till api.anthropic.com
Webbläsaren blockerar dessa "cross-origin" anrop av säkerhetsskäl

Vad är en PHP-proxy och hur fungerar den?

I denna lösning använder vi en enkel PHP-fil (api-proxy.php) som:

Tar emot förfrågningar från din webbläsare
Vidarebefordrar dem till Anthropic's API-server
Tar emot svaret från Anthropic
Skickar tillbaka svaret till din webbläsare

Eftersom PHP-proxyn körs på samma webbserver som resten av webbplatsen, finns inga CORS-begränsningar. Dessutom kan servern göra HTTP-anrop till externa API:er utan de begränsningar som webbläsare har.

För- och nackdelar med denna lösning

Fördelar:

Fungerar på vanliga webbhotell som stöder PHP (vilket är majoriteten)
Ingen extern CORS-proxy behövs
Mer pålitlig än att förlita sig på externa tjänster
Ingen Node.js-server behövs

Nackdelar:

API-nyckeln skickas fortfarande från frontend till PHP-proxyn
Fortfarande inte lika säkert som en fullständig backend-lösning
Kräver att webbhotellet stöder PHP och har cURL-tillägget aktiverat

Säkerhetshänsyn

I denna implementering lagras din API-nyckel i webbläsarens localStorage, vilket är säkrare än att hårdkoda den i JavaScript-filen. Men det innebär fortfarande att nyckeln är tillgänglig för:

Alla som har fysisk tillgång till din dator/enhet
JavaScript-kod som körs på samma domän
Potentiella XSS-attacker (Cross-Site Scripting)

Rekommendation: Denna lösning är acceptabel för personlig användning eller i miljöer med begränsad åtkomst, men för publika applikationer rekommenderas fortfarande en mer omfattande backend-lösning som skyddar API-nyckeln bättre.

PHP-lösningen & CORS-bakgrund

Varför fungerar PHP-lösningen när externa CORS-proxyer fallerade?

Den ursprungliga direktversionen använde externa CORS-proxytjänster (som corsproxy.io) för att kringgå CORS-begränsningar. Denna metod misslyckades eftersom:

Många offentliga CORS-proxyer har begränsningar i användning/trafik
Vissa webbhotell blockerar utgående anslutningar till dessa tjänster
Externa tjänster kan vara instabila eller upphöra att fungera utan förvarning

Den nuvarande lösningen: PHP-proxy

Vår nuvarande lösning använder en enkel PHP-fil (api-proxy.php) som körs på samma server som webbsidan. Detta fungerar av flera anledningar:

Ingen CORS-begränsning - Eftersom PHP-filen körs på samma domän som webbsidan, finns inga CORS-begränsningar
Direktåtkomst till API - PHP-koden på servern kan göra HTTP-anrop utan de begränsningar som webbläsare har
Ingen extern beroende - Eftersom proxyn körs på din egen server, finns ingen risk för att en extern tjänst försvinner
Stöd av de flesta webbhotell - PHP är standardteknik på nästan alla webbhotell

Teknisk förklaring av CORS

CORS (Cross-Origin Resource Sharing) är en säkerhetsmekanism implementerad i webbläsare för att förhindra att skadlig kod på en webbplats får åtkomst till resurser på en annan webbplats. Denna säkerhetsmekanism fungerar så här:

När JavaScript försöker göra en HTTP-förfrågan till en annan domän, skickar webbläsaren först en "preflight"-förfrågan
Målservern måste svara med specifika CORS-headers som uttryckligen tillåter din domän
Om dessa headers saknas eller inte uttryckligen tillåter din domän, blockerar webbläsaren anropet

Anthropic har inte konfigurerat sina API-endpoints att tillåta anrop från godtyckliga domäner (vilket är rimligt från säkerhetssynpunkt). Det finns tre vanliga metoder att kringgå detta:

Backend-proxy (originalversionen med Node.js)
Extern CORS-proxy (första direktversionen)
Egen PHP-proxy (nuvarande lösning)

Hur fungerar PHP-proxyn tekniskt?

PHP-proxyn fungerar enligt denna process:

JavaScript i webbläsaren skickar ett anrop till api-proxy.php på samma domän
PHP-koden tar emot förfrågan och extraherar meddelanden och API-nyckel
PHP använder cURL (ett bibliotek för HTTP-förfrågningar) för att göra anropet till Anthropic API
PHP tar emot svaret från Anthropic och skickar det tillbaka till webbläsaren

Det centrala här är att webbläsaren aldrig kommunicerar direkt med Anthropic API - all kommunikation går via servern, vilket kringgår CORS-begränsningarna.

Praktisk användning

Denna PHP-proxylösning är ideal för:

Personliga projekt på standardwebbhotell
Småskaliga applikationer där en fullskalig backend är onödigt komplex
Snabba prototyper och demos
Miljöer där Node.js inte finns tillgängligt

För större projekt med många användare rekommenderas fortfarande att bygga en mer robust backend-lösning med autentisering, caching och säkrare hantering av API-nycklar.

Om AI Chat Demo - Direktversion