OpenRouter API - Basic Example

AI-powered chatbot using OpenRouter API in AI-only mode

Demo Mode

Replace YOUR_OPENROUTER_API_KEY with your actual OpenRouter API key.

Get your API key at: https://openrouter.ai/keys

Security Warning

Never expose your API key in production!

For production deployments, use a server-side proxy to keep your API key secure. See the proxy setup guide for more information.

Modern Style

Classic Style

HTML Code

<!-- Include CSS and JS -->
<link rel="stylesheet" href="dist/swc.css">
<script src="dist/swc.js"></script>

<!-- AI-Powered Chatbot -->
<div data-swc 
     data-swc-theme-color="#0D9488" 
     data-swc-bot-name="AI Assistant" 
     data-swc-chat-display="modern"
     data-swc-api-mode="ai-only"
     data-swc-api-key="YOUR_OPENROUTER_API_KEY"
     data-swc-api-model="nvidia/nemotron-nano-12b-v2-vl:free"
     data-swc-api-streaming="true"
     data-swc-api-max-tokens="500"
     data-swc-api-temperature="0.7"
     data-swc-system-prompt="You are a helpful assistant.">
</div>

Configuration Options

Attribute	Default	Description
data-swc-api-mode	`keyword-only`	Mode: `keyword-only`, `ai-only`, or `hybrid`
data-swc-api-key	-	OpenRouter API key (required for AI features)
data-swc-api-model	`nvidia/nemotron-nano-12b-v2-vl:free`	Model identifier from OpenRouter
data-swc-api-streaming	`true`	Enable real-time streaming responses
data-swc-api-max-tokens	`500`	Maximum response length in tokens
data-swc-api-temperature	`0.7`	Response creativity (0-2, higher = more creative)
data-swc-system-prompt	`You are a helpful...`	System instructions for the AI
data-swc-context-max-messages	`10`	Number of messages to keep in context