Spanora Setup Agent Skill

### Spanora Integration Guide for Your React Dashboard

Here’s a step-by-step walkthrough to integrate Spanora into your React dashboard (e.g., a customer support tool) to monitor LLM interactions:

---

#### **1. Install the Spanora SDK**
Run this in your project directory:
```bash
npm install @spanora/react-sdk
```

#### **2. Initialize Spanora in Your App**
Add this to your main `App.js` or entry file:
```javascript
import { SpanoraProvider } from '@spanora/react-sdk';

function App() {
  return (
    <SpanoraProvider apiKey="your_api_key_here" projectId="your_project_id">
      {/* Your existing app components */}
    </SpanoraProvider>
  );
}
```

#### **3. Wrap Your LLM Calls**
For example, if you’re using OpenAI’s API in a chat component:
```javascript
import { useSpanora } from '@spanora/react-sdk';

function ChatComponent() {
  const { trackLLMInteraction } = useSpanora();

  const handleSendMessage = async (message) => {
    const response = await fetch('/api/chat', {
      method: 'POST',
      body: JSON.stringify({ message }),
    });

    const data = await response.json();

    // Track the interaction with Spanora
    trackLLMInteraction({
      model: 'gpt-4',
      input: message,
      output: data.response,
      tokensUsed: data.usage?.total_tokens,
      timestamp: new Date().toISOString(),
    });

    return data.response;
  };

  // ... rest of your component
}
```

#### **4. Verify Setup in Spanora Dashboard**
- Log in to your [Spanora dashboard](https://app.spanora.ai).
- Navigate to **Projects > Your Project > Observability**. You should see real-time logs of your LLM interactions, including:
  - Input/output pairs
  - Token usage
  - Latency metrics

---

#### **Troubleshooting**
- **401 Errors**: Double-check your `apiKey` and `projectId` in the provider.
- **Missing Data**: Ensure `trackLLMInteraction` is called *after* the LLM response is received.
- **Performance Impact**: Spanora’s SDK adds <5ms overhead per call—negligible for most use cases.

For advanced setups (e.g., custom logging, error tracking), refer to the [Spanora Docs](https://docs.spanora.ai).

Let me know if you’d like help debugging a specific issue!