示例项目

这里提供了 XAI-SDK 在不同环境和框架中的实际使用示例，帮助您快速上手和理解最佳实践。

📋 示例列表

🖥️ CLI 应用示例

Node.js 命令行工具

基础 CLI 工具 - 简单的命令行代码分析工具
高级 CLI 工具 - 功能完整的 AI 辅助开发工具
插件化 CLI - 支持插件扩展的命令行工具

⚛️ React 应用示例

React + XAI-SDK 集成

基础 React 应用 - 简单的 React AI 聊天应用
代码编辑器 - 带 AI 辅助的代码编辑器
项目分析器 - React 项目代码分析工具

🟢 Vue 应用示例

Vue + XAI-SDK 集成

基础 Vue 应用 - 简单的 Vue AI 助手应用
开发工具面板 - Vue 开发者工具扩展
智能代码生成器 - AI 驱动的代码生成工具

🌐 原生 JavaScript 示例

纯 JavaScript 实现

基础 Web 应用 - 原生 JavaScript 示例
代码编辑器集成 - 在线代码编辑器
实时分析工具 - 实时代码分析示例

🚀 快速开始

克隆示例项目

bash

# 克隆整个项目
git clone https://github.com/xujialiang/xai-sdk.git
cd xai-sdk/examples

# 或者只克隆特定示例
git clone --depth 1 --filter=blob:none --sparse https://github.com/xujialiang/xai-sdk.git
cd xai-sdk
git sparse-checkout set examples/react/basic

运行示例

CLI 示例React 示例Vue 示例

bash

cd examples/cli/basic
npm install
npm start

bash

cd examples/react/basic
npm install
npm run dev

bash

cd examples/vue/basic
npm install
npm run dev

📚 示例详情

CLI 应用示例

基础 CLI 工具

一个简单的命令行工具，展示如何在 Node.js 环境中使用 XAI-SDK：

typescript

#!/usr/bin/env node
import { XAI_SDK } from 'xai-sdk';
import { FileToolsPlugin } from '@xai-sdk/file-tools';
import { OpenAIProviderPlugin } from '@xai-sdk/openai-provider';

async function main() {
  const sdk = new XAI_SDK({ environment: 'node' });
  
  // 注册插件
  await sdk.registerPlugin(new FileToolsPlugin());
  await sdk.registerPlugin(new OpenAIProviderPlugin({
    apiKey: process.env.OPENAI_API_KEY
  }));
  
  await sdk.initialize();
  
  // 分析代码文件
  const code = await sdk.executeTool('read-file', {
    path: process.argv[2]
  });
  
  const analysis = await sdk.analyze(code.content);
  console.log('代码分析结果:', analysis);
}

main().catch(console.error);

特性：

📁 文件读取和分析
🤖 AI 驱动的代码分析
📊 详细的分析报告
🛠️ 命令行参数处理

高级 CLI 工具

功能更完整的命令行工具，支持多种操作：

typescript

import { Command } from 'commander';
import { XAI_SDK } from 'xai-sdk';

const program = new Command();
const sdk = new XAI_SDK({ environment: 'node' });

program
  .name('xai-cli')
  .description('AI-powered development tool')
  .version('1.0.0');

program
  .command('analyze <file>')
  .description('分析代码文件')
  .option('-t, --type <type>', '分析类型', 'quality')
  .action(async (file, options) => {
    const result = await sdk.analyze(file, {
      type: options.type
    });
    console.log(result);
  });

program
  .command('generate <prompt>')
  .description('生成代码')
  .option('-l, --language <lang>', '编程语言', 'typescript')
  .action(async (prompt, options) => {
    const result = await sdk.generate(prompt, {
      language: options.language
    });
    console.log(result.code);
  });

program.parse();

特性：

🎯 多种命令支持
⚙️ 丰富的配置选项
📈 进度显示
🎨 彩色输出

React 应用示例

基础 React 应用

展示如何在 React 应用中集成 XAI-SDK：

tsx

import React, { useState, useEffect } from 'react';
import { XAI_SDK } from 'xai-sdk';
import { ReactAdapterPlugin } from '@xai-sdk/react-adapter';

function App() {
  const [sdk, setSdk] = useState<XAI_SDK | null>(null);
  const [messages, setMessages] = useState<any[]>([]);
  const [input, setInput] = useState('');

  useEffect(() => {
    const initSDK = async () => {
      const sdkInstance = new XAI_SDK({ environment: 'browser' });
      await sdkInstance.registerPlugin(new ReactAdapterPlugin());
      await sdkInstance.initialize();
      setSdk(sdkInstance);
    };
    
    initSDK();
  }, []);

  const sendMessage = async () => {
    if (!sdk || !input.trim()) return;
    
    const userMessage = { role: 'user', content: input };
    setMessages(prev => [...prev, userMessage]);
    
    const response = await sdk.chat({
      messages: [...messages, userMessage]
    });
    
    setMessages(prev => [...prev, {
      role: 'assistant',
      content: response.content
    }]);
    
    setInput('');
  };

  return (
    <div className="chat-app">
      <div className="messages">
        {messages.map((msg, index) => (
          <div key={index} className={`message ${msg.role}`}>
            {msg.content}
          </div>
        ))}
      </div>
      
      <div className="input-area">
        <input
          value={input}
          onChange={(e) => setInput(e.target.value)}
          onKeyPress={(e) => e.key === 'Enter' && sendMessage()}
          placeholder="输入消息..."
        />
        <button onClick={sendMessage}>发送</button>
      </div>
    </div>
  );
}

export default App;

特性：

💬 实时聊天界面
🔄 流式响应支持
🎨 现代化 UI 设计
📱 响应式布局

代码编辑器

带 AI 辅助功能的代码编辑器：

tsx

import React, { useState } from 'react';
import { XAI_SDK } from 'xai-sdk';
import { CodeMirror } from '@uiw/react-codemirror';
import { javascript } from '@codemirror/lang-javascript';

function CodeEditor() {
  const [code, setCode] = useState('');
  const [analysis, setAnalysis] = useState(null);
  const [sdk] = useState(() => new XAI_SDK({ environment: 'browser' }));

  const analyzeCode = async () => {
    if (!code.trim()) return;
    
    const result = await sdk.analyze(code, {
      type: 'quality',
      includeMetrics: true
    });
    
    setAnalysis(result);
  };

  const generateCode = async (prompt: string) => {
    const result = await sdk.generate(prompt, {
      language: 'javascript',
      includeComments: true
    });
    
    setCode(result.code);
  };

  return (
    <div className="code-editor">
      <div className="editor-panel">
        <CodeMirror
          value={code}
          onChange={setCode}
          extensions={[javascript()]}
          theme="dark"
        />
      </div>
      
      <div className="sidebar">
        <button onClick={analyzeCode}>分析代码</button>
        
        {analysis && (
          <div className="analysis-result">
            <h3>分析结果</h3>
            <p>{analysis.summary}</p>
            
            {analysis.issues.map((issue, index) => (
              <div key={index} className={`issue ${issue.type}`}>
                {issue.message}
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

export default CodeEditor;

特性：

📝 代码编辑器集成
🔍 实时代码分析
🤖 AI 代码生成
🐛 问题检测和建议

Vue 应用示例

基础 Vue 应用

展示如何在 Vue 3 应用中使用 XAI-SDK：

vue

<template>
  <div class="ai-assistant">
    <div class="chat-container">
      <div 
        v-for="message in messages" 
        :key="message.id"
        :class="['message', message.role]"
      >
        {{ message.content }}
      </div>
    </div>
    
    <div class="input-container">
      <input 
        v-model="input"
        @keyup.enter="sendMessage"
        placeholder="请输入您的问题..."
      />
      <button @click="sendMessage" :disabled="!input.trim()">
        发送
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { XAI_SDK } from 'xai-sdk';
import { VueAdapterPlugin } from '@xai-sdk/vue-adapter';

const messages = ref<any[]>([]);
const input = ref('');
const sdk = ref<XAI_SDK | null>(null);

onMounted(async () => {
  const sdkInstance = new XAI_SDK({ environment: 'browser' });
  await sdkInstance.registerPlugin(new VueAdapterPlugin());
  await sdkInstance.initialize();
  sdk.value = sdkInstance;
});

const sendMessage = async () => {
  if (!sdk.value || !input.value.trim()) return;
  
  const userMessage = {
    id: Date.now(),
    role: 'user',
    content: input.value
  };
  
  messages.value.push(userMessage);
  
  try {
    const response = await sdk.value.chat({
      messages: messages.value.map(m => ({
        role: m.role,
        content: m.content
      }))
    });
    
    messages.value.push({
      id: Date.now() + 1,
      role: 'assistant',
      content: response.content
    });
  } catch (error) {
    console.error('聊天错误:', error);
  }
  
  input.value = '';
};
</script>

<style scoped>
.ai-assistant {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.chat-container {
  height: 400px;
  overflow-y: auto;
  border: 1px solid #ddd;
  padding: 10px;
  margin-bottom: 10px;
}

.message {
  margin-bottom: 10px;
  padding: 8px 12px;
  border-radius: 8px;
}

.message.user {
  background-color: #007bff;
  color: white;
  margin-left: 20%;
}

.message.assistant {
  background-color: #f8f9fa;
  margin-right: 20%;
}

.input-container {
  display: flex;
  gap: 10px;
}

.input-container input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.input-container button {
  padding: 8px 16px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.input-container button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}
</style>

特性：

🎯 Vue 3 Composition API
💬 响应式聊天界面
🎨 现代化样式设计
⚡ 高性能渲染

🛠️ 开发指南

环境要求

Node.js 16+
npm/yarn/pnpm
现代浏览器（支持 ES2020+）

配置说明

所有示例都需要配置 AI 提供商的 API 密钥：

bash

# 复制环境变量模板
cp .env.example .env

# 编辑 .env 文件
OPENAI_API_KEY=your-api-key-here
CLAUDE_API_KEY=your-claude-key-here

自定义配置

每个示例都包含详细的配置文件：

typescript

// xai.config.ts
export default {
  aiProvider: 'openai',
  model: 'gpt-4',
  plugins: [
    '@xai-sdk/file-tools',
    '@xai-sdk/code-analyzer'
  ],
  tools: {
    enabled: ['read-file', 'analyze-code'],
    config: {
      'file-tools': {
        maxFileSize: 1024 * 1024 // 1MB
      }
    }
  }
};

📖 学习路径

初学者

进阶开发者

专家级

分析插件化 CLI
研究高级 Web 应用
贡献开源项目

🤝 贡献示例

我们欢迎社区贡献更多示例项目！

贡献流程

Fork 项目仓库
创建示例分支：git checkout -b example/your-example-name
添加示例代码和文档
提交 Pull Request

示例要求

📝 完整的 README 文档
🧪 可运行的代码示例
🎯 清晰的使用场景
📚 详细的注释说明

🔗 相关链接

快速开始 - 快速入门指南
使用指南 - 详细使用说明
插件开发 - 插件开发指南
API 参考 - 完整的 API 文档

🆘 获取帮助

🎉 开始探索！ 选择一个适合您技术栈的示例项目，快速体验 XAI-SDK 的强大功能！

示例项目 ​

📋 示例列表 ​

🖥️ CLI 应用示例 ​

⚛️ React 应用示例 ​

🟢 Vue 应用示例 ​

🌐 原生 JavaScript 示例 ​

🚀 快速开始 ​

克隆示例项目 ​

运行示例 ​

📚 示例详情 ​

CLI 应用示例 ​

基础 CLI 工具 ​

高级 CLI 工具 ​

React 应用示例 ​

基础 React 应用 ​

代码编辑器 ​

Vue 应用示例 ​

基础 Vue 应用 ​

🛠️ 开发指南 ​

环境要求 ​

配置说明 ​

自定义配置 ​

📖 学习路径 ​

初学者 ​

进阶开发者 ​

专家级 ​

🤝 贡献示例 ​

贡献流程 ​

示例要求 ​

🔗 相关链接 ​

🆘 获取帮助 ​

示例项目

📋 示例列表

🖥️ CLI 应用示例

⚛️ React 应用示例

🟢 Vue 应用示例

🌐 原生 JavaScript 示例

🚀 快速开始

克隆示例项目

运行示例

📚 示例详情

CLI 应用示例

基础 CLI 工具

高级 CLI 工具

React 应用示例

基础 React 应用

代码编辑器

Vue 应用示例

基础 Vue 应用

🛠️ 开发指南

环境要求

配置说明

自定义配置

📖 学习路径

初学者

进阶开发者

专家级

🤝 贡献示例

贡献流程

示例要求

🔗 相关链接

🆘 获取帮助