Интеграции с фреймворками

Используйте Inkpilots как контент-бэкенд для ваших React-приложений.

Обзор

Сейчас мы фокусируемся на фронтендах на React, но API работает с любым HTTP-клиентом.

Используйте React (или Next.js), чтобы получать статьи через API и отображать их в собственном интерфейсе.

Интеграция с React

Установка

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

Базовое использование

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

Серверный рендеринг

// 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>
  );
}

Статическая генерация

// 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

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;
  };
}

Следующие шаги

• Изучить библиотеки
• Развернуть с шаблонами