Examples

This section provides practical examples of how to use TDoge SDK in different scenarios.

Basic Integration

The simplest way to integrate TDoge SDK into your application:

import { TDoge } from 'tdoge-sdk';

// Create instance
const tdoge = new TDoge({
  showOnlyAvatar: true,
  host: "https://tapi.anispark.xyz/tdoge-core"
});

// Mount to DOM
tdoge.mount("#app");

// Start interaction
tdoge.ask("Hello!");

Complete HTML Example

Here's a complete example of how to implement TDoge SDK in a basic HTML application:

<!DOCTYPE html>
<html>
<head>
    <title>TDoge SDK Integration Example</title>
    <script src="tdoge-sdk.umd.js"></script>
    <link rel="stylesheet" href="tdoge-sdk.css" />
    <style>
        #app {
            width: 400px;
            height: 600px;
        }
    </style>
</head>
<body>
    <div id="app"></div>
    <script>
        // Initialize TDoge SDK
        const tdoge = new TDoge({
            showOnlyAvatar: true,
            host: "https://tapi.anispark.xyz/tdoge-core"
        });

        // Mount to the app div
        tdoge.mount("#app");

        // Example: Send a message in AI Chat mode
        tdoge.ask("Hello, I'm a talking doge!");

        // Example: Direct TTS mode
        tdoge.say("Hello");
    </script>
</body>
</html>

Vue.js Integration

Example of integrating TDoge SDK with Vue.js:

<template>
  <div>
    <div ref="tdogeContainer"></div>
    <button @click="sendMessage">Send Message</button>
  </div>
</template>

<script>
import { TDoge } from 'tdoge-sdk';

export default {
  data() {
    return {
      tdoge: null
    }
  },
  mounted() {
    this.tdoge = new TDoge({
      showOnlyAvatar: true,
      host: "https://tapi.anispark.xyz/tdoge-core"
    });
    this.tdoge.mount(this.$refs.tdogeContainer);
  },
  methods: {
    sendMessage() {
      this.tdoge.ask("Hello from Vue!");
    }
  },
  beforeUnmount() {
    this.tdoge?.unmount();
  }
}
</script>

React Integration

Example of integrating TDoge SDK with React:

import React, { useEffect, useRef } from 'react';
import { TDoge } from 'tdoge-sdk';

function TDogeComponent() {
  const containerRef = useRef(null);
  const tdogeRef = useRef(null);

  useEffect(() => {
    tdogeRef.current = new TDoge({
      showOnlyAvatar: true,
      host: "https://tapi.anispark.xyz/tdoge-core"
    });
    tdogeRef.current.mount(containerRef.current);

    return () => {
      tdogeRef.current?.unmount();
    };
  }, []);

  const sendMessage = () => {
    tdogeRef.current?.ask("Hello from React!");
  };

  return (
    <div>
      <div ref={containerRef}></div>
      <button onClick={sendMessage}>Send Message</button>
    </div>
  );
}

export default TDogeComponent;

Custom Styling

Example of customizing the TDoge avatar appearance:

const tdoge = new TDoge({
  showOnlyAvatar: true,
  host: "https://tapi.anispark.xyz/tdoge-core",
  style: {
    width: '400px',
    height: '400px',
    borderRadius: '20px',
    backgroundColor: '#f0f0f0'
  }
});

Event Handling

const tdoge = new TDoge({
  showOnlyAvatar: true,
  host: "https://tapi.anispark.xyz/tdoge-core"
});

// Listen for mount event
tdoge.on('mount', () => {
  console.log('TDoge is mounted!');
});

// Listen for unmount event
tdoge.on('unmount', () => {
  console.log('TDoge is unmounted!');
});

// Listen for say events
tdoge.on('say', (text) => {
  console.log('Saying:', text);
});

// Listen for ask events
tdoge.on('ask', (text) => {
  console.log('Asking:', text);
});

// Listen for error events
tdoge.on('error', (error) => {
  console.error('Error:', error);
});

Best Practices

Resource Management
- Always unmount the instance when it's no longer needed
- Clean up event listeners
- Handle errors appropriately
Performance
- Initialize the SDK only when needed
- Use appropriate interaction modes
- Monitor memory usage
User Experience
- Provide loading states
- Handle errors gracefully
- Give feedback for user interactions