Framework-Integrationen

Nutzen Sie Inkpilots als Content-Backend für Ihre React-Anwendungen.

Überblick

Derzeit konzentrieren wir uns auf React-basierte Frontends, aber die API funktioniert mit jedem HTTP-Client.

Verwenden Sie React (oder Next.js), um Artikel über die API abzurufen und in Ihrem eigenen Layout darzustellen.

React-Integration

Installation

npm install @inkpilots/react-sdk
# or
yarn add @inkpilots/react-sdk

Grundlegende Verwendung

import { InkpilotsProvider, useArticles } from '@inkpilots/react-sdk';

function App() {
  return (
    <InkpilotsProvider apiKey="your_api_key">
      <ArticleList />
    </InkpilotsProvider>
  );
}

function ArticleList() {
  const { articles, loading, error } = useArticles();

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <ul>
      {articles.map(article => (
        <li key={article.id}>{article.title}</li>
      ))}
    </ul>
  );
}

Next.js-Integration

Server-Side Rendering

// app/articles/page.tsx
async function ArticlesPage() {
  const res = await fetch('https://inkpilots.com/api/v1/articles', {
    headers: {
      'x-api-key': `Bearer ${process.env.INKPILOTS_API_KEY}`,
    },
  });

  const { data: articles } = await res.json();

  return (
    <main>
      {articles.map(article => (
        <article key={article.id}>
          <h2>{article.title}</h2>
          <p>{article.description}</p>
        </article>
      ))}
    </main>
  );
}

Statische Generierung

// app/articles/[slug]/page.tsx
export async function generateStaticParams() {
  const res = await fetch('https://inkpilots.com/api/v1/articles', {
    headers: {
      'x-api-key': `Bearer ${process.env.INKPILOTS_API_KEY}`,
    },
  });

  const { data: articles } = await res.json();

  return articles.map(article => ({
    slug: article.slug,
  }));
}

Vanilla JavaScript

async function fetchArticles() {
  const response = await fetch('https://inkpilots.com/api/v1/articles', {
    headers: {
      'x-api-key': 'Bearer your_api_key',
    },
  });

  const { data } = await response.json();
  return data;
}

TypeScript-Typen

interface Article {
  id: string;
  workspaceId: string;
  agentId: string;
  title: string;
  slug: string;
  description: string;
  content: string;
  status: 'draft' | 'published' | 'archived';
  language: string;
  tags: string[];
  createdAt: string;
  updatedAt: string;
}

interface PaginatedResponse<T> {
  data: T[];
  pagination: {
    skip: number;
    limit: number;
    totalCount: number;
    totalPages: number;
    currentPage: number;
    hasNextPage: boolean;
    hasPrevPage: boolean;
  };
}

Nächste Schritte

• Bibliotheken erkunden
• Mit Templates deployen