Getting Started with NextGate AI

Overview

NextGate AI is a powerful suite of APIs designed to enhance your SaaS application with state-of-the-art artificial intelligence capabilities. This guide will walk you through setting up your development environment and integrating NextGate AI seamlessly.

Installation

Install the Required Packages

First, install the necessary dependencies for using NextGate AI with Next.js 14.

npm install nextgate-ai next-mdx-plugins

Configure Your Project

Update your next.config.js to include NextGate AI's configurations.

import { withNextGateAI } from 'nextgate-ai/config';
 
const config = {
  reactStrictMode: true, 
  ai: {
    apiKey: process.env.NEXTGATE_API_KEY,
    endpoint: 'https://api.nextgate.ai/v1',
  },
};
 
export default withNextGateAI(config);

Remember to store your API key in a .env.local file to keep it secure.

NEXTGATE_API_KEY=your-api-key-here

Define MDX Components

Create a file named mdx-components.tsx to customize MDX components for your application.

import type { MDXComponents } from 'mdx/types';
import baseComponents from 'next-mdx-plugins';
 
export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    ...baseComponents,
    ...components,
  };
}

Setting Up AI-Powered Features

To integrate AI capabilities, set up the following in your application:

import { initializeAI } from 'nextgate-ai/core';
import { aiConfig } from '@/ai-config';
 
export const { fetchAIData, executeAICommands } = initializeAI({
  apiKey: process.env.NEXTGATE_API_KEY,
  config: aiConfig,
});

Explore AI Integration Options for more customization.

Launch Your Application

npm run dev

Once your server is running, verify that the AI features are operational by testing various endpoints and functions.

For detailed instructions on organizing your documentation, refer to Page Structure Guidelines.

FAQ

Key Properties

The following properties are automatically exported from MDX files:

Customizing MDX Plugins

You can adjust the MDX processing pipeline to suit your needs.

import { configureMDX } from 'next-mdx-plugins';
import mathPlugin from 'remark-math';
import highlight from 'rehype-highlight';
 
const withMDX = configureMDX({
  mdxOptions: {
    remarkPlugins: [mathPlugin],
    rehypePlugins: [highlight],
  },
});

Refer to Plugin Configuration for more details.

What is the .ai-map file?

The .ai-map file is generated during the build process. It provides a comprehensive index of all AI-enabled components and services, facilitating efficient server-side rendering and data fetching.

Advanced Topics

How Does It Work?

NextGate AI leverages Next.js's dynamic import capabilities to optimize AI resource management. By creating a central map of available AI functions and components, the framework efficiently handles requests and responses without manual intervention.

The .ai-map.ts file indexes all relevant AI files, allowing for seamless integration with the broader application ecosystem.

Explore the Advanced AI Guide for more insights into the architecture and capabilities of NextGate AI.