Adding an AI Chat Assistant to a Website

<script src="https://chat.example.com/embed.js" async></script>

<script
  src="https://chat.example.com/embed.js"
  data-color="#10b981"
  data-position="bottom-left"
  data-name="Assistant"
  async>
</script>

{
  "name": "My Assistant",
  "welcome": "Hello! How can I help you?",
  "systemPrompt": "You are a professional e-commerce customer service assistant. Provide concise and friendly responses, and prioritize recommending store products.",
  "suggestedQuestions": [
    "What are the popular products?",
    "How do I check the order status?",
    "What is the return and exchange policy?",
  ]
}

// ❌ Too vague
"description": "Retrieve data"

// ✅ Clearly states the feature + usage scenario
"description": "Get the full content of a single blog post by its ID. Use search_posts first if you don't know the ID."

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: Content-Type, Authorization

useEffect(() => {
  const s = document.createElement('script');
  s.src = 'https://chat.example.com/embed.js';
  s.async = true;
  document.body.appendChild(s);
  return () => document.body.removeChild(s);
}, []);

<script setup>
import { onMounted } from 'vue'
onMounted(() => {
  const s = document.createElement('script')
  s.src = 'https://chat.example.com/embed.js'
  s.async = true
  document.body.appendChild(s)
})
</script>

<script src="https://chat.example.com/embed.js" async></script>

Users ask questions on your website.
       ↓
embed.js injects a chat bubble + iframe (which loads the same-origin /widget).
       ↓
Page content is extracted via embed.js and sent to the iframe using postMessage.
       ↓
┌─────────────────────────────────────────┐
│     The /widget page (same-origin) within the iframe     │
│                                         │
│  fetch('/chat') → processed by the Agent:           │
│  1. Inject page content into the AI context             │
│  2. The AI determines whether it needs to call the backend API          │
│  3. If needed → call your API → retrieve data   │
│  4. The AI generates a response based on all the information              │
│  5. The SSE stream is returned to the frontend                   │
└─────────────────────────────────────────┘
       ↓
Users see the response generated in real time.

# Clone your repository.
git clone https://github.com/your-username/ai-assistant.git
cd ai-assistant

# Install dependencies.
npm install

# Configure environment variables.
cp .env.example .env
# Edit the .env file and populate it with AI_GATEWAY_API_KEY and other variables.

# Start the development server.
edgeone makers dev