DEV Community: adambaialiev

Let's test custom GPT that can create git repositories

adambaialiev — Fri, 09 Feb 2024 11:53:00 +0000

Recently Open AI introduced custom GPTs, and the feature that made me exited was actions. According to their docs:

Actions allow GPTs to integrate external data or interact with the real-world, such as connecting GPTs to databases, plugging them into your emails, or making them your shopping assistant, all through APIs.

What if we make GPT to interact with GitHub repositories with GitHub API?
Here's the list of actions that could be useful:

Create a repository
Read files from a repository
Create or update files in a repository

Probably, such custom GPT can open new possibilities in our developer's workflow.

So I've created a custom GPT. Here's the link

In order to enable this GPT to interact with your GitHub, you should provide access token. Here's how to generate it:

Go to GitHub and open Settings
Click Developer Settings in the sidebar menu
Click Personal access token menu
You can generate Fine grained tokens or classic tokens. Please take into account, that if you want this GPT to create repo, you should give bigger scope.

Let's open our custom GPT:

Let's put this prompt:

You should create Vanilla JS project without dependencies.
I will open index.html, and I will see there one button called "Increase". Each item I press the button, I see the big number above the button which is incremented. Each time I press the button, the number is incremented and can be seen in the UI. Button should be also big. Both button and number should be at the center of the page. Button is below the number.
You can generate files and upload them to GitHub right away.

GPT responded showing the understanding of what it should do. It requested an auth token from me, to interact with GitHub from my account.

It performed two actions, and gave me the link to the repository

Here's the result when I've opened index.html file:

Link to the AI generated repository
Link to the custom GPT

I think in the near future we will have very capable GPTs, that will be able to do the work for us, developers. And our role will come to the following:

Generate prompts according to requirements/specifications of stakeholders
Feed this prompts to custom GPTs, and receive git commits as outputs.
Check the work, making sure that everything is working as expected. Do some small changes in code if necessary.

Please let me know what do you think.
In the next post I will provide a more complicated use case.

How to add Styled Components to Next.js project using TypeScript

adambaialiev — Wed, 30 Dec 2020 14:35:17 +0000

Want to use styled components in your Next.js project? Also using TypeScript?

Here are the steps we need to do:

Add the styled components library with types
Add the special babel plugin
Create _document.tsx and _app.tsx files
Create styled.d.ts declaration file.

Add the styled components library with types

Run

yarn add styled-components
yarn add @types/styled-components

Add the special babel plugin

yarn add --dev babel-plugin-styled-components

Create .babelrc file with the following:

{
  "presets": ["next/babel"],
  "plugins": [["styled-components", { "ssr": true }]]
}

Create `_document.tsx` and `_app.tsx` files

Create in pages/_document.tsx file

import Document from "next/document";
import { ServerStyleSheet } from "styled-components";

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const sheet = new ServerStyleSheet();
    const originalRenderPage = ctx.renderPage;

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) =>
            sheet.collectStyles(<App {...props} />),
        });

      const initialProps = await Document.getInitialProps(ctx);
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      };
    } finally {
      sheet.seal();
    }
  }
  render() {
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

Create pages/_app.tsx and paste the following:

import { createGlobalStyle, ThemeProvider } from "styled-components";

const GlobalStyle = createGlobalStyle`
  body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  * {
    font-family: 'Open Sans', sans-serif;
  }
`;

const theme = {
  colors: {
    primary: "#0070f3",
  },
};

export default function App({ Component, pageProps }) {
  return (
    <>
      <GlobalStyle />
      <ThemeProvider theme={theme}>
        <Component {...pageProps} />
      </ThemeProvider>
    </>
  );
}

Create `styled.d.ts` declaration file.

Create a declarations file for TypeScript in the project root. Let's name it styled.d.ts

import "styled-components";

declare module "styled-components" {
  export interface DefaultTheme {
    colors: {
      primary: string;
    };
  }
}

So if we want to describe the shape of our Theme, we can do it here.

Use the library

Rename index.js to index.tsx, delete everything and paste the following:

import React from "react";
import styled from "styled-components";

const Title = styled.h1`
  font-size: 50px;
  color: ${({ theme }) => theme.colors.primary};
`;

const Home: React.FC = () => {
  return <Title />;
};

export default Home;

That's it! You can now use the styled-components in Next.js with TypeScript.

How to edit the head tag in Next.js

adambaialiev — Wed, 30 Dec 2020 14:00:14 +0000

Want to add some link or script tags in the head?
In this post I'm going to show how to edit the content of the head tag.

In Next.js we can do it by overriding the default Document;

Create the file pages/_document.js and extend the Document class.

In render method we return the actual structure of the whole application tree. Don't put UI or business logic here.

In this examples, between the Head tag, I placed the link tags to Google fonts.

import Document, { Html, Head, Main, NextScript } from "next/document";

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps };
  }

  render() {
    return (
      <Html>
        <Head>
          <link rel="preconnect" href="https://fonts.gstatic.com" />
          <link
            href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap"
            rel="stylesheet"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

That's it!