> ## Documentation Index
> Fetch the complete documentation index at: https://docs.trainlyai.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Quickstart

> Trace your first AI call with Trainly in under 5 minutes.

# Quickstart

Get full observability on your AI pipeline in 5 minutes.

## Prerequisites

* A Trainly account ([sign up free](https://trainlyai.com/sign-up))
* Python 3.8+ or Node.js 16+
* An OpenAI, Anthropic, or any LLM API key

## Step 1: Install the SDK

<CodeGroup>
  ```bash Python theme={null}
  pip install trainly
  ```

  ```bash React theme={null}
  npm install @trainly/react
  ```
</CodeGroup>

## Step 2: Get your API key

1. Go to your [Trainly Dashboard](https://trainlyai.com/dashboard)
2. Navigate to **Settings → API Keys**
3. Click **Create API Key** — it starts with `tk_`
4. Copy your **Project ID** — it starts with `proj_`

<Tip>
  Set these as environment variables so you don't hardcode them:

  ```bash theme={null}
  export TRAINLY_API_KEY=tk_your_key_here
  export TRAINLY_PROJECT_ID=proj_your_project_here
  ```
</Tip>

## Step 3: Add @observe to your AI function

<CodeGroup>
  ```python Python theme={null}
  from trainly import TrainlyClient
  from openai import OpenAI

  # Initialize (reads from env vars automatically)
  trainly = TrainlyClient()
  openai_client = OpenAI()

  @trainly.observe(model="gpt-4o", tags=["quickstart"])
  def ask(question: str) -> str:
      response = openai_client.chat.completions.create(
          model="gpt-4o",
          messages=[{"role": "user", "content": question}]
      )
      return response.choices[0].message.content

  # Run it
  result = ask("Explain AI observability in one sentence.")
  print(result)
  ```

  ```typescript React theme={null}
  import { TrainlyProvider, useTrainlyObserve } from '@trainly/react';

  function App() {
    return (
      <TrainlyProvider
        projectId={process.env.NEXT_PUBLIC_TRAINLY_PROJECT_ID}
        apiKey={process.env.NEXT_PUBLIC_TRAINLY_API_KEY}
      >
        <Chat />
      </TrainlyProvider>
    );
  }

  function Chat() {
    const { trace } = useTrainlyObserve({ model: 'gpt-4o', tags: ['quickstart'] });
    const [answer, setAnswer] = useState('');

    async function handleAsk() {
      const response = await fetch('/api/ask', { method: 'POST', body: JSON.stringify({ question: 'Hello' }) });
      const data = await response.json();
      setAnswer(data.answer);
      await trace('Hello', data.answer);
    }

    return (
      <div>
        <button onClick={handleAsk}>Ask</button>
        <p>{answer}</p>
      </div>
    );
  }
  ```
</CodeGroup>

## Step 4: View your traces

Open your [Trainly Dashboard](https://trainlyai.com/dashboard) and navigate to the **Trace Explorer**. You should see your trace with:

* **Input/Output** — the exact prompt and response
* **Model** — which LLM was used
* **Latency** — how long the call took
* **Tokens** — prompt and completion token counts
* **Cost** — estimated cost based on model pricing

## What's next?

<CardGroup cols={2}>
  <Card title="Core Concepts" icon="shapes" href="/concepts">
    Learn about traces, spans, sessions, and scoring.
  </Card>

  <Card title="Python SDK" icon="python" href="/python-sdk">
    Deep dive into @observe, manual logging, and agent sessions.
  </Card>

  <Card title="React SDK" icon="react" href="/react-sdk">
    Set up tracing in your React app with useTrainlyObserve.
  </Card>

  <Card title="API Reference" icon="code" href="/api-reference/introduction">
    Direct REST API access for trace ingestion and analytics.
  </Card>
</CardGroup>