Skip to main content

Building with AI Tools

The Copera Starter Application gives you a working foundation out of the box. AI coding assistants can dramatically accelerate how quickly you customize and extend it — turning what might take days into hours, and hours into minutes.

The Concept​

When you work with the Starter Application, you already have authentication, routing, data fetching, and UI patterns in place. Your job is to adapt this foundation to your specific use case — changing what data you display, adding new pages, connecting new Copera Board columns, or wiring up new workflows.

AI tools excel at exactly this kind of task. Give them the right context, and they will generate new pages, components, and API routes that fit your existing codebase patterns. The key is context: the more the AI understands about your project structure and your Copera Board setup, the better its output will be.

Using Copera AI​

Copera has a built-in AI assistant that already understands your workspace, your boards, and your data.

What you can ask it:

  • "What columns does my Tickets board have, and what are their IDs?"
  • "How do I query rows from the Orders table where Status is 'Pending'?"
  • "Generate a Copera SDK snippet that creates a new row in my Projects board with a Name and Due Date."

Because Copera AI has direct access to your workspace structure, it can give you accurate column IDs and table names without you having to look them up manually. Use it as your first stop when you need to understand your data structure before writing code.

tip

Copy the column IDs and table IDs that Copera AI gives you directly into your config.ts file. This makes it easier to share accurate context with other AI tools later.

Using Claude, ChatGPT, or Gemini​

General-purpose AI assistants work well for generating pages, components, and logic — as long as you give them enough context about your project upfront.

Starting a Conversation​

Open a new conversation and provide this context at the start:

"I'm building a custom application using the Copera SDK (@copera.ai/sdk). The application connects to Copera Boards, which act as my database. I'm working from the Copera Starter Application. The documentation for the platform is at https://university.copera.ai/university/developers/starter-application/overview"

This one paragraph orients the AI to your stack. From here, it can generate code that uses the SDK correctly.

Sharing Your Column Structure​

Paste your config.ts file into the conversation. This file maps your Board's column IDs to human-readable names. With this context, the AI knows exactly which fields to reference in any code it generates.

// Example config.ts excerpt
export const COLUMNS = {
  TICKET_TITLE: 'col_abc123',
  TICKET_STATUS: 'col_def456',
  TICKET_ASSIGNEE: 'col_ghi789',
  TICKET_PRIORITY: 'col_jkl012',
};

Example Prompts That Work Well​

  1. Adding a new field to the detail view:

    "Add a 'Priority' column to the ticket detail page. The column ID in Copera is col_jkl012. Display it as a colored badge: red for High, yellow for Medium, green for Low."

  2. Creating a new dashboard page:

    "Create a new page at /dashboard that shows ticket counts grouped by Status. Use the existing React Query patterns from the project."

  3. Adding a notification workflow:

    "Add an email notification when a ticket's Status column changes to 'Done'. Use the Copera SDK webhook integration."

  4. Adapting the app for a different use case:

    "Convert this help desk application into a product catalog. I need columns for Product Name, Price, Description, and Image URL. Here are the column IDs from my Copera board..."

note

Always review AI-generated code before running it. Verify that column IDs match your actual config.ts values and that API calls follow the patterns in the Starter Application.

Using AI-Powered IDEs (Cursor, Windsurf, and Others)​

AI-powered IDEs embed the AI assistant directly into your code editor. They can read your entire codebase for context, which makes them particularly effective for the Starter Application.

Pointing the IDE to Your Architecture​

The Starter Application includes a CLAUDE.md file in both base-application-api/ and base-application-web/. These files are written specifically so that AI assistants can understand:

  • The technology stack (framework, libraries, versions)
  • Folder structure and where each type of file belongs
  • Coding conventions and naming patterns
  • How to connect to the Copera SDK

Add the CLAUDE.md file as a reference document in your IDE's context settings. The AI will then generate code that follows the established patterns rather than inventing its own.

Adding Documentation as Context​

Most AI IDEs let you add URLs or documents as reference material. Add the Copera University developer documentation:

https://university.copera.ai/university/developers/starter-application/overview

This gives the IDE's AI access to the SDK reference, so it can generate accurate API calls.

tip

In Cursor, you can add documentation URLs under Settings > Features > Docs. Once indexed, the AI will automatically reference SDK methods and patterns from the documentation when you ask it to generate code.

Tips for Best Results​

Always share your column IDs. AI tools cannot guess your Copera Board structure. The more specific you are about column IDs and table names, the more accurate the generated code will be.

Build incrementally. Start with one small change — add a single new field, create one new page — and test it before moving on. It is much easier to troubleshoot a small addition than a large one.

Reference the patterns that already exist. The Starter Application is intentionally consistent. When asking an AI to generate something new, point it to an existing file that does something similar: "Generate a new page that follows the same pattern as TicketDetailPage.tsx."

Verify SDK calls against the documentation. AI assistants may occasionally generate SDK method calls that do not exist or use outdated argument shapes. Cross-check against the SDK documentation before shipping.

Use Copera AI for data questions, external AI for code questions. Copera AI knows your boards; Claude and ChatGPT know how to write React components. Use each for what it does best.

Next Steps​