Jak používat Claude API v Next.js

V dnešním článku se podíváme na to, jak integrovat Claude API do aplikace postavené na Next.js. Zaměříme se zejména na streaming responses a typy v TypeScriptu, což jsou klíčové aspekty pro efektivní práci s API.

Co je Claude API?

Claude API je rozhraní pro umělou inteligenci, které umožňuje generovat text na základě zadaných pokynů. Jeho výhodou je schopnost generovat odpovědi v reálném čase, což je ideální pro aplikace, které potřebují interaktivní a dynamické uživatelské rozhraní.

Proč používat streaming responses?

Streaming responses umožňují serveru posílat data klientovi postupně, jakmile jsou k dispozici. To je zvláště užitečné pro aplikace, které potřebují zobrazovat odpovědi v reálném čase, například chatovací aplikace nebo aplikace pro generování textu na základě uživatelského vstupu.

Nastavení Next.js projektu

Nejprve si vytvořte nový projekt Next.js, pokud ho ještě nemáte:

npx create-next-app my-clause-app
cd my-clause-app

Poté nainstalujte potřebné balíčky pro práci s HTTP požadavky, například axios:

npm install axios

Vytvoření API klienta

Vytvořte soubor lib/claude.ts, kde vytvoříme klienta pro komunikaci s Claude API. Použijeme axios pro správu HTTP požadavků.

import axios, { AxiosResponse } from 'axios';

const CLAUDE_API_URL = 'https://api.claude.ai/v1/generate';

export const generateText = async (prompt: string): Promise<ReadableStream<Uint8Array>> => {
  const response: AxiosResponse<ReadableStream<Uint8Array>> = await axios.post(CLAUDE_API_URL, {
    prompt,
    stream: true,
  }, {
    responseType: 'stream',
  });

  return response.data;
};

Tento kód definuje funkci generateText, která přijímá prompt jako vstup a vrací stream odpovědi z API. Důležité je nastavit responseType na stream, což umožní příjem dat po částech.

Typy v TypeScriptu

Při práci s API je dobré definovat typy, které usnadní práci s daty a pomohou odhalit chyby už při vývoji. Můžeme definovat typy pro odpovědi z API:

export interface ClaudeResponse {
  id: string;
  choices: Array<{
    text: string;
    index: number;
  }>;
}

Typ ClaudeResponse reprezentuje strukturu odpovědi, kterou očekáváme od API. To nám pomůže lépe pracovat s daty, která přijímáme.

Vytvoření komponenty pro zobrazení výsledků

Nyní vytvoříme komponentu, která bude zpracovávat uživatelský vstup a zobrazovat výsledky generované pomocí Claude API. Vytvořte soubor components/ClaudeGenerator.tsx:

import React, { useState } from 'react';
import { generateText } from '../lib/claude';

const ClaudeGenerator: React.FC = () => {
  const [input, setInput] = useState<string>('');
  const [output, setOutput] = useState<string>('');

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setOutput('');

    const stream = await generateText(input);
    const reader = stream.getReader();
    const decoder = new TextDecoder('utf-8');

    while (true) {
      const { done, value } = await reader.read();
      if (done) break;
      setOutput(prev => prev + decoder.decode(value));
    }
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <textarea
          value={input}
          onChange={(e) => setInput(e.target.value)}
          placeholder="Zadejte svůj prompt"
        />
        <button type="submit">Generovat</button>
      </form>
      <div>
        <h3>Výsledky:</h3>
        <pre>{output}</pre>
      </div>
    </div>
  );
};

export default ClaudeGenerator;

V této komponentě používáme React hooks pro správu stavu. Uživatel zadá prompt, který se odešle do API, a výsledky se postupně zobrazují na obrazovce. Použití TextDecoder nám umožňuje dekódovat streamované odpovědi z API.

Použití komponenty v aplikaci

Nyní, když máme komponentu ClaudeGenerator, můžeme ji použít v naší hlavní stránce. Otevřete soubor pages/index.tsx a přidejte následující kód:

import React from 'react';
import ClaudeGenerator from '../components/ClaudeGenerator';

const Home: React.FC = () => {
  return (
    <div>
      <h1>Claude API Generator</h1>
      <ClaudeGenerator />
    </div>
  );
};

export default Home;

Tímto způsobem jsme integrovali naši komponentu do hlavní stránky aplikace. Nyní máte plně funkční aplikaci, která interaguje s Claude API a zobrazuje výsledky v reálném čase.

Závěr

Integrace Claude API do aplikace Next.js pomocí streaming responses a TypeScript typů je efektivní způsob, jak vytvářet interaktivní a dynamické uživatelské rozhraní. Tento postup vám umožní rychle reagovat na uživatelské vstupy a poskytovat kvalitní odpovědi pomocí umělé inteligence. Doufám, že vás tento článek inspiroval k experimentování s AI ve vašich projektech. Pokud máte dotazy nebo potřebujete další informace, neváhejte se ptát v komentářích!

Hotový starter projekt

Pokud chceš rovnou začít, máme připravený open-source starter: claude-api-starter — Next.js projekt se streamingem a structured output, stačí přidat API klíč.

git clone https://github.com/aidevelopers-cz/claude-api-starter
cd claude-api-starter && npm install
cp .env.example .env.local
npm run dev