🟨 Mia21 JavaScript/TypeScript SDK

Official JavaScript and TypeScript client library for the Mia21 Chat API.

🚀 Quick Start

Installation

npm install mia21
# or
yarn add mia21

Basic Usage (JavaScript)

const { Mia21Client } = require('mia21');

const client = new Mia21Client({ apiKey: 'your-api-key-here' });

async function main() {
  // Initialize chat
  await client.initialize({ spaceId: 'customer_support' });
  
  // Send message
  const response = await client.chat('How do I reset my password?');
  console.log(response.message);
  
  // Close session
  await client.close();
}

main();

TypeScript

import { Mia21Client, ChatResponse } from 'mia21';

const client = new Mia21Client({ apiKey: 'your-api-key-here' });

async function main(): Promise<void> {
  await client.initialize({ spaceId: 'customer_support' });
  
  const response: ChatResponse = await client.chat('Hello!');
  console.log(response.message);
  
  await client.close();
}

main();

Streaming Chat

import { Mia21Client } from 'mia21';

const client = new Mia21Client({ apiKey: 'your-api-key-here' });

async function streamExample() {
  await client.initialize();
  
  process.stdout.write('AI: ');
  await client.streamChat('Tell me a story', (chunk) => {
    process.stdout.write(chunk);
  });
  console.log();
  
  await client.close();
}

streamExample();

📚 API Reference

Constructor

const client = new Mia21Client({
  apiKey: string;              // Required: Your Mia21 API key
  baseUrl?: string;            // Optional: API base URL
  userId?: string;             // Optional: User ID (auto-generated)
  timeout?: number;            // Optional: Request timeout (ms)
});

Methods

listSpaces()

const spaces = await client.listSpaces();
// Returns: Promise<Space[]>

spaces.forEach(space => {
  console.log(`${space.id}: ${space.name}`);
});

initialize(options)

const response = await client.initialize({
  spaceId: 'customer_support',    // Optional
  llmType: 'openai',              // Optional: 'openai' | 'gemini'
  userName: 'John',               // Optional
  language: 'en',                 // Optional
  generateFirstMessage: true,     // Optional
  incognitoMode: false            // Optional
});
// Returns: Promise<InitializeResponse>

console.log(response.message);  // AI greeting

chat(message, options)

const response = await client.chat(
  'How do I reset my password?',  // Required: User message
  {
    spaceId: 'support',           // Optional
    temperature: 0.7,             // Optional: 0.0-2.0
    maxTokens: 1024               // Optional
  }
);
// Returns: Promise<ChatResponse>

console.log(response.message);
console.log(response.tool_calls);

streamChat(message, onChunk, options)

await client.streamChat(
  'Tell me a story',              // Required: User message
  (chunk) => {                    // Required: Callback for each chunk
    process.stdout.write(chunk);
  },
  {
    spaceId: 'storyteller',       // Optional
    temperature: 0.9              // Optional
  }
);
// Returns: Promise<void>

close(spaceId)

await client.close('customer_support');  // Optional: space ID
// Returns: Promise<void>

🎯 Usage Examples

React Component

import { useState, useEffect } from 'react';
import { Mia21Client } from 'mia21';

function ChatComponent() {
  const [client] = useState(() => new Mia21Client({ apiKey: process.env.REACT_APP_MIA21_API_KEY! }));
  const [message, setMessage] = useState('');
  const [response, setResponse] = useState('');
  const [isStreaming, setIsStreaming] = useState(false);

  useEffect(() => {
    client.initialize({ spaceId: 'customer_support' });
    return () => {
      client.close();
    };
  }, []);

  const sendMessage = async () => {
    setIsStreaming(true);
    setResponse('');
    
    await client.streamChat(message, (chunk) => {
      setResponse(prev => prev + chunk);
    });
    
    setIsStreaming(false);
    setMessage('');
  };

  return (
    <div>
      <div className="chat-output">{response}</div>
      <input 
        value={message} 
        onChange={(e) => setMessage(e.target.value)} 
        placeholder="Type a message..."
        disabled={isStreaming}
      />
      <button onClick={sendMessage} disabled={isStreaming || !message}>
        {isStreaming ? 'Sending...' : 'Send'}
      </button>
    </div>
  );
}

export default ChatComponent;

Vue.js Component

<template>
  <div>
    <div class="chat-output">{{ response }}</div>
    <input 
      v-model="message" 
      @keyup.enter="sendMessage"
      placeholder="Type a message..."
      :disabled="isStreaming"
    />
    <button @click="sendMessage" :disabled="isStreaming || !message">
      {{ isStreaming ? 'Sending...' : 'Send' }}
    </button>
  </div>
</template>

<script>
import { Mia21Client } from 'mia21';

export default {
  data() {
    return {
      client: new Mia21Client({ apiKey: process.env.VUE_APP_MIA21_API_KEY }),
      message: '',
      response: '',
      isStreaming: false
    };
  },
  async mounted() {
    await this.client.initialize({ spaceId: 'customer_support' });
  },
  async beforeUnmount() {
    await this.client.close();
  },
  methods: {
    async sendMessage() {
      this.isStreaming = true;
      this.response = '';
      
      await this.client.streamChat(this.message, (chunk) => {
        this.response += chunk;
      });
      
      this.isStreaming = false;
      this.message = '';
    }
  }
};
</script>

Node.js Server

import express from 'express';
import { Mia21Client } from 'mia21';

const app = express();
app.use(express.json());

const client = new Mia21Client({ apiKey: process.env.MIA21_API_KEY! });

app.post('/api/chat', async (req, res) => {
  const { userId, message } = req.body;
  
  try {
    // Initialize if not already
    await client.initialize({ spaceId: 'customer_support' });
    
    // Get response
    const response = await client.chat(message);
    
    res.json({ message: response.message });
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

app.listen(3000);

🛠️ Configuration

Environment Variables

# .env file
MIA21_API_KEY=your-api-key-here
MIA21_BASE_URL=https://mia-api-staging-795279012747.us-central1.run.app

import { Mia21Client } from 'mia21';

const client = new Mia21Client({
  apiKey: process.env.MIA21_API_KEY!,
  baseUrl: process.env.MIA21_BASE_URL
});

🧪 Testing

# Install dependencies
npm install

# Build TypeScript
npm run build

# Run tests
npm test

📄 License

MIT License - see LICENSE file for details.

🆘 Support

• Documentation: https://docs.mia21.com
• API Reference: https://docs.mia21.com/api
• GitHub Issues: https://github.com/mia21/javascript-sdk/issues
• Discord: https://discord.gg/mia21
• Email: [email protected]

🎉 Examples

See the examples/ directory for complete working examples:

• basic-chat.ts - Simple chat example
• streaming-chat.ts - Streaming response example
• react-component.tsx - React integration
• vue-component.vue - Vue.js integration
• express-server.ts - Node.js server

Made with ❤️ by Mia21