Framework Integrations

Use Inkpilots as a content backend for your React applications.

Overview

Today we focus on React-based frontends, but the API works with any HTTP client.

Use React (or Next.js) to fetch articles from the API and render them in your own layout.

React Integration

Installation

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

Basic Usage

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

Static Generation

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

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